figma

Extract Figma design data and generate UI components via MCP workflows.

1|1|Updated Jun 2, 2025

Search Tags:#ui #figma #playwright #design-system #design-to-code #component-implementation

Ready to run

npx skills add https://github.com/BumpyClock/dotfiles --skill figma-bumpyclock

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/BumpyClock/dotfiles/tree/main/.ai_agents/skills/figma
Command: npx skills add https://github.com/BumpyClock/dotfiles --skill figma-bumpyclock

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating Figma designs into production-ready UI components, ensuring fidelity to layout, typography, colors, and spacing while aligning with your design system.

Core Features & Use Cases

Design-to-code translation: Extracts layout, colors, typography, and spacing from Figma nodes and maps them to code compatible components.
Token reuse: Leverages design tokens and shared styles to minimize ad-hoc styling.
Validation: Uses Playwright MCP to verify browser rendering and parity with the Figma reference across breakpoints.
Update and iteration: Reconciles changes in Figma by updating components and performing regression checks.

Quick Start

Describe a Figma node to implement and run the Figma MCP workflow to generate the component.

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I translate Figma designs into code components?▼

To translate Figma designs into code, you extract layout, typography, and spacing data from Figma nodes and map them directly to ready-to-implement UI components using Figma MCP workflows.

How do I enforce design tokens when implementing UI from Figma?▼

Enforcing design tokens during Figma implementation involves validating extracted styles and shared properties against your design system via MCP workflows to minimize ad-hoc styling and maximize token reuse.

How can I validate browser rendering parity for Figma UI components?▼

Validating browser rendering parity for Figma UI components requires using Playwright MCP to iteratively verify that the implemented output matches the Figma reference across multiple breakpoints.

Can I use Figma MCP to update existing components after design changes?▼

Yes, you can use Figma MCP to reconcile updated designs by updating the corresponding code components and performing regression checks to ensure continued fidelity to the Figma reference.

Does design-to-code translation support both web and app interfaces?▼

Design-to-code translation supports both web and app interfaces, applying Figma MCP workflows to extract node data and generate compatible UI components across different platform environments.