Figma

Figma is a connector: it links a MeDo app to one Figma account, so the app can read the design files that account can open. MeDo reads the page and frame tree, components and component sets, styles, design tokens, rendered node images, image fills, and prototype interactions, and uses them as the context for building the app. The connection is read-only: the app never creates, edits, or deletes anything in your Figma files.

#What you can build

• A design-to-app build. Point MeDo at a design file and let it build pages that follow the file's layout, colors, typography, and spacing.
• A design system gallery. List every component, component set, and style in a file or a team library, with previews.
• A Tailwind or CSS setup. Extract the file's design tokens — colors, typography, spacing, shadows, and radii — and turn them into a Tailwind config the app uses.
• A prototype walkthrough. Read the file's prototype flows and component variant states, then rebuild the click-through as working pages.

Figma fits when the design already exists in a file and the app should follow it. It is not a design editor and does not replace reviewing the result, see Limits.

#Build examples

Copy one of these into the prompt box. The first one is the smallest useful starting point.

Use @Figma to turn my design file into a responsive landing page that matches its layout, colors, and fonts.

Use @Figma to build a component gallery page that lists every component and style in my design system file.

Use @Figma to generate a Tailwind config from my file's design tokens and use it in the app it builds.

Use @Figma to recreate the click-through prototype of my checkout flow as a working multi-page app.

#Prepare and connect

You need a Figma account that can already open the files, projects, and team libraries the app should read. Nothing else is required: there is no API token to create and no Figma app to register. MeDo uses its own Figma integration and your account's permission is what decides which files the app can see.

1. Open Skills & Connectors in the sidebar and search for Figma.
2. Open the card and click Connect.
3. Sign in to Figma and click Allow access on the consent screen.
4. The button changes to Connected.

If you start building before connecting, MeDo shows a Figma connection button under its reply, and the same card is available in the editor's left sidebar under Skill. Either entry point works.

#Use it in your app

• The app uses the account you connected, not each visitor's own Figma login. Everyone who opens a page sees the same design data. Keep design views behind your app's own sign-in and limited to the intended people.
• Read-only, on purpose. The app can inspect a file, a project, or a team library, and it cannot change, move, or delete anything in Figma. Design changes stay a manual step in Figma.
• Files are addressed by link or key. A file has a key, and a node inside it has a node ID such as 1:5. The app resolves a Figma link into those addresses, then reads the node or its subtree.
• Design tokens are a translation step. Colors, typography, spacing, shadows, and radii are extracted as tokens, and the app turns them into a Tailwind config and CSS variables. Ask for the token output first when you want to review it.
• Rendered images are temporary links. A rendered frame or node comes back as a time-limited URL, not as a file stored in your app. If a page shows many previews, ask the app to cache the rendered images in its own storage and re-render only when the file version changes.
• Prototype interactions describe flows, not behavior. The app reads the connections, animations, and component variant states defined in the file. A file with no prototype links returns nothing, which is normal for a file used only for layout and styles.
• Figma plan and seat decide the call budget. Figma limits how often its API can be read, and the limit depends on your plan and seat type. Ask the app to cache design data keyed by file and node so repeated page loads do not re-read the same file.

#Limits and troubleshooting

"Connection required" appears in the app. Ask the app owner to open the connector card and click Connect, then reload. The connection button under MeDo's reply and the Skill tab in the editor's left sidebar both lead to the same place.

A file, node, or team is not found. The connected account may not have access to it, or the link points at a file in a team the account is not a member of. Open the file in Figma with that account to confirm, then retry.

The app reports a rate limit. Figma limits API reads by plan and seat, and a free plan allows very few reads per file each month. Wait for the limit to reset, reduce how often the app reads the same file, and ask the app to cache design data instead of re-reading it.

An image preview stops loading. Rendered image links expire after a while. Re-render the node, or ask the app to keep its own copy of images it shows often.

Prototype flows come back empty. The file has no prototype connections defined. Component variant states are still returned; only the flow links are missing.

#Related

• Connector catalog — the other connectors and what they are for.
• Skills & Connectors — how Skills are called, priced, and limited.
• Managing access & roles — restrict who can read connected data.