Figma Plugin

Alpha

Native Figma plugin for extracting design systems, inspecting tokens, and pushing to Layout Cloud. All without leaving Figma.

Download Figma Plugin (Alpha)

v0.2.6 · 146 KB · Requires Figma desktop app

Key Differences from Web Extraction

Feature	Plugin	Web Studio
API Access	Direct Figma Plugin API	REST API (needs access token)
Local Styles	Reads local (unpublished) styles	Published styles only
Variables	All plans (uses Plugin API)	Enterprise plans only via REST API
Selection Context	Knows what designer is looking at	No selection awareness
Speed	Instant extraction	~30 seconds

Plugin Panels

Export

One-click AI Kit export. Extracts all design tokens (colours, typography, spacing, effects, border radius) and components from the current file. Download as ZIP or push directly to Layout Cloud.

Inspector

Select any element in Figma to see which design tokens it maps to. Highlights values that don't match any token (potential drift). Copy token names and values with one click.

Health

Run a layout.md completeness check from within Figma. See scores per category with actionable suggestions for improving coverage.

Canvas

Capture a component or frame as a screenshot with token context. Push it to Layout's Explorer where AI rebuilds it using your design system tokens and generates multiple variants. Requires at least one existing project in Layout Studio. Create a project first if you have not already.

Variables

Push and pull tokens between Layout and Figma Variables. Import tokens from Layout into Figma's native Variables system, or export Figma Variables back to Layout.

Settings

Configure your Layout API key and server URL. Supports self-hosted Layout instances. API key is stored securely in Figma's client storage.

Installation

The plugin is currently in alpha and installed as a development plugin in Figma. It will be published to the Figma Community once it passes review.

Download the plugin ZIP and unzip it
Open the Figma desktop app and click Plugins > Development > Import plugin from manifest
Navigate to the unzipped folder and select manifest.json
The plugin now appears in your Figma plugins list as Layout
Open any Figma file and run the plugin from Plugins > Development > Layout

This is an alpha release. The plugin will be published to the Figma Community soon, at which point installation will be a single click. No manifest import will be needed.

Getting Your API Key

The plugin connects to your Layout account using an API key. To generate one:

Go to layout.design, click your organisation name in the top left, and go to Settings > API Keys
Click Generate New Key
Give it a name, for example "Figma Plugin"
Copy the key immediately. It is only shown once. Store it somewhere safe (a password manager is ideal).
In the plugin: open the Settings tab, paste the key into the API Key field, and click Verify

The plugin stores your API key in Figma's client storage. It never leaves your machine and is not sent to any third party.

Syncing Figma Variables

The Variables tab lets you push Figma Variables to Layout and pull Layout tokens back into Figma. Here's the full walkthrough:

Get your API key if you haven't already (see above). Make sure both read and write scopes are ticked.
Create a project in Layout to push variables into. If you already created one via the Export tab, use that. Otherwise, go to your dashboard at layout.design, click "New Project", paste your Figma file URL and run the extraction.
Connect the plugin by going to the Settings tab, pasting your API key, and clicking Save & Verify. You should see a green "Connected to [your org name]" message.
Select your project using the dropdown at the top of the plugin.
Push your Variables by going to the Variables tab, clicking "To Layout" (the right-hand toggle), then "Push Figma Variables to Layout". You should see a result like "5 created, 0 updated, 0 unchanged".

The plugin can only read variables that are local to the file it's running in. If your brand colours are defined in a separate Figma library file and linked into your working files, you need to open that library file and run the plugin there. Linked variables in a consuming file won't be visible to the plugin.

Why are Export and Variables separate?

When you create a project using the Export tab, it pushes Styles (paint styles, text styles, effects) but not Variables. Variables sync is a separate step in the Variables tab. We're merging these into one step soon so everything comes through together.

Troubleshooting

Settings tab shows "Not connected"

Double-check that the API key was copied correctly. It is only shown once at generation time. If unsure, generate a new key in Layout → Settings → API Keys and try again.

Extraction returns no tokens

Ensure the Figma file has local styles set up (Paint, Text, or Effect styles visible in the Assets panel). Styles imported from team libraries may not be accessible to the plugin.

Variables sync fails or shows an error

The plugin uses the Figma Plugin API, which supports Variables on all plans. If sync fails, check that your file has Variables defined (open the Local Variables panel in Figma to verify). Styles from shared team libraries may not be accessible.

Canvas push returns an error

Ensure you have at least one project in Layout Studio. Create a project at layout.design first, then return to Figma and try again. Also verify your API key is valid.

Tips

The plugin extracts local styles that aren't available via the REST API
Use the Inspector to spot drift before it reaches production
Push to Canvas lets designers trigger AI variant generation without leaving Figma
The plugin stores your API key in Figma's client storage. It never leaves your machine

The plugin reads local styles and Variables on all Figma plans using the Plugin API, a significant advantage over the REST API approach used by Web Studio (which requires an Enterprise plan for Variables).