PLUGIN
figma
Plugin that includes the Figma MCP server and Skills for common workflows
LABSCO SUMMARY
Summary
Every skill here needs the same live connection: Figma's own remote MCP server, which is rate-limited for anyone below a paid Dev or Full seat.
They split into a hard core and everything built on it. figma-use is the base skill for calling the use_figma tool at all, and its own description is a blocking instruction, not a suggestion: figma-create-new-file and figma-generate-diagram carry the identical warning for their own matching tools, create_new_file and generate_diagram — never call the tool directly without loading the skill first, because skipping it causes hard-to-debug failures. Three more (figma-use-figjam, figma-use-motion, figma-use-slides) are context-specific extensions of figma-use for FigJam, animation, and Slides. Four workflow skills — figma-generate-design, figma-generate-library, figma-implement-motion, and figma-swiftui — sit on top of that base to turn a Figma file into code, code into a Figma file, or a design system into tokens and components, and the last, generate-project-plan, is a self-contained FigJam board generator driven by a PRD.
This is for a team already paying for Figma seats that wants an agent reading and writing real Figma files — pulling design context and variables into code, pushing code or motion back into Figma, keeping Code Connect mappings current — rather than anyone evaluating Figma or MCP servers casually. Nothing here works against a design you only have a screenshot or export of.
READ THE FULL ANALYSIS
What it costs to actually run this. Figma's own rate limits gate every one of these skills, not just the write-heavy ones: Starter-plan users and anyone with a View or Collab seat are capped at 6 tool calls a month, and only a Dev or Full seat on a paid plan gets the per-minute limits that match Figma's Tier 1 REST API. Writing to the canvas is free during the current beta, but the README says that will become a usage-based paid feature once it ships.
The mandatory-prerequisite pattern is unusual. Most skill packages are reference material an agent can take or leave; three of these are written as gates that block a specific tool call until the matching skill has loaded first. That is a real difference in how this package behaves, not a stylistic quirk, and it is worth knowing before assuming any of these skills is optional.
ALSO IN THIS PACKAGE
PLUGINS1 item
MCP SERVERS1 item
MCP SERVER
figma http
The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.
WHAT'S INSIDE
Skills
GROUPS 4
15 of 15
SETUP
Showing all 15 skills
generate-project-plan
Takes the write-up of what a team plans to build and turns it into a planning board in FigJam, section by section, with someone confirming each one before it is drawn.
Editing a file by instruction
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
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.
Turning a design into code
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
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.
No skill in this package matches that.
HOW TO GET IT
Install
SINGLE SKILL
Install a skill by name
npx skills add figma/mcp-server-guide --skill <name> --full-depthPick the skill name from the Skills tab. Click it before you copy: some skills here need files or other skills from this package, and the panel shows the install that brings them.