Translate Figma designs into React and Tailwind UI code.
npx skills add https://github.com/Estom/aiflex --skill figma-estom
Please help me install this Agent Skill. Skill: figma Source: https://github.com/Estom/aiflex/tree/main/skills-repo/openai-skills/figma Command: npx skills add https://github.com/Estom/aiflex --skill figma-estom
This Skill removes friction from design-to-code workflows by fetching structured Figma design context, screenshots, variables, and assets, and guiding the translation of Figma nodes into production-quality UI code that conforms to project conventions.
Use the figma skill to fetch design context and a screenshot for the given Figma frame URL so I can implement it in the codebase.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs into production-ready React code, you provide a Figma frame URL to retrieve design context, screenshots, and variables, then map the extracted nodes to existing components and project tokens.
The best way to fetch Figma design assets and metadata is by using the get_design_context and get_metadata functions to retrieve precise node data, variables, and visuals directly from the Figma MCP server.
To map Figma nodes to existing components, you use the code-connect mapping flow to link extracted design context with your repository's UI components, enforcing reuse and parity rules to avoid placeholder icons.
Yes, you can extract design tokens and variables from a Figma frame for Tailwind integration by applying variable extraction and project-specific token replacement to align the generated UI code with your conventions.
Figma MCP server setup requires no specific external dependencies to retrieve screenshots, as the get_screenshot function operates within the design-to-code workflow to fetch visuals directly from Figma nodes.
Figma design-to-code output includes placeholder icons when asset handling rules are not applied, so you must use the asset download and mapping management flow to enforce existing repository icons and avoid new packages.
northseadlFetch Figma design context and translate nodes into React and Tailwind code.
inehemiasmConvert Android XML View layouts into Jetpack Compose components.
JetBrainsFetch Figma design context and generate React + Tailwind UI code.
michelveConvert Figma designs into React and Tailwind CSS components.
