Figma Workflows Integrate with JetBrains AI
A new guide details how to integrate Figma with the JetBrains AI Assistant, allowing large language models to programmatically read and modify design files. This integration aims to tighten the loop between design and development by enabling advanced automations, such as generating design variants or systematizing updates directly from code.
- This integration relies on the Model Context Protocol (MCP), which enables JetBrains AI Assistant to receive real-time design context from Figma. A personal access token from Figma is required to authorize the connection, allowing the AI to access design file information directly within the IDE. - The JetBrains AI Assistant, which is integrated into IDEs like WebStorm and PyCharm, uses this Figma context to perform tasks such as generating code from design components, suggesting code completions that match design specifications, and even creating automated tests. - While Figma's REST API is primarily for reading file data, the programmatic modification of design elements like text and images is accomplished through custom Figma plugins. Successful automation relies on a well-structured design file with a consistent naming convention for layers and components. - This workflow is part of a larger industry trend of using Large Language Models (LLMs) for workflow automation, where AI agents can translate natural language or design specifications into code and other outputs. - The AI Assistant can generate documentation and commit messages by summarizing changes between the code and the design context, streamlining the handoff process between design and development phases. - The connection allows for a two-way street of information, where developers can query design tokens (like colors and fonts) from Figma without leaving their code editor, and future developments aim to allow design updates to be pushed back to Figma from the IDE. - This type of AI-powered tooling enhances creative processes by automating repetitive tasks, such as generating multiple design variations or ensuring brand consistency across different platforms, similar to features seen in Adobe's Sensei platform. - The JetBrains AI ecosystem allows for flexibility in choosing the underlying Large Language Model, including options from OpenAI, Google, or even local models for users with specific privacy or performance needs.
