Implement a Figma design
figma · OpenAIRead Figma frames, screenshots, variables, and assets through Figma MCP, then implement the design in your existing project.
- Output
- UI code in your project
- Needs
- Figma MCP, file permission and a web project
Separate author license
What it does
- What to bring
- A link to the exact Figma frame or layer, and your editable web project.
- Requirements
- A connected Figma MCP server, access to the file, and an agent that can read and edit your project.
- Keep in mind
- This implements existing designs; it does not create a new Figma file. Figma access and tool availability depend on your setup. Follow the Figma Developer Terms.
Try a design task
Once the skill is loaded, copy the task and adapt it to your brief.
Use figma to implement this frame in my existing project: [paste a Figma frame link]. Fetch its design context and screenshot first. Reuse the project's components and tokens, and use the supplied assets. Check the result against the original at desktop and mobile widths. Ask about missing states rather than inventing them.Installation instructions
Get and install it following the author's instructions and Figma Developer Terms. Connect Figma MCP and confirm access to your design file before use.
Read the Figma setup guideReview the result
- The link resolves to the intended frame and variant.
- Typography, spacing, and supplied assets match the reference.
- The implemented interactions and mobile layout work.