skills.rest
Charitablebusinessronin
CharitablebusinessroninCOMMUNITY
Explore all skills by this author →
GitHub

figma-implement-design

Translate Figma designs into project UI components with design tokens.

Updated Mar 18, 2026
Search Tags:#workflow#ui#figma#mcp#component#design-to-code#design-tokens
One-click install
npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-implement-design-charitablebusinessronin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-implement-design
Source: https://github.com/Charitablebusinessronin/Allura_Memory/tree/main/.opencode/skills/figma-implement-design
Command: npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-implement-design-charitablebusinessronin

SYSTEM DOCUMENTATION & REQUIREMENTS

Translates Figma designs into production-ready application code with 1:1 visual fidelity. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Skill Boundaries

  • Use this skill when the deliverable is code in the user's repository.
  • If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use.
  • If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design.
  • If the user asks only for Code Connect mappings, switch to figma-code-connect.
  • If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.

Prerequisites

  • Figma MCP server must be connected and accessible
  • User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
    • :fileKey is the file key
    • 1-2 is the node ID (the specific component or frame to implement)
  • OR when using figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)
  • Project should have an established design system or component library (preferred)

Required Workflow

Follow these steps in order.

  1. Get Node ID
  2. Fetch Design Context
  3. Capture Visual Reference
  4. Download Required Assets
  5. Translate to Project Conventions
  6. Achieve 1:1 Visual Parity
  7. Validate Against Figma

Implementation Rules

Component Organization

  • Place UI components in the project's designated design system directory
  • Follow the project's component naming conventions
  • Avoid inline styles unless truly necessary for dynamic values

Design System Integration

  • ALWAYS use components from the project's design system when possible
  • Map Figma design tokens to project design tokens
  • When a matching component exists, extend it rather than creating a new one
  • Document any new components added to the design system

Code Quality

  • Avoid hardcoded values - extract to constants or design tokens
  • Keep components composable and reusable
  • Add TypeScript types for component props
  • Include JSDoc comments for exported components

Examples

  • Example workflows illustrate translating a Button component from Figma to a reusable project component.
  • Example workflows illustrate building a Dashboard layout from a Figma design with responsive behavior.

Best Practices

  • Always Start with Context
  • Incremental Validation
  • Document Deviations
  • Reuse Over Recreation
  • Design System First

Additional Resources

  • Figma MCP Server Documentation
  • Figma MCP Server Tools and Prompts
  • Figma Variables and Design Tokens

Frequently Asked Questions about figma-implement-design

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

FAQPage Schema
How do I translate Figma designs into production-ready UI code?▼

To translate Figma designs to production-ready UI code, you fetch design context via the Figma MCP server, map design tokens to project conventions, and enforce 1:1 visual parity checks during component builds.

Do I need a Figma MCP server connection to implement design-to-code workflows?▼

Yes, an accessible Figma MCP server connection is required. You must provide a Figma URL with the file key and node ID, or select a node directly in the Figma desktop app to fetch design context.

Can I use this to edit nodes inside the Figma file itself?▼

No. This skill outputs code to your repository. If you need to create, edit, or delete nodes directly inside the Figma file itself, you must switch to a Figma node manipulation tool instead.

What is the best way to maintain visual fidelity when converting Figma to components?▼

The best way to maintain visual fidelity is to map Figma design tokens to project tokens, avoid hardcoded values by extracting constants, and validate the translated component against the Figma reference to achieve 1:1 parity.

When should I map Figma components to an existing design system instead of creating new ones?▼

You should map to an existing design system whenever a matching component exists. Extend the existing component rather than creating a new one, and document any new additions to the design system.

Why does my Figma to code workflow require a specific node ID?▼

A specific node ID is required to target the exact component or frame. This ensures the fetched design context, downloaded assets, and translated code achieve accurate 1:1 visual parity for that specific element.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
calvingitcalvingit
2

figma-code-connect

Generate Figma Code Connect template files from component URLs.

Community
Advanced
niallr12niallr12

implement-design

Translate Figma designs into production-ready UI code via MCP.

Community
Advanced