MGS Composer - Exporter

About this plugin

Export your Figma Design into a Microchip Graphics Composer Project

Streamline your design workflow with the MGS Composer Exporter. This plugin bridges the gap between Figma's design environment and MGS Composer, enabling you to create stunning user interfaces in Figma and transfer them to Composer for further development.

Features

Automatic Asset Generation: Composer generates assets automatically from the exported data, saving time and effort.

Preserved Design Hierarchy: Composer mirrors Figma's design tree as closely as possible, ensuring an accurate translation of your design.

Component Support: Assets generated from Figma Components are treated as a shared resource, saving memory on your target device.

Detailed Guide

How to Use:

1. Install the Plugin: Add it to your Figma workspace.
2. Run the Plugin: An export window will appear on the right side of Figma's interface.
3. Select Page: Navigate to the page you want to export from and click Select Page.
4. Mark Objects for Export: The export window will list top-level objects. These will be translated to Screens in Composer. Select objects by clicking on them or their children in the Figma design, which will automatically mark them in the export window.
5. Set Export Options: After selecting objects, choose from two options:
6. Flatten Group Components during export: Flattens groups into a single image in the exported data.
7. Export all primitives as .svg assets: Exports vectors like rectangles, lines, and text as SVG assets.
8. Generate Data: Click the Generate Data button. The export window will show a view of all exported objects and a corresponding JSON file. You can add custom properties to the objects here in the upper view.
9. Export File: Click the Export button at the bottom of the window and select a location to save the file.
10. Open MGS Composer: Launch Composer and create a new design or open an existing one with a screen size adequate for your Figma content.
11. Import Project: In Composer, go to "File > Import" and select Figma Composer Project. Confirm the prompt that appears.
12. Done: Composer will import the file and add new screens, assets, and widgets to your design.

Support & Feedback:

MGS User Guide

MGS Forum