Importing the Design into MGS Composer
Introduction
This guide shows how to import the design archive and to refine and polish the Graphical User Interface (GUI) in Microchip Graphics Suite (MGS) Composer. This requires the export archive to have been generated as shown in the "Exporting the Figma Design" page.
Importing the Archive
Launch MGS Composer and click New Project in the New Project Wizard dialog box. The New Project Wizard can also be started by clicking File > New.
Use a Clean Design with WQVGA resolution (480x272). The default Color Mode (RGB565) and Memory Profile will be used for this tutorial.
Click Create to continue.
MGS Composer will create a new project with a blank screen. Go to File > Import > Figma Composer Project to import the Figma® export archive.
Navigate to the location of the FigmaExport.zip archive, select the archive and click Open.
Since this is a new project, click No when prompted to save the current project.
Click Yes to import the two screens from the export archive.
When the import process completes, the two imported screens will now show on the MGS Composer project. Click on the screen tabs to view the imported screens.
The blank screen that was created with the new project can be deleted. Select the blank screen (Screen0) from the Screens list and click the Delete Screen button.
Under the Hood
Let’s inspect the imported screens in more detail.
Open the HomeScreen screen and check out the tree structure in the Screen Tree.
The widget tree matches the hierarchy of the Figma components (in reverse z-order).
Image Assets
Go to Assets > Images to view the Image Assets. Observe that all the grouped and shared components have been imported as image assets and stored as RGBA8888 with RLE compression.
Font Assets
Go to Assets > Fonts to view the project fonts. The export process does not include the font files, so the exact fonts used for the Figma project are not imported into the MGS Composer project.
An equivalent point Noto Sans font is used instead and you will have to manually add the right fonts in MGS Composer.
String Assets
Open Assets > Strings to view the imported strings. The imported strings are automatically assigned the equivalent font.
Color Schemes
In the Scheme Manager, observe that new schemes were added based on the colors used in the imported design. The import process will automatically create and assign the color scheme to the new panel and text widgets that use the color in the Figma design.
Refining and Polishing Up the Project
While the import process will try its best to match the look and structure of the Figma design when imported in MGS Composer, it is still necessary for the User Interface (UI) developer to adjust and refine the imported design in MGS Composer to achieve the visual target.
Fix Clipped Widgets
Some vectors paths or shapes in Figma may be clipped when imported. This is party due to the difference in the way the size is interpreted between Figma and MGS Composer.
| Figma | MGS Composer | |
Figma Vectors vs MGS Composer Image Widgets In Figma, the size of the object is based on the center of the vector path so it doesn't consider the width of the stroke. Since this size is used to set the image widget size when the image is imported to MGS Composer, some sections of the object may get clipped. Here's an example where the size of the vector path in Figma is based on the center of the stroke and would clip the parts of the widget in MGS Composer. |  |  |
Figma Text vs MGS Composer Labels MGS Composer cannot import the exact same font used in the Figma and will use the equivalent point size Noto Sans font when importing text. If the typefaces in the Figma font are bigger than the Noto Sans typefaces of the same point size, the text in the label widgets in MGS Composer may be clipped. |  |  |
These can be quickly fixed in MGS Composer by resizing the widgets to eliminate the clipping.
| After importing | After resizing clipped widgets |
 |  |
Simplifying the Widget Tree
The Figma importer will convert all Figma frames into panel widgets in the MGS Composer screen design. Since frames may be often used in the Figma project to create the UI design, the import process to MGS Composer may result in a very complex and deep widget tree with every widget being parented into panel widgets with multiple levels.
An overly complex and deep widget tree can affect performance as it requires more time to traverse the tree to update each widget state. It will also require more memory to build a complex and deep widget tree, which may cause issues in memory constrained devices.
For example, the imported HomeScreen consists of a widget tree that can be up to six layers deep.
If the use of frames cannot be minimized in Figma, we recommend simplifying the widget tree in MGS Composer to optimize the design. This is easily done in MGS Composer by dragging child widgets to a higher-order parent widget therefore reducing the depth of the tree.
By re-parenting the widgets, the maximum tree depth is now reduced to three without affecting the visual design.
Enabling User Input
The Figma Importer imports the visual elements of the UI into the MGS Composer project, specifically images, text and background panels. These visual elements are translated into MGS display widgets as image, label, and panel widgets in the MGS Composer project. The importer also keeps the hierarchy and order of the UI elements in the screen's widget tree.
To add interactivity and event handling on the imported screen design, the appropriate input widget must be added based on the type of user input or control needed by the UI.
Adding Buttons
One quick way to enable user input is to add buttons to the design. To quickly and easily enable button input, transparent button widgets can be overlayed on top of the areas of the screen that are designed for button input.
For example in the HomeScreen screen, button widgets can be overlayed on the left menu buttons, the fan mode buttons and the up/down buttons for the temperature control.
The button widgets can be made transparent by setting the fill and border properties to None, and be made interactive by enabling the pressed and/or released event property.