skills.rest
BumpyClock
BumpyClockCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/BumpyClock/dotfiles --skill figma-bumpyclock
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
marcius-llmusmarcius-llmus
1

figma-implement-design

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

Community
Advanced
Davie521Davie521
7

browser-qa

Automate browser-based visual QA and accessibility checks on live web pages.

Community
Advanced
NVIDIA-NeMoNVIDIA-NeMo
58

visual-dev

Automate visual regression testing and UI implementation with Playwright MCP browser automation.

Official
Intermediate
SunS1eep1ngSunS1eep1ng

web-design-reviewer

Automate visual website design inspection and code-level fixes with Playwright.

Community
Advanced