skills.rest
acquia
acquiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

implement-design

Translate Figma designs into UI code with design tokens.

16|6|Updated Feb 19, 2025
Search Tags:#frontend#figma#assets#pixel-perfect#design-to-code#mcp-server#component-implementation
One-click install
npx skills add https://github.com/acquia/nebula --skill implement-design-acquia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-design
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/implement-design
Command: npx skills add https://github.com/acquia/nebula --skill implement-design-acquia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a reliable, repeatable workflow for turning Figma frames or components into production-ready UI code, eliminating guesswork and reducing rework between designers and developers.

Core Features & Use Cases

  • Precise extraction of fileKey and nodeId from Figma links or selection via the Figma desktop MCP to target specific components or frames.
  • Structured design context retrieval including layout, typography, color, and component variants, plus automated screenshots and asset downloads for visual validation.
  • Project integration guidance to map Figma tokens to design system tokens, reuse existing components, and achieve 1:1 visual parity for buttons, layouts, dashboards, and other UI elements.

Quick Start

Use this skill to implement the Figma frame at the provided link and produce a component that matches the screenshot and project design tokens.

Frequently Asked Questions about implement-design

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

FAQPage Schema
How do I convert Figma designs to pixel-perfect UI code?▼

To convert Figma designs to pixel-perfect UI code, extract the fileKey and nodeId from your Figma link, fetch design context and screenshots, download assets, and map design values to your project's design tokens and components.

Do I need a Figma MCP server to implement designs from Figma files?▼

Yes, a connected Figma MCP server is required to implement designs from Figma files. It facilitates extracting fileKey and nodeId, fetching structured design context, capturing screenshots, and downloading assets for accurate component implementation.

What is the best way to map Figma tokens to a design system during component implementation?▼

The best way to map Figma tokens to a design system is by retrieving structured design context like layout, typography, and color from Figma, then mapping those values directly to your project's existing design tokens and reusable UI components for visual parity.

Can I extract specific Figma frames or components for front-end development?▼

Yes, you can extract specific Figma frames or components by precisely targeting their fileKey and nodeId from Figma links or via the Figma desktop MCP selection, allowing focused UI implementation of individual components or layouts.

Why does my Figma to code workflow result in visual mismatches?▼

Figma to code workflows result in visual mismatches when design values are not properly mapped to project design tokens and components. Using structured design context, automated screenshots, and asset downloads ensures 1:1 visual parity.

Related Skills

Explore More Software Engineering Skills→
EstomEstom

figma-implement-design

Translate Figma designs into frontend code with visual parity.

Community
Advanced
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

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

Official
Advanced
skeeper75skeeper75

moai-design-tools

Fetch Figma design context and export Pencil designs to React/Tailwind code.

Community
Advanced