Skip to Content

Exporting the Figma Design

Last modified by Microchip on 2025/02/05 14:04

Introduction

This guide explains how to set up the Figma® design and utilize the Microchip Graphics Suite (MGS) Composer Exporter to create an export archive that can be easily imported into MGS Composer.

The MGS Composer Exporter plug-in must be installed in Figma. Follow the steps in the previous section on how to install the plug-in.

The guide starts with an example design in Figma that needs to be downloaded and imported into a Figma project.

Figma Design

When imported and opened successfully in Figma, the design looks like the accompanying image.

Figma Design

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

  • 3 User Interface (UI) screens. Each screen is a frame that is the size of the screen design (WQVGA, 480x272).
    • HomeScreen
    • WifiScreen
    • SetupScreen
  • 4 Components, with instances used in the UI screens.
    • imgHomeShared
    • imgWifiShared
    • imgSettingsShared
    • imgWifiIconShared

For more information on how the Figma design is configured for MGS Composer Import, refer to the Figma Design Guidelines.

Exporting the Figma Design

To export an archive, in Figma go to Menu > Plugins > Manage Plugins.

Figma Plug-ins

Back to Top

In the Plugins & Widgets tab, search and click MGS Composer - Exporter.

Figma Plug-in for MGS Composer Design Exporter

Back to Top

Click Save to save the MGS Composer - Exporter plugin. Click Run to launch it.

Exporter Plugin

Back to Top

Select Page 1 and then click Select Page.

Select Page for Export

Back to Top

In the Component Data screen, select 2 screens (SetupScreen, WifiScreen) to be imported to MGS Composer. You can select the screens in the Figma layers or check them in the MGS Composer Component Data window.

Warning

Do not select the SetupScreen, we will import that as a separate step later.

Select Screens to Export

A couple of other options are shown in the plug-in window. If both options are checked, Flatten 'Group Components' will take higher priority during export.

Export Options

Flatten ‘Group Components’ during export

This will flatten or merge all visible elements in a group into a single object. This is useful when using multiple vector paths or other visual objects to draw an image. Grouped components will be imported as an image widget on the MGS Composer screen with an image asset assigned to it.

This is enabled by default.

Export all primitives as .svg assets

This will export Figma vector paths, shapes, and other primitives such as SVGs. MGS Composer will try to convert these SVGs into image assets. All SVGs that share a parent frame or group will be flattened into a single image. This is useful for batch flattening for images.

This is disabled by default.

Warning

Note that since this is using the MGS Composer to merge and flatten the vectors, the final image might be visually different from how it's shown in Figma. 

Keep the default options for now.

Back to Top

Click Generate Data to proceed.

Generate Data

Back to Top

The MGS Composer Exporter Plug-in Window will show the Figma components and generated JSON file that will be included in the export archive. Click Export to create the archive.

Export Data

Back to Top

Save the export archive locally with File name: FigmaExport. Take note of the location of the archive since it will be imported to MGS Composer in the next section.

Set export package filename

The archive is now ready to be imported into MGS Composer. Proceed to the next topic to learn about the import process.

Back to Top