What Is the Figma to Embedded GUI Workflow?

The Figma to embedded GUI workflow is the process of importing Figma artboard designs into Flint UI Designer, automatically mapping Figma layers to Sparklet widget types, extracting and compressing image and font assets for embedded Flash storage, and exporting production-ready C code for the target MCU or MPU — without any developer manually recreating the design in a separate tool.

Most embedded product teams use two separate design environments today: a product designer works in Figma to create the visual specification, and a firmware developer then manually rebuilds that design inside their embedded GUI tool — creating two diverging representations that must be kept in sync by hand throughout the project.

Flint's Figma import collapses these two representations into one. The Figma design becomes the starting point for the Flint project directly, not a static reference document that developers interpret. This page explains the four-step import workflow, automatic layer-to-widget mapping, the asset pipeline, and the honest limitations of what is and is not carried across during import. See also: code generation, state machine editor.

The Four-Step Figma Import Workflow

From Figma artboard to compiled, running embedded UI — in four steps, not four weeks.

Step 1 — Export from Figma

From Figma, the designer exports the target artboards as a structured JSON file plus a directory of image assets. The JSON contains the complete layer tree: names, types, positions, sizes, colours, corner radii, opacity values, and text content. The image assets directory contains PNG exports of every image layer referenced in the design. This export uses Figma's standard export API — no custom Figma plugin is required for standard artboard structures.

Step 2 — Import into Flint

Flint's import wizard accepts the JSON export and image assets directory. It parses the layer tree and automatically maps each Figma layer to the closest Sparklet widget type based on the layer's type and structural role. Widget positions and sizes from Figma are preserved at pixel accuracy, relative to the target display resolution specified in the Flint project. Text content, font references, and colour values are transferred directly.

Step 3 — Asset Extraction and Compression

Images identified during import are automatically passed through Flint's asset compression pipeline. PNG files are converted to the display's native colour depth (16-bit, 24-bit, or 32-bit ARGB), compressed, and prepared as C const arrays for Flash storage. Fonts are identified by name from the Figma JSON; the developer provides the corresponding TTF file, which Flint uses to generate the pre-rendered glyph table — only the glyphs used in the design are included.

Step 4 — Refinement in Flint

The imported project is a starting point, not a finished embedded UI. After import, the developer reviews the auto-mapped widgets, corrects any mappings that need adjustment, and adds the elements that Figma prototypes do not contain: state machine logic (screen transitions, event handling), data bindings (live widget values from application variables), animations, and interactive state visuals. Once refinement is complete, the project is exported to C code via standard single-click export.

Three Aspects of the Figma Import Pipeline

Asset handling, widget mapping rules, and honest limitations — everything you need to plan a clean import.

Automatic Asset Compression for Embedded Flash

Every image asset referenced in the Figma design is extracted and processed automatically during import. Flint's asset pipeline converts each PNG to the target display's native colour depth, applies configurable compression, and generates C const array declarations ready for linking into the embedded firmware image.

PNG → 16-bit, 24-bit, or 32-bit ARGB conversion
RLE and LZ-based compression to minimise Flash footprint
Auto-deduplication: identical assets shared across screens are stored once
Font glyph extraction: only the characters present in the design are included
Asset manifest generated for incremental re-export on design updates

For projects with large image assets, Flint's asset manager shows the compressed size of each asset alongside its original size — helping developers stay within Flash budget before writing a line of application code.

Figma Layers Auto-Mapped to Sparklet Widgets

Flint's import engine uses the following mapping rules when processing a Figma layer tree. Accuracy improves when Figma files follow a consistent layer naming convention.

Rectangle / Frame (no children) → FixedView — solid colour or image fill
Frame (with children) → Holder or Window — becomes parent container
Text layer → Static — font, size, colour transferred
Image / Icon layer → ImageHolder — asset extracted and compressed
Button group (frame + text + interaction naming) → Button
Scrollable frame → ScrollView — scroll axis detected from constraints
Component instance → mapped per component type and naming

Layers named with common widget identifiers (e.g., btn_, lbl_, img_) are mapped with higher confidence. The import wizard flags any layers it could not map automatically for manual review before the project is created.

What Transfers, What Requires Manual Work

Understanding what the import does and does not handle prevents surprises during the import step and avoids over-investment in Figma features that will not transfer.

Does NOT transfer automatically:

Figma Auto Layout — imported as fixed-position containers at exported size; requires manual position adjustment for different resolutions
Advanced effects — complex drop shadows, blur filters, gradient overlays flagged for manual recreation
Interactive prototype connections — replaced by Flint's state machine editor after import
Figma variables and design tokens — not automatically mapped to Sparklet data bindings; configured manually in Flint

Best practices for clean imports:

Use consistent layer naming (btn_, lbl_, img_, scroll_)
Flatten complex effect layers before export
Export at the exact target display resolution
Group related widgets inside named frames for accurate container mapping

Figma Layer Type	Sparklet Widget	Properties Transferred	Notes
Rectangle / Frame (no children)	FixedView	Position, size, fill colour	Solid colour or image fill
Frame (with children)	Holder / Window	Position, size, child layout	Becomes parent container
Text layer	Static	Text, font name, size, colour, alignment	Font TTF required separately
Image / Icon layer	ImageHolder	Image asset (compressed)	PNG extracted and compressed
Button group (named btn_)	Button	Position, size, label text, fill	Requires naming convention
Scrollable frame	ScrollView	Scroll axis, content size	Axis detected from constraints
Component instance	Per component type	Varies by component	Consistent naming improves accuracy

What Figma Import Delivers

Four capabilities that close the gap between product design and embedded firmware development.

Direct Artboard Import

Import Figma JSON exports and image assets directly into Flint. No third-party plugin required for standard artboard structures. One import step replaces weeks of manual recreation.

Auto Layer-to-Widget Mapping

Flint automatically maps Figma layers to Sparklet widget types — rectangles, text, images, and button groups — preserving pixel-accurate positions and sizes from the Figma artboard.

Flash-Ready Asset Compression

Imported PNG images are automatically converted to the target colour depth, compressed, and generated as C const arrays — sized for embedded Flash, not web delivery.

Single Source of Truth

The Figma file becomes the direct source for the embedded UI project, eliminating the diverging-representations problem that creates integration bugs during development.

FAQs: Figma to Embedded GUI

Does Flint import Figma files directly?

Flint imports the standard Figma JSON export (artboard structure) plus the accompanying image assets directory. This export is produced from Figma using its built-in export function — no custom Figma plugin is required for standard frame and layer structures. The developer exports from Figma and opens the resulting files in Flint's import wizard.

How accurate is the Figma to embedded GUI conversion?

What Figma layer types become which Sparklet widgets?

What happens to Figma interactive prototypes during import?

Do I need to provide fonts separately for Figma import?

Can I re-import an updated Figma design without losing my Flint state machine work?

Import Figma Designs into Your Embedded GUI Workflow