Skip to Content

Figma® Design Guidelines for MGS Composer

Last modified by Microchip on 2025/02/18 11:45

Introduction

This guide shows how to configure the Figma® design so that it successfully imports into Microchip Graphics Suite (MGS) Composer. 

This guide begins with an example design in Figma. Please download the example design and import it into your Figma project.

Figma Design

When imported and opened successfully in Figma, the design appears as shown in Figure 1.

Figma Design

Figure 1

At the top-most level, the example design consists of the following:

  • Three UI screens; each screen is a frame that is the size of the screen design (WQVGA, 480x272):
    • HomeScreen
    • WifiScreen
    • SetupScreen
  • Four components with instances used in the UI screens:
    • imgHomeShared
    • imgWifiShared
    • imgSettingsShared
    • imgWifiIconShared

Back to Top

Design Guidelines

To show how the design is configured to be easily imported into MGS Composer, let's look at the HomeScreen frame. 

The HomeScreen consists of the following UI elements:

Home Screen

Figure 2

Back to Top

Using Images

To use images, the visual elements that comprise the image are included in a group that can be 'flattened' during the export process. These will be imported into MGS Composer as image widgets in the screen design, and the associated image assets are added in the MGS Composer project.

Here are some examples:

  • imgMicrochip is composed of multiple vector paths that draw the Microchip logo and name. Having these in a group will merge these vectors into a single image.
Grouping Vectors into a single image

Figure 3

  • imgHomeSelect is composed of a vector path (home) and a rectangle with rounded edges. Having these in a group will merge these into a single image.
Grouping vectors and rectangles into a single image

Figure 4

Back to Top

Using Labels and Text

To use text, simply add a text object into the Figma design. MGS Composer will automatically import these as label widgets into the screen with the associated string assets and color scheme.

Here's an example of how text objects are used in the Figma Project.

Using text for Labels

Figure 5

Notes:
1. Do not mix different fonts families, weights and sizes in a single text object. Use a separate text object for each font family, weight or size.
2. MGS Composer will use Noto Sans by default for the string assets. That means that the appropriate font file will need to be added and set in the MGS Composer project for the imported strings. 

Back to Top

Using Panels and Frames

Frames in Figma are imported as panel widgets in MGS Composer. Frames can be used as widget containers or as filled backgrounds in the design. 

Here are examples on how frames are configured in Figma:

  • The pnlLeftMenu frame is used as a container for three objects. This will be imported as a parent panel widget with three child widgets in MGS Composer.
Using Frames for Panels

Figure 6

  • The pnlFan frame is used as both a container and a filled background. This will be imported as a parent panel widget with two child label widgets and an image widget. The parent panel widget will have a solid fill with the appropriate color scheme for the fill color.
Frame as parent panel widget

Figure 7

Back to Top

Using Components for Shared Image Assets

Designs may use the same image or icon in multiple screens or widgets. Figma supports this use case using a component, which is a reusable element that designers use across multiple projects. In the same way, a component in Figma is added in MGS Composer as an image asset. This image asset is used in all the equivalent image widgets of the component instances. 

Here's an example of a shared component.

  • The imgSettingsShared component is reused in the left menu panel of HomeScreen and WifiScreen. The component consists of a vector (gear icon) and a filled rectangle that are grouped to create a flattened image. When HomeScreen and WifiScreen are both imported into MGS Composer, the grouped objects will be added as a single image asset that is shared between the two screens.
Using Components to share image assets

Figure 8

  • The imgWifiIconShared component is for the Wi-Fi® icon that is used in multiple instances in the WifiScreen. During import, only one image asset will be created for the icon image and it will be shared by image widgets in the WifiScreen.
Using Components for sharing image assets

Figure 9

Information

Note that asset sharing is processed per import and component instances are identified only on frames that are included in the same import task.

For the example above, if both HomeScreen and WifiScreen are included in one import task, the component imgSettingsShared will be imported as a single image asset that is shared between image widgets in either screens.
 

On the other hand, if HomeScreen and WifiScreen are imported in two separate import tasks, each import task will create an instance of the imgSettingsShared image asset. This will essentially duplicate the image asset in the design and the associated image widget on each screen will use different image assets.

Back to Top

Naming Convention

MGS Composer will use the names of the Figma objects for the widget and asset names. It is best to specify the object names in Figma so that they match how they would be labeled as widgets in MGS Composer. Note that widget names in MGS Composer are also used as variable names in the generated C-code, so it is recommended that Figma objects are named so that they are compatible with C variable naming (i.e., no special characters).

Back to Top