Figma Plugin
Convert Figma frames into native Setgreet flows without leaving your design file.
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
The plugin is currently in review with Figma. Until it is approved on the Figma Community, install the development build by following the contributor guide. This page will switch to the Community install link once Figma approves the listing.
Once the plugin is live on the Figma Community:
- Open the Setgreet plugin on the Figma Community.
- Click Open in... and pick the Figma file you want to import from.
- In Figma, find the plugin under Plugins > Setgreet (or right-click the canvas > Plugins > Setgreet).
Authorize the plugin
The plugin signs in with the same email and password you use for the Setgreet dashboard.
- Open Plugins > Setgreet in Figma.
- Enter your Setgreet account email and password.
- 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.
If you do not see your organization in the dropdown, ask your workspace admin to invite your account or check that you are signed into the right Setgreet identity.
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 falls back to flatter heuristics 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 using spatial inference, which produces less accurate results.
Name layers meaningfully
Layer names drive the component detector. A layer called Get Started reads better than Frame 42. For exact control, use a type prefix in the layer name:
| Prefix | Maps to |
|---|---|
[text] | Text |
[button] | Button |
[image] | Image |
[container] | Container |
[card] | Card |
[divider] | Divider |
[spacer] | Spacer |
[textInput] | Text Input |
[rating] | Rating |
[nps] | NPS |
[radioGroup] | Radio Group |
[checkbox] | Checkbox |
[carousel] | Carousel |
[video] | Video |
[lottie] | Lottie |
[progress] | Progress |
Prefixed layers are mapped with full confidence. Unprefixed layers go through the heuristic detector — text nodes always become Text, frames with text and rounded corners become Buttons, frames with image fills become Images, and so on.
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.
What gets imported
- Components — Text, Button, Image, Container, Card, Divider, Spacer, and any other Setgreet type enabled for your organization.
- Styles — Font family (mapped to the closest Google Font), size, weight, color, alignment, line height, fills (solid, gradient, and image), strokes, corner radii (per-corner), shadows, and opacity.
- Screen background — The top-level frame's fill becomes the screen background.
- Flow shape — A new flow in draft status with the screens connected linearly: Start → Screen 1 → … → End.
Every detected component shows a confidence indicator in the plugin's mapping panel. Override a component's type from the dropdown before importing if the heuristic guessed wrong.
The full component-by-component conversion table, including the heuristics that decide between Button, Card, and Container, lives in the plugin's user guide.
Limitations and roadmap
The plugin creates a faithful structural import. The dynamic parts of a flow — triggers, navigation, branching, A/B tests — are added in the Setgreet editor after import.
Not yet supported:
- Triggers and conditions — every imported flow ships with no trigger rules. Add them in the editor.
- 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 an already-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.
We are tracking these as the next set of plugin investments. If you hit a missing case, let us know which one matters most so we can prioritize.
Troubleshooting
| Symptom | Fix |
|---|---|
| Plugin will not open | Restart Figma desktop. If you are running a development build, re-run npm run build and re-import the manifest. |
| Sign-in fails | Confirm the same email and password work at app.setgreet.com. Reset your password from the dashboard. |
| "No frames selected" message | Select top-level frames on the canvas, not groups, layers inside frames, or pages. |
| Everything imports as Image | The frames likely do not use Auto Layout. Add Auto Layout to each frame or use [type] layer-name prefixes. |
| Some component types are missing | Your workspace may have feature toggles disabling those types. Ask a workspace admin to enable them. |
| Images do not upload | Check your network. The plugin uploads images directly to Setgreet's storage via short-lived signed URLs. |
| Flow does not appear in the dashboard | Confirm you selected the right organization and app. The flow lands in Draft status — filter the flow list accordingly. |
| Fonts look off after import | Fonts that are not in Setgreet's Google Fonts mapping fall back to Inter. Pick a supported font in the editor if needed. |
| Effects (blur, inner shadow) do not show | Not every Figma effect is mapped yet. Replicate the look from the Setgreet editor. |
For a deeper walkthrough of the conversion pipeline, the layer-name prefix grammar, and the full font mapping table, see the plugin's user guide on GitHub.