Building applications for the web often involves an UI design phase. While Figma has been improving the designer to developer handoffs, the ideal would be that there’s no need for handoff at all. This article dives into two approaches in generating Vaadin UI code from a Figma design.
As of today Vaadin code can be generated in three ways.
- Vaadin Copilot’s Image to Vaadin is generating code from an UI screenshot.
- Vaadin Copilot’s Figma to Vaadin is a rule based code generation engine.
- Figma MCP connects designs to AI agent such as Claude / Codex / Gemini.
This article focuses on the two workflows that start with a Figma design. While both tools aim to generate Java UI code from a design file, their underlying mechanics and outputs differ significantly.
For a deeper dive into the practical application of these workflows, look into webinar recording from December 2025 on YouTube.
Meet the Contenders
In the Blue Corner: Vaadin Copilot (Deterministic)
Vaadin Copilot’s "Figma to Code" feature is a rule based translator. It does not interpret the designs; it reads structured data directly from the Figma clipboard and maps it to specific Vaadin UI components.
The output is predictable. The data copied from Figma is translated into equivalent Java code without variation or "hallucination."
In the Purple Corner: Figma MCP (AI-Driven)
Figma MCP (Model Context Protocol) utilizes a generative AI approach. It passes information from the Figma file to an AI agent such as Claude, Codex or Gemini. Rather than direct translation, the design context is interpreted based on documentation and user prompts. The AI agent can work with designs that are not optimally structured and is capable of enriching the UI to make the generated result more functional.
For the best results an AI agent needs to have access to Vaadin MCP that provides Vaadin documentation. Prompt files are used to guide the process and code generation preferences. I’ve shared my prompt for Figma MCP workflow in GitHub.
The Showdown: 5 Rounds of UI Generation
To determine the strengths of each approach, we are putting them head to head on five topics.
Round 1: Adaptability to different Figma designs
- Vaadin Copilot: Efficiency depends on the use of the official Vaadin Design System in Figma. Specific metadata is required for the tool to recognize elements like a Button or TextField. Non-standard shapes or unmapped rectangles are typically rendered as generic div and span elements.
However, it is not strictly limited to the official design system. Copilot features an Importer API that allows developers to extend the ruleset. By writing custom TypeScript importer modules, you can map your own internal Figma component libraries to Vaadin components, though this requires upfront coding effort to define those translation rules
- Figma MCP: A more flexible interpretation is provided by the AI. A simple rectangle can be identified as a Button as long as there is some metadata like layer name or component description to suggest this. This allows for the generation of code from unoptimized or custom designs that are not done with Vaadin in mind. Still using the Figma assets for Vaadin Design System gives the best results as the components match the components available in Vaadin.
Winner: Figma MCP. While Copilot can be taught to understand custom designs via its API, Figma MCP handles non-optimal designs more effortlessly.
Round 2: Accuracy and predictability
- Vaadin Copilot: Because it is deterministic, it captures the exact structure of the Figma file. If you use Auto Layout in Figma, Copilot maps this to Vaadin’s VerticalLayout or HorizontalLayout. It is highly accurate as long as the source file is well-structured.
- Figma MCP: AI gives best results when it’s given clear guidelines to follow. When it has to make judgement calls, it might start implementing custom components, invent a CSS class that doesn't exist or focus on tasks that are irrelevant for UI code generation.
Winner: Tie. The deterministic approach is highly accurate, but also very picky on the structure of the Figma designs. AI code generation can be accurate, but it requires effort on setting the expectations straight and providing context.
Round 3: Refining and refactoring
Neither workflow produces perfect results with the first shot. Both initiate the correct UI elements, but typically the sizing and layouts need manual adjusting.
- Vaadin Copilot: The running application has a live WYSIWYG editor. Visual adjustments are made directly to the UI in the browser and are reflected in the Java source code in real-time.
- Figma MCP: Refining the UI requires prompting the agent or manual code edits. Describing visual changes in text can be inaccurate and slow. By default the AI does not have a live view of the running application to verify the visual result of its changes, but this skill can be given to an AI agent.
Winner: Vaadin Copilot. The ability to do live UI edits in the browser is an advantage during the polishing phase.
Round 4: Code quality
- Vaadin Copilot: Each copy-paste import generates code in a single, large Java class. For complex layouts, manual refactoring is typically required to decompose the output into more readable code.
- Figma MCP: Code styling guidelines can be enforced via AI agent’s context. The modern LLM’s excel in writing modular and well organized code from the start.
Winner: Figma MCP. It allows for better alignment with existing codebase and cleaner code generation.
Round 5: Pricing
- Vaadin Copilot: Since Vaadin 25.1 this tool is provided free of charge. There are no additional per-seat costs or external subscriptions required to use the Figma-to-code functionality.
- Figma MCP: Utilizing this workflow requires multiple paid components. A Figma subscription with Dev Mode access is necessary for the MCP server to read the design data. Additionally, a subscription to an AI service is required to power the agent.
Winner: Vaadin Copilot. The lack of additional subscription costs makes it the more accessible option for developers already in the Vaadin ecosystem.
Round 6: Data Privacy and Security
In enterprise environments, the path your data travels is as important as the code it generates.
- Vaadin Copilot: The translation process happens entirely locally. When data is copied from Figma and pasted into Copilot, the mapping to Java code occurs within the developer's environment. Design assets, metadata, and the resulting source code are never sent to external servers or third-party services.
- Figma MCP: This workflow relies on cloud-based processing. The design context from Figma is sent to an external Large Language Model (LLM) provider (like Anthropic or OpenAI). Depending on the service and its terms of use, this data may be processed or even used to train future models unless specific enterprise privacy agreements are in place.
Winner: Vaadin Copilot. For teams with strict security requirements or sensitive intellectual property, the local-first approach offers superior data sovereignty.
Round 7: Custom theming
Both workflows focus primarily on generating UI component code and layouts, but application-wide styles can also be generated from Figma designs.
- Vaadin Copilot: Theme customizations are not imported directly, but is possible using external Figma plugins. A recommended approach is to use the Export Variables plugin by Ease Studio. This tool can export Figma style variables as Lumo-compatible CSS custom properties, which can then be pasted directly into the application's styles.css.
- Figma MCP: Theming can be handled by utilizing a dedicated Figma to Lumo theme skill. This allows the AI to map style variables in the current Figma selection to Lumo CSS properties. However, it is important to note that the AI's context is limited to the current user selection. Running the process with different selections or creating dedicated theming frame that contains most styles can help generating a complete theme configuration.
Winner: Tie. Both tools treat theming as an external process, requiring either a specialized plugin or a specific AI skill to bridge the gap between Figma’s style variables and Vaadin’s Lumo theme.
Conclusion: A Hybrid Approach
The showdown ends in a split draw. The two tools are most effective when used as complementary parts of a workflow. The choice of one over another depends on the project specific needs like compatibility with existing Figma designs, level of customization needed or associated costs.
Vaadin Copilot is best utilized as the finisher. Once the initial UI code is generated, Copilot allows for visual fine-tuning. It ensures that the final implementation matches the design system's precision by allowing the developer to adjust layout parameters directly in the UI.
Figma MCP is best utilized as the architect. It is ideal for the initial phase of development, transforming a design concept into a structured UI with appropriate component separation and clean code.
For Java teams, the most efficient strategy involves using the AI agent to build a clean code structure, followed by a live UI editor to polish the implementation.