This site will be unavailable on Friday 21 February from 11:00AM to 5:00PM MST (1800 to 2400 UTC) for system maintenance.Additional Information on Importing Figma® Designs
Introduction
This section provides additional information and guidelines on how to effectively use the Figma® import function in Microchip Graphics Suite (MGS) Composer to accelerate the Graphical User Interface (GUI) development process.
Translating a Design From Figma to MGS Composer
An important part of successfully importing designs from Figma into MGS Composer is understanding how this process takes place. Figma and MGS Composer both render user interfaces, but they differ in how they do so:
Similarities | |
| What You See Is What You Get (WYSIWYG) | Objects can be placed and moved about in the design window and are visually represented as intended in the final product. |
| Tree Structure | Design layout is organized using a tree structure (parent/child hierarchy). |
| Object Properties | Objects in the design have properties, such as position, size, and color, that can be changed. |
| Images and Text | Images can be displayed, and text can be rendered using a specified font, size, and color. |
Differences | |
| Pages and Screens | Figma uses Pages to organize separate scenes, while MGS Composer uses Screens. A Figma page is unbounded in size and is meant to contain any number of related or unrelated elements, while an MGS Composer screen has a fixed resolution and is meant to be displayed as a single screen of a user interface. |
| Object Types | Figma is used to create mockups of User Interfaces (UIs) but does not implement any interactive functionality itself. It can display images, shapes, text, and other assets in a way that visually represents buttons, switches, scrollbars, text boxes, and other parts of a modern UI. However, these are in appearance only; Figma does not have a concept of what these visual pieces represent. On the other hand, MGS Composer is used to create functional UIs. It does this using widgets, such as the buttons/scrollbars listed above. Each widget not only has a visual style but also backend logic. MGS Composer understands both the visual and functional parts of these. Because of these differences, many object properties also differ as well. Both Figma and MGS Composer consider position, size, and name in their object properties, but beyond that, the properties of objects differ. |
| Rotation | Objects in Figma can be rotated 360°, but MGS Composer does not have a concept of rotation for its objects. It is strongly recommended to rotate only vector primitives (rectangles, lines, paths, images, and SVGs) in Figma; MGS Composer will attempt to turn these into a flattened image. However, frames, groups, and text are unable to be rotated and imported into an MGS Composer design. |
| Z-Order | The Z-Order of a design is the order in which the objects in the tree structure are rendered. Objects rendered first are blocked by (or blended with) objects that are rendered last. In Figma’s default mode, objects higher in the tree are rendered last and objects lower in the tree are rendered first. In Figma’s developer mode, the order is reversed; higher objects are rendered first and lower objects are rendered last. MGS Composer uses the same approach as Figma’s developer mode, where objects higher in the tree are rendered first (beneath) objects lower in the tree, which are rendered last (on top). |
How a Figma Design is Translated to an MGS Composer Design
MGS Composer translates the exported ZIP archive into a design by first parsing the layout JSON, generating assets based on the parsed data, and finally creating screens that reflect the Figma layout and use the assets generated during the import process. These steps are executed automatically and sequentially during the import process.
The following outlines describe how these steps work so that the user has a better understanding of how their Figma design will look when imported into MGS Composer.
Parsing
MGS Composer reads the layout JSON file and parses the hierarchy of Figma objects as well as their properties. This information is then prepared for the next step.
Asset Generation
Fonts, strings, and images are the types of assets available in a MGS Composer design. MGS Composer analyzes the data produced in the parsing step and creates assets for use in the design.
Fonts and Strings
For every Figma text item in the parsed data, MGS Composer will use the literal value of the text (for example, “my text”) as well as the point size of the text.
- If the point size (for example, 12 pt) has not already been encountered, MGS Composer will create a new font with point size of 12. If text with this size has already been encountered, the existing asset is used.
- If the text literal value (“my text”) has not yet been encountered, a string asset is created with this value, and assigned to the associated font from Step 1. If this string has already been encountered, the existing asset is used.
Images
Image assets are generated in three ways: Figma components, Figma images, and Figma frames and groups.
Asset Type | |
| Figma Components | Whenever a component is encountered for the first time, MGS Composer will search through the component’s children, gather all renderable vectors, and flatten them into a single image asset. This asset is then used for all subsequent instances of the component. |
| Figma images | Literal images in Figma are directly translated into image assets in MGS Composer. Even if two images in Figma are the same, they will be imported as separate assets unless they are within a Figma component. |
| Figma frames & groups | All first-order children of a Figma frame or Figma group that are renderable vectors are gathered and flattened into an image asset. In addition, if flatten groups to png is enabled in the Figma export, then Figma groups will be treated as single preexisting image. |
After all font, string, and image assets have been generated, the import proceeds to the final step.
Screen Creation
With the parsed layout data and assets, the final step is to turn these into screens with widgets.
In this step, MGS Composer iterates through the parsed data from the first step. It attempts to translate every Figma object it encounters into the corresponding equivalent widget in MGS Composer:
| Figma Object | MGS Composer Widget |
| Frame (top-level) | Screen |
| Frame | Panel |
| Group | Panel |
| Text | Label |
| Image | Image |
| Vector types | Image (asset generation) |
| Component | Image (shared asset) |
After this step is complete, the user will see that new screens have been created. Each screen contains a set of panels, labels, and images that are organized in such a way that mirrors the original Figma design.
Further Reading
| Figma Design Guidelines | This guide shows how to configure the Figma design so that it successfully imports into MGS Composer. |
| Additional Information |
|