PLUGIN / FIGMAOFFICIAL

Figma Plugin

Figma's own package for working on real design files: an assistant can read a frame and build the code for it, or draw the design itself — and how much reading it may do depends on your Figma plan.

Skills

Turning a design into code 4

For someone handed a finished screen who now has to build it. The main entry takes a frame to working code, and Figma requires it before anything is read from the design. Another keeps a standing link between a component in the design and the one that already exists in the project, so the generated version reuses what is there instead of guessing at it. The last two cover what a flat export loses: the motion a designer added, and iOS work in Swift, which also runs the other way.

figma-code-connect

Ties a component in a Figma design to the real one in your code, so the design file hands a developer your actual code for it instead of a generic guess.

figma-design-to-code

Turns a Figma design into working code in your own project, built from the components and images the project already has, and checked against a picture of the design until the two match.

figma-implement-motion

Takes an animation someone designed in Figma and writes it out as working code in your app, moving on the same timing as the original.

figma-swiftui

Moves a screen between Figma and SwiftUI — Apple's way of building iPhone and iPad screens — in either direction, with colours, icons and layout landing as their native equivalents.

Turning code into Figma 2

For the team whose product has moved on and whose design file has not. One takes a screen out of the live product and rebuilds it in Figma, assembled from the library already in the file rather than drawn fresh. The other builds that library itself — colours, spacing and type, then each component with its states.

figma-generate-design

Rebuilds a page from your app as a Figma screen — put together from the components and colours already in your design library rather than drawn from scratch.

figma-generate-library

The Figma half of a design system, built to match the code you already have — the colours, spacing and type first, then each component with its states.

Editing a file by instruction 5

The groundwork for changing a Figma file by script instead of by hand: creating and editing what sits on the canvas, reading what is there already, opening a blank file to work in, and moving a layer over time. This is also the place where the mistakes that quietly break these scripts are written down, which is why Figma insists it be loaded first. Two more build things Figma can reuse later: shaders, and generative plugins.

figma-create-new-file

A brand-new, empty Figma file created in your own drafts — the first step when there is nothing yet to open, and it asks which team it belongs to if you are in several.

figma-generative-plugins

Describe a job you keep doing by hand in Figma and get a small plugin for it: a panel with its own buttons and settings that runs inside the Figma design editor, plus a link to try it straight away.

figma-shaders

Custom visual effects for Figma layers, such as glow, blur, distortion or halftone, or generated fills like gradients, patterns and noise, written as code and saved to your account for you to try on a design.

figma-use

The ground rules for changing a Figma file by script rather than by hand — how to create and edit things on the canvas, read what is already there, and steer clear of the mistakes that quietly break these scripts.

figma-use-motion

Animates things inside a Figma file itself — a layer that moves, grows or changes colour over time, with control over how long the whole sequence runs.

FigJam boards and slide decks 3

Figma is not only a design canvas, and this is the rest of it. A whiteboard that fills itself in. A system or a process drawn as a flowchart, a sequence or a state machine. A slide deck whose look is settled once, then carried across every slide.

figma-generate-diagram

Draws a real system or process as a diagram on a Figma whiteboard — a flowchart, a sequence of calls between services, a state machine, a database model, or a project schedule.

figma-use-figjam

A FigJam whiteboard that fills itself in — an assistant writes the board's contents and lays them out, so a person opens it already built.

figma-use-slides

Figma users expect a deck to look designed rather than churned out, so this builds one that way: a look chosen up front, then carried across every slide.

Reads your design files, and can draw in them.

figma

CONNECTS TO Figma MCP server — the files your own Figma account can open

Signing in is what switches these skills on. Until it happens they are instructions for a tool that is not there.

It is also the decision with consequences: this connection can change a file, not only read one.

What it reads.

the frame or layer whose link is pasted in

the components, variables and styles that frame uses

a picture of the selection, to compare against

the animation set on a layer

a map of a large selection, when the whole thing is too big to return at once

What it changes.

creates and edits frames, components, variables and auto layout inside a file

opens a new blank Figma, FigJam or Slides file

draws diagrams and whole boards in FigJam

sets and edits the animation on a layer

It reaches the files the signed-in account already reaches, and nothing outside Figma.

It works from a link to a frame in a real Figma file. The client cannot open that link itself; it takes the frame's id out of it and asks Figma for that one object.

Its tools, and the sign-in it asks for, are set out on their own page: Figma MCP server

https://mcp.figma.com/mcp

Labsco Summary

Turns Figma frames into code, rebuilds app pages as Figma screens and edits whiteboards and slides, within the read limits of the Figma plan you are on. Show

It reads a design, and it draws one.

It moves work in both directions, and the design file is edited for real rather than described back to anyone:

a frame comes back as code, and with Code Connect in place it reuses components the project already has
a page of a running app is rebuilt inside Figma as a screen
an animation a designer set comes out as code that runs on the same timing

Nothing here works from a picture of a design. It needs the file.

Into code, back into Figma, and beyond.

The 14 divide by which way the work is going:

4 for turning a design into code
2 for turning code into Figma
5 for editing a file by instruction
3 for FigJam boards and slide decks

Figma is a whiteboard and a deck tool as well as a design tool, and this package covers all three.

Your Figma seat sets the ceiling.

Everything reaches Figma through the same hosted connection, so Figma's own limits are the limits:

on the Starter plan, or on a View or Collab seat, reading from Figma is capped at six tool calls a month
a Dev or Full seat on a paid plan replaces that cap with a per-minute allowance
writing into a file is exempt from the caps

Writing to the canvas is free during the beta, and Figma says it will become a paid feature charged by usage once that ends.

Some must load before their tool works.

Some of these do not add a capability; they stand in front of one. Each must be loaded before its own tool may be called at all:

any script that alters the canvas
making a new blank Figma, FigJam or Slides file
drawing a diagram on a board
reading a design so it can be built as code
making a shader effect or fill
building a generative plugin

Figma's own wording is that skipping that step causes failures which are hard to debug.

02 INSTALL

There is no marketplace to add first:
the entry this names already sits in the assistant's own built-in list.

TERMINAL

Paste one line in a terminal

claude plugin install figma@claude-plugins-official