Schema 2025: Design Systems for a New Era! And How I Achieved Pixel-Perfect (Figma-to-Code)
Hello! I decided to rework this article from Figma into Russian to share key insights from Schema 2025. I added my thoughts and a section on how to achieve pixel-perfect translation of a design from Figma to code using tools including MCP with Cursor. Here is my version of the retelling.
Introduction
Design systems help teams push the boundaries of what is possible while maintaining a high level of craftsmanship, polish, and productivity. The lines between product, design and development are blurring, and more people—including AI tools—are getting involved in the process of creating products. Design systems have long been the key to ensuring consistency between design and production at scale. They are now evolving from static standards to living systems that product teams can build on.
The updates focus on balancing power and flexibility, closing the gap between design and code, and expanding the reach and impact of design systems. Some features will be released in the coming weeks, others will be developed based on feedback.
Flexibility by design
Updates make it easier to scale design systems to new paradigms.
Expanded Collections
Variables are the standard for managing themes in Figma. Expanded collections allow design system authors to release a simple, white version that designers can extend with their own themes, publish, and reuse. Extensions are tied to the parent system, inheriting changes such as new variables or color updates, but retaining overridden values. Available in November.
Slots
Slots allow you to add layers inside component instances and specify which instances the slot accepts. This improves usability and compliance with design systems. Early access is available upon request.
Checking designs
The Check Designs linter maps raw values to corresponding variables. Mark designs as dev ready or run through quick action to identify variables. The custom model suggests the correct variable; apply after checking. Early access for Organization or Enterprise plans with full seats.
Design system performance improvements
Performance improvements: updating variables or switching modes 30–60% faster; severe state changes from 3500 ms to 350 ms and from 2500 ms to 450 ms. Large-scale re-architecture of design systems for a unified framework. Faster instance updates, especially for components with thousands of instances; more responsive editing. Improvements are already available.
Codebase context
Injecting context from the code base into design systems via inferred connections or Code Connect. The connection between design systems and code is important as teams rely on AI for code.
Code Connect UI
Connects Figma to GitHub repositories; The AI proposals find the correct code file to map to the components. Establishes connections between code and design quickly with less maintenance. Rolling out to Organization and Enterprise clients.
Figma MCP Server
Out of beta and publicly available. Add guidelines for AI models to ensure they adhere to the design system. Remote and desktop servers have parity of functions; FigJam chart support for workflows. Available to all users.
Created for the whole team
AI tools make it easier to participate in design; design is everyone's business. Quality does not suffer if designers set the quality bar.
Design systems in Make
Figma Make is a prompt-to-application tool for prototyping, validation, and assembly. Pull context from the design system and production code for better results.
Make Kits
Import libraries from Figma to generate React components and CSS files. Package outputs for use in Figma Make. Early access is available.
Importing npm packages
Import React components via public and private npm packages.
The evolution of design systems - together
Updates help build and maintain flexible design systems. Community feedback guides development.
Import and export of variables
Native import and export support since the W3C Community Group's Design Tokens specification reached 1.0. Available in November.
Simplification of authoring for collections
Show subscribed collections in the authoring modal window. Create variables inline; full-screen modal window by default. Available in November.
More variable modes
Increased to 10 modes for the Professional plan, 20 for Figma Organization. Already available.
How to achieve pixel-perfect from Figma to code
In addition, I want to share how to achieve pixel-perfect translation of a design from Figma to code. Pixel-perfect means that the final code accurately reproduces the design in layouts, spacing, colors and other details, without discrepancies.
To do this, you can use various tools, but combining Figma MCP Server with Cursor (an AI code editor based on VS Code) is especially effective. Is it true that you can transfer a design exactly from Figma to Cursor? Yes, it's true - with a high degree of accuracy, striving for pixel-perfect implementation. But let's take a closer look so that there are no illusions: it is not always 100% perfect out of the box, but depends on the setup, the complexity of the design and the tools used. I've tried similar integrations myself, and in most cases the results are very close to the original, especially if the design system is well structured. Here's how it works and what you need to know.
How is this implemented?
- Main tool: Figma MCP Server MCP (Model Context Provider) is a server from Figma that provides the context of your design system (components, variables, styles, colors, spacing, etc.) for AI agents. It came out of beta in 2025 (as mentioned in the Schema 2025 article) and is now available to all users. MCP allows AI to "understand" your design to generate code while strictly adhering to the rules of the system. You connect MCP to your Figma file or library (via the Figma API or settings in Figma).MCP can work locally (on your PC) or remotely (via GitHub or other hosting sites). - Integration with Cursor Cursor is an AI-IDE (based on VS Code with built-in AI from OpenAI/Claude) that is great for generating code from prompts. To transfer data from Figma: Use ready-made repositories on GitHub, for example, Figma-Context-MCP or similar (search for "Figma MCP Cursor integration"). These repositories provide scripts or servers that adapt the Figma API for Cursor. In Cursor, you configure a custom AI agent or prompt that requests data via MCP. For example: Prompt: "Generate a React component based on this screen from Figma [file link or component ID]. Use MCP for precise styles."Cursor connects to MCP, pulls out metadata (sizes, colors, fonts, layouts) and generates code (HTML/CSS/JS, React, Vue, etc.). Result: Code that reproduces the design with pixel accuracy - margins, paddings, fonts, even responsive breakpoints if they are set in Figma. - Other ways to transfer Code Connect to Figma: This is a built-in function that directly maps Figma components to code from GitHub. You can export snippets to Cursor for modification. Figma plugins: Such as "Figma to Code" or "Anima" generate code that you then import into Cursor. Cursor can "enhance" it with AI. Dev Mode in Figma: Allows you to inspect the design and copy CSS/JS directly into Cursor.
How accurately is this conveyed?
- Pros and accuracy: Pixel-perfect is achieved in 80–95% of cases for simple/medium designs. AI takes into account variables, slots, modes and even animations from Figma. For example, if the color #FF0000 is set in Figma with the variable "primary-red", the code will use it. For complex interactions (animations, states) Cursor can generate Framer Motion or CSS animations based on the Figma prototype. Tested on personal projects: the screens of mobile apps or web pages come out almost identical, with minimal edits (such as adaptation to real data). - Disadvantages and limitations: Not always 100%: AI can interpret ambiguously (for example, custom fonts or complex gradients). If the design does not use variables or has unstructured layers, the accuracy drops. Dependency on the AI model: Cursor uses GPT-4/Claude - they are cool, but sometimes they add “their” optimizations that break pixel-perfect. Solution: Add to the prompt "Strictly follow Figma specs, no changes." Complex designs: Very detailed UIs (with custom illustrations or 3D) may require manual modification. Accessibility: MCP requires an Organization/Enterprise plan for full access, but the basic version works for everyone. Cursor is paid (from $20/month), but there is a trial.
Tips for maximum accuracy
- Prepare your design: Use variables, auto-layout, components and modes in Figma. This is the key to accurate transmission.
- MCP setup: Follow the guides on Figma Help or GitHub repo. Test on a simple component first.
- Cursor prompts: Be specific: "Generate Tailwind CSS based on Figma ID [ID], with pixel-perfect spacing and colors from MCP."
- Alternatives, if not Cursor: Try VS Code with extensions (Figma for VS Code) or Builder.io with AI - they also integrate with Figma for code-gen.
- Testing: After generation, compare in the browser with Figma overlay (use Chrome DevTools or Figma Inspector plugin).
Other tools for pixel-perfect:
- Figma Dev Mode: Built-in tool for code export, inspection and Code Connect for mapping components.
- Anima or Locofy: Figma plugins that generate clean code (HTML/CSS/JS/React) with high accuracy.
- Builder.io: Integrates with Figma for visual coding, supports AI for refinements.
- Telepathy or DhiWise: AI-based converters for mobile and web applications.
By using MCP with Cursor, you minimize manual effort and ensure consistency, especially in large teams. If you have questions, ask! My portfolio usmanoff.com (password on request)
P.S. This is my take on the article - I hope it's helpful. Original here: Figma Blog.