Fetch structured Figma design context, screenshots, variables, and assets.
npx skills add https://github.com/marcius-llmus/skills --skill figma-marcius-llmus
Please help me install this Agent Skill. Skill: figma Source: https://github.com/marcius-llmus/skills/tree/main/%28design%29/figma Command: npx skills add https://github.com/marcius-llmus/skills --skill figma-marcius-llmus
Many design-to-code workflows lack structured, verifiable design context and an integrated way to retrieve Figma node data, screenshots, variables, and assets, which slows development and leads to visual or behavioral mismatches.
Ask the figma skill to fetch design context and a screenshot for a Figma frame link and generate implementation guidance aligned to the project's components and tokens.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs to code, fetch structured design context and screenshots for specific frame or node URLs. The skill provides React and Tailwind suggestions while enforcing project-specific translation flows and asset handling rules.
Retrieve Figma screenshots, variable definitions, and style definitions to validate visual parity. This ensures your implementation aligns with project tokens and avoids behavioral mismatches during design-to-code translation.
Yes, you can map Figma components to your existing project components. The skill enforces component mapping rules and asset handling guidelines to prevent creating new icon packages or placeholders during implementation.
Set up a Figma MCP server by following the provided verification and troubleshooting guidance. The skill supports MCP server configuration to enable tool calls like get_design_context, get_metadata, get_screenshot, and asset downloads.
You need a Figma frame or node URL to extract structured design context. The skill processes these URLs to fetch node data, screenshots, variables, and assets for accurate design-to-code translation.
northseadlFetch Figma design context and translate nodes into React and Tailwind code.
EstomTranslate Figma designs into frontend code with visual parity.
vobaseExtract reusable UI components, design tokens, and patterns from frontend codebases.
guilhermemarketingExtract design context, assets, and style tokens from Figma MCP.
