Figma MCP and the most useful Figma resources for designers 🌟
Level up your design (system) game
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / Podcast / My Linkedin
Starting this newsletter with an amazing news that Figma released the Figma MCP
I had to try it out immediately, and the setup is not hard.
You need Figma and then either Cursor, Claude Code, VS Code, Windsurf.
1. Open Figma and create a frame with your design. Yes, it can be anything. It is best to use proper styles, variables, auto-layout, and named layers.
2. Go to File preferences and click Enable Dev Mode MCP Server. If you don’t see this open, update Figma.
3. Go to Cursor. Open Settings, click on MCP Tools and add Figma.
You will need to copy this code:
Go to Figma’s documentation site and copy it from there.
Now you need to save the settings and close it.
4. Return to Figma, copy the link to your specific frame, and write a prompt. Some examples:
Generate React components from the selected Figma components, ensuring they match the design tokens for spacing, colors, and typography defined in our design system.
Compare the design tokens used in this Figma component with those defined in our codebase tokens file. Flag any inconsistencies and suggest corrections.
Generate styled-components React code for this Figma component using CSS-in-JS with proper theme integration. Include responsive breakpoints and hover/focus states as defined in the design.
Convert this Figma component to React with Tailwind CSS classes. Ensure the design tokens map correctly to Tailwind's design system and include dark mode variants if present.
You can either select a frame or share the link in the Cursor chat.
When you copy the link, you can also choose which model you want to use (under Agent).
I wanted to create this component 👇
If you want to see the end result, here is the video →
Cursor copied my design and then I added more prompts for additional interactive states. Pretty impressive for 30 minutes. 🙌
If you want to read more, here is the 🔗 Official release 🎉
Here are my favourite Figma plugins and resources (2025 edition).
🧪 Plugins
🔗 Atmos
Atmos has everything you need to create color palettes for UI. Quickly and easily create beautiful, uniform, accessible palettes, save hours, and save hours juggling with a dozen other tools.
🔗 Quantum
Quantum keeps your Design System always in sync, auto-documented, and aligned, so you move faster with less.
When a style guide is missing, sifting through every design element can be time-consuming and challenging. This plugin not only aims to save significant time but also to pinpoint graphic design inconsistencies, ensuring a seamless and efficient transition from design to development.
Document your design system variables with clarity and precision. This plugin creates comprehensive, customizable documentation for Figma variables, making your design tokens accessible and shareable.
Here you can easily find the relevant information you need, including the official website of the design system and its component library files in Figma.
Easily reorganize giant design systems. Copy styles from one file to another or combine multiple style files into a single one. This keeps your design system styles consistent over time.
🔗 Gist
Attach documentation to your components. Write and publish beautiful docs using a Markdown editor. Link components to external documentation. View attached documentation without leaving your working file.
Find all Instances of a Component used in your file.
🔗 Master
Create, attach, clone, and move components in a couple of clicks without losing overrides!
🔗 Propstar
Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labeled table.
Annotate it! makes it easy to annotate your wireframes and/or designs the smart way. Simply select a frame and click Add New to create annotations automagically.
Design Lint is a plugin that finds missing styles within your designs. It's perfect for fixing errors in your Design System or designs before handoff.
Just connect your Font Awesome account, and you’re off to the races.
Accessibility
Use the WCAG 2.2 Deck to run workshops, accessibility audits, training, or whatever you can use it for.
This plugin enhances the accessibility of digital designs by integrating accessibility guidelines directly into your design processes and systems. The WCAG Plugin offers three key features:
🔗 Contrast
🔗 Stark
With tools like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more all in one place, you can find accessibility issues in a design before it goes into production—or quickly analyze and fix what’s already in flight. Get started for free today!
🔗 Include – Accessibility Annotations by ebay
Include is a tool built to make annotating for accessibility (a11y) easier—easier for designers to spec and easier for developers to understand what is required.
Tokens, Variables, Styles Management
Transform how you work with Figma variables. VV turns complex variable relationships into an intuitive visual map, letting you see and manage all your variables in one infinite canvas.
🔗 Styles & Variables Organizer
Both Variables and Styles are supported now! Link values used in your design file to all types of styles and variables easily!
Gives you the ability to use Design Tokens that can be used for a whole range of design options, from border radii or spacer units to semantic color and typography styles that are able to reference other tokens. It allows you to change tokens and see these changes applied to the whole document, its styles or just a selection.
Export Figma styles and custom tokens to a style dictionary ready json or sync to github.
Export or import styles or variables (Figma → JSON or JSON → Figma).
💎 Figma templates
🔗 Library of my free Figma templates
🔗 Scales by Phillip Jeroma
Scales provides a clear plan and a ready-to-use starter kit. Go from confusion to a consistent, scalable system with confidence
🔗 Token Naming Template - V1 by Samantha Gordashko
Next week I will share more about RAG. 🙌
Enjoy the weekend.
💎 Community Gems
Variable Calculator
Use Variable Calculator to apply math formulas, recalculating your variables. Apply to en entire collection, specific group, or specific mode. Great for scaling numbers for responsive behavior.
🔗 Link
Mo AI, Mo Problems — Jevons Paradox In The Age Of AI Design Systems
by Youssef Taghlabi
🔗 Link
Just tried it myself as well following your tutorial...so cool! I wonder which workflow will win between Figma Make and MCPs linked from other tools like Cursor.