skills.homes logoskills.homescapability registry
home/categories/productivity-tools/davila7-claude-code-templates-cli-tool-components-skills-creative-design-figma-implement-design-skill-md
cd ..
productivity-toolstools

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

View Sourceproductivity-tools
davila7
maintainer
davila7
Updated 2/8/2026
Stars
24426
Forks
2400
quick start

Installation and usage

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use figma-implement-design