skills.rest
bl1nk-bot
bl1nk-botOFFICIAL
Explore all skills by this author →
GitHub

figma

Translate Figma frames into React and Tailwind UI code.

3|Updated Feb 13, 2026
Search Tags:#react#figma#mcp#tailwind#design-to-code#ui-automation
One-click install
npx skills add https://github.com/bl1nk-bot/skills-cli --skill figma-bl1nk-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/bl1nk-bot/skills-cli/tree/main/skills/figma
Command: npx skills add https://github.com/bl1nk-bot/skills-cli --skill figma-bl1nk-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Figma MCP-driven workflow that translates design context, assets, and screenshots from Figma into production-ready UI code following project conventions.

Core Features & Use Cases

  • Fetch design context with get_design_context to derive a structured UI representation.
  • Retrieve metadata and screenshots for visual parity and asset handling, then generate React + Tailwind components aligned with tokens.
  • Use references for setup, config, and troubleshooting to enable end-to-end design-to-code delivery.

Quick Start

Register the Figma MCP server and fetch the design context for a specific frame to begin translating it into code.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I convert Figma designs to React components with Tailwind?▼

To convert Figma designs to React, this Skill extracts design context and screenshots, then translates them into production-ready UI code using Tailwind CSS tokens.

What is the Figma MCP server used for in design-to-code workflows?▼

The Figma MCP server enables this Skill to fetch design context, retrieve metadata, and capture screenshots, providing the structured data needed for accurate design-to-code translation.

Do I need bearer tokens to extract design context from Figma?▼

Yes, you need environment-based bearer tokens to authenticate with the Figma MCP server and extract structured design context for translating frames into production UI.

Can I verify visual parity when translating Figma frames to web apps?▼

Yes, you can retrieve screenshots via the Figma MCP server to perform visual verification, ensuring the generated React components match the original Figma designs.

What is the process for handling assets when converting Figma to UI code?▼

Asset handling involves downloading assets after retrieving metadata and screenshots, ensuring all visual elements are correctly integrated into the generated React and Tailwind components.

Related Skills

Explore More Design & Creative Skills→
guilhermemarketingguilhermemarketing
59

figma

Extract design context, assets, and style tokens from Figma MCP.

Community
Advanced
bzellmanbzellman

figma

Translate Figma frames into React and Tailwind UI code.

Community
Advanced
School-Agent-IncSchool-Agent-Inc
1

web-builder

Scaffold Next.js/React websites with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

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

Official
Advanced