Figma Plugin

The Setgreet Figma plugin turns your Figma frames into a draft Setgreet flow. Select the screens you want to ship, send them to Setgreet, and pick up in the flow editor with components, styles, and image assets already wired up.

What it does

• Frames become screens. Each top-level frame you select becomes one screen in a new flow.
• Layers become components. Text, buttons, images, containers, cards, dividers, and the rest of Setgreet's component catalog are detected from your layer tree.
• Auto Layout becomes Flexbox. Auto Layout direction, gap, padding, sizing, and alignment map directly to Setgreet's layout system.
• Image fills get uploaded. Image and complex vector fills are exported as PNGs and uploaded to Setgreet's storage.
• Output is a draft. The created flow lands in your dashboard as a draft so nothing goes live until you publish.

Install the plugin

1. Open the Setgreet plugin on the Figma Community.
2. Click Open in... and pick the Figma file you want to import from.
3. In Figma, find the plugin under Plugins > Setgreet (or right-click the canvas > Plugins > Setgreet).

Sign in

The plugin signs in with the same email and password you use for the Setgreet dashboard.

1. Open Plugins > Setgreet in Figma.
2. Enter your Setgreet account email and password.
3. Select the organization and app to import into.

Your session persists between plugin reopens until you sign out. There is no separate API key to generate.

Prepare your Figma file

The plugin works best when your design follows the conventions below. Frames that fall outside these conventions still import, but the plugin uses a flatter fallback or exports the layer as an image.

Use Auto Layout

Apply Auto Layout to every frame you plan to import, including nested containers. Auto Layout direction, gap, padding, and alignment map one-to-one to Setgreet's Flexbox system. Frames without Auto Layout are converted by positional analysis, which is less accurate.

Name layers meaningfully

Layer names drive component detection. A layer called Get Started reads better than Frame 42. For exact control, prefix the layer name with a type in square brackets:

Prefixed layers are mapped with full confidence. Unprefixed layers go through automatic detection: text nodes always become Text, frames with text and rounded corners become Buttons, frames with image fills become Images, and so on.

The prefixes above cover the components designers reach for most often. Setgreet has more component types (date pickers, testimonials, badges, accordions, and a few others) — if you need one of those, name the layer descriptively and override its type from the mapping panel before importing.

Design at mobile dimensions

Setgreet flows render on phone screens. Stick to a mobile frame size such as 390×844 (iPhone) or 360×800 (Android) so the imported layout maps cleanly to the device.

Keep selections clean

• Select top-level frames only. Nested frames inside a selected frame become components on the same screen, not separate screens.
• Multi-frame selections create a linear flow in the order you selected them. Reorder screens inside the plugin before importing.

The import flow

1. Select frames in Figma — one for a single-screen flow, several for a multi-screen flow.

2. Open the plugin at Plugins > Setgreet.

3. Pick the organization and app the flow belongs to.

4. Review the frame list. The plugin shows a thumbnail for each frame with its dimensions. Reorder with the arrow buttons.

5. Click Convert. The plugin analyzes the layer tree and shows a mapping panel.

6. Review the component mapping. Each detected component shows a confidence indicator:

   • Green — high confidence, the layer name prefix or instance match was unambiguous.
   • Yellow — medium confidence, detection used visual structure cues.
   • Red — low confidence, the layer fell back to an image export.

   Override any detection from the dropdown beside the component.

7. Click Import. The plugin converts the design, exports any images, uploads them to Setgreet's storage, and creates the flow.

8. Open the flow in Setgreet. It lands in your dashboard as a draft, ready to edit and publish.

What gets converted

Components

The list of component types available in the mapping dropdown is loaded from your organization when you sign in. If a type is disabled for your workspace it will not appear, and tagging a layer with that type will fail at import. Ask your workspace admin if a component you need is missing.

Styles

Screen background

The top-level frame's fill becomes the screen background. Solid fills become a background color, gradient fills become a gradient, and image fills are exported and uploaded.

Flow shape

A successful import creates a new flow in draft status with the screens connected linearly: Start → Screen 1 → … → End. Triggers, conditions, and branching are added in the Setgreet editor — see Limitations below.

Fonts

Flows currently render in Inter across the editor and the iOS / Android SDKs. Whatever font you use in Figma is replaced with Inter on import — pick fonts in your design for layout and hierarchy, not for final look. Additional font families are on the roadmap.

Tips for best results

1. Use Auto Layout everywhere. This is the single most impactful thing you can do for conversion accuracy.
2. Use [type] prefixes on layers you want mapped precisely — they import with full confidence.
3. Keep designs simple. Overlapping elements, masks, and boolean operations are flattened to images. Simple, well-structured frames convert best.
4. Design at mobile dimensions — 390×844 (iPhone) or 360×800 (Android).
5. Prefer solid fills for backgrounds. Solid and gradient fills convert perfectly. Image backgrounds work but require an upload step.
6. Review the mapping panel before clicking Import. The detector is good, not perfect — overriding a few components takes seconds.
7. Use the editor to finish the flow. Triggers, button actions, branching, and final polish all happen in Setgreet, not in Figma.

Limitations and roadmap

The plugin creates a faithful structural import. The dynamic parts of a flow are added in the Setgreet editor after import.

Not yet supported:

• Triggers and conditions — every imported flow ships with no trigger rules.
• Button actions — buttons import without navigation. Wire up next-screen, dismiss, or URL actions in the editor.
• Branching flows — multi-frame selections produce a single linear path. Add conditional branches in the editor.
• Updating existing flows — each import creates a new flow. Adding screens to a published flow from Figma is not supported.
• Mixed text styles — a single text layer with mixed fonts, sizes, or colors imports with only its dominant style.
• Complex vector shapes — boolean operations, masks, and intricate vectors fall back to PNG export rather than being decomposed into components.
• Custom fonts — all text renders in Inter today. See Fonts above.

If you hit a missing case, let us know which one matters most so we can prioritize.

Troubleshooting