Use the Figma to LWC Conversion Tool (Beta)

The guide_figma_to_lwc_conversion tool accelerates LWC development by providing Salesforce Lightning Design System (SLDS) guidelines and facilitating the conversion of Figma designs to LWC specifications.

MCP Tools for LWC is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.

To use the guide_figma_to_lwc_conversion tool, pass the --toolsets flag as part of the args property of your MCP configuration file and specify lwc-experts. See Use DX MCP Tools for LWC for configuration details.

Before you can use the Figma to LWC MCP tool, create a Figma account if you don't already have one. To work with the Figma to LWC conversion tool:

  1. Get a Figma access token
  2. Connect to the Framelink MCP server
  3. Send a prompt

This video shows you how you can generate an LWC component using both tools.

Generate LWC Components from Figma

A Figma access token lets you pull your Figma design data from your IDE. When creating a Figma access token, select the file_content:read scope. You don't need any other scope to work with the Figma to LWC conversion tool. See the Framelink documentation.

Using the Framelink MCP server enables Agentforce Vibes (or another IDE) to read Figma files. To connect to the server, update your MCP configuration file. After you update the configuration file, the Framelink MCP server automatically downloads and starts.

For more information on configuring the MCP server for Agentforce Vibes (VS Code), Cursor, and other IDEs, see the Framelink documentation.

Rate limits apply when you use the Framelink MCP server. Check that you have the right license before calling the tool. See the Figma Developers documentation.

Ask about generating a component based on a Figma design.

  • Convert this Figma design to LWC. Link to Figma file: https://www.figma.com/design/<your-unique-design-url>
  • Extract design tokens such as for spacing, color, radius, and typography from Figma and map them to SLDS variables. Link to Figma file: https://www.figma.com/design/<your-unique-design-url>
  • Generate an LWC component breakdown and file scaffold plan from this Figma frame. Link to Figma file: https://www.figma.com/design/<your-unique-design-url>

The guide_figma_to_lwc_conversion tool fetches data using the Framelink MCP Server and is subject to its rate limits.

When you send a prompt, the guide_figma_to_lwc_conversion tool is called. The tool provides guidance on how to build the LWC component. Next, the figma_data_tool tool from the Framelink MCP server is called, which reads the Figma design file you provide and loads its data in the conversation. Finally, the create_lwc_component_from_prd tool is called with the design file data, leading to the final LWC conversion.

To improve the quality of your conversion, we recommend that you follow these guidelines.

Preparing your Figma design ensures a more accurate LWC code output. To prepare your Figma design, follow these design requirements.

  • Use consistent naming conventions for components
  • Organize layers logically with proper grouping
  • Include all component states, such as hover, active, or disabled
  • Define responsive breakpoints if needed

We recommend that you follow these best practices.

  • Use SLDS components and patterns when possible
  • Include proper spacing and typography scales
  • Define interaction behaviors in design comments
  • Export all necessary assets, such as icons and images

The LWC MCP tool includes automated cross-browser compatibility checks, SLDS design system compliance, accessibility validation (WCAG), and performance optimization. The tool analyzes your Figma designs to understand:

  • Component structure and hierarchy
  • Layout patterns and responsive behavior
  • Typography and spacing systems
  • Color schemes and theming
  • Interactive elements and states

Based on the Figma design analysis, the tool generates:

  • LWC code with semantic HTML structure
  • LWC-optimized CSS with SLDS integration
  • Component JavaScript with proper property bindings
  • Responsive design patterns
  • Accessibility attributes

After you review the generated code and component structure, test the component in a sandbox or scratch org. You can further customize your component in these areas:

  • Adjust responsive breakpoints
  • Add business logic and data binding
  • Integrate with Lightning Data Service
  • Configure component properties

Just like with any LWC migration, we recommend that you consider these next steps before deploying to your Salesforce org.

See Also