Working with UI Designs in Figma®
What is Figma?
Figma® is a web-based design tool that is primarily used for interface design, prototyping, and collaboration. It allows multiple designers to work on the same project simultaneously, making it a popular choice for teams.
Figma is widely used in the tech industry for designing user interfaces for websites, mobile apps, and other digital products.
Figma Importer Feature in MGS Composer
The Figma Importer feature in MGS Composer facilitates the transfer of designs from Figma into MGS Composer for further development. Specifically, it can import the Figma design into MGS Composer as screens with images, labels/strings and panel widgets and graphics assets.
The Figma import feature includes two components:
- Figma Exporter plugin for Figma
- Figma Importer feature within MGS Composer
MGS Composer Exporter (Plugin for Figma)
The Figma Exporter plugin allows a Figma user to select parts of their Figma design and export them as a ZIP archive to be imported by MGS Composer. This archive contains a JSON layout file, image assets, and SVG assets.
Installing the Plugin
Free Version
If using a free version of Figma, the MGS Composer Exporter plugin can be accessed by going to Menu > Plugins > Manage Plugins.
Figure 1: Manage Figma Plug-ins file path
In the Plugins & widgets tab, search and click MGS Composer - Exporter.
Figure 2: Search MGS Composer - Exporter
Click Save to save the MGS Composer - Exporter plugin. Click Run to launch it.
Figure 3: MGS Composer - Exporter plugin
Licensed Version
If using a licensed version of Figma, the MGS Composer plugin can also be accessed in Developer Mode. Navigate to the bottom toolbar in Figma and select Developer Mode by toggling the </> slider on the right.
Figure 4: Developer Mode Toolbar - Toggle Off
Figure 5: Developer Mode Toolbar - Toggle On
Next, navigate to the right sidebar and select Plugins.
Figure 6: MGS Composer Plugin
In the search field, enter "MGS Composer". Select MGS Composer – Exporter plugin when it appears.
An overview of the plugin will appear, along with a green Run button. Clicking this button runs the plugin, which should appear as a window docked to the right side of the Figma app.
Figma Exporter Archive
The Figma Exporter exports the design into an archive containing a JSON layout file, image, and SVG assets.
The layout file contains the structure of the Figma design as well as paths to the designs’ assets. For example, a Figma Design consisting of a frame containing two rectangles would produce a layout file that has a ‘frame’ object with two ‘rectangle’ children. Depending on the settings used during export, these rectangle objects might also contain filesystem paths to SVG assets indicating how they should be rendered.
Figure 7: Frame with Two Rectangles in Figma
Figure 8: Snippet of JSON Layout
Alongside the layout file are image (PNG) and SVG assets. These assets are referenced via filesystem paths in the layout file and are used during the MGS Composer import process to automatically produce finalized assets within MGS Composer itself.
Figma Importer (in MGS Composer)
The Figma Importer feature allows MGS Composer users to import a Figma design and automatically generate screens, widgets, and assets that reflect the Figma design as closely as possible.
The importer works by parsing the layout JSON from the exporter and translating the objects from Figma into their equivalents in MGS Composer. For example, the previous example of a Figma design with a frame containing two rectangles would end up as a Panel Widget containing a single Image Widget; this image would be a flattened picture of the two rectangles.
Figure 9: Resulting widgets (tree) of exported Figma design
Figure 10: Resulting widgets (design) of exported Figma design
Figma Export and MGS Composer Workflow
The high-level view of the process is as follows:
- A design is created in Figma. There are multiple ‘screens’ in this design, each representing a different GUI screen in MGS Composer.
- The Exporter plugin is used to export desired screens of the design.
- A Figma page is selected to export from
- Screens are chosen and generated into data (JSON and assets)
- The data is exported to a ZIP archive
- MGS Composer imports the ZIP archive. Screens, widgets, and assets are created to closely reflect the original Figma design.
Steps 2 and 3 are repeated for every import process.
Tutorials
These tutorials guide you through the process of creating a UI design in MGS Composer from a Figma design.
Exporting a Design in Figma
This guide explains how to set up the Figma design and utilize the MGS Composer Exporter to create an export archive that can be imported into MGS Composer.
Importing and Optimizing the Design in MGS Composer
This guide shows how to import the design archive and refine and optimize the GUI in MGS Composer.
Additional Information
This section provides additional information and guidelines on how to use the Figma import function in MGS Composer to accelerate the GUI development process effectively.