Figma Skill

Quick start

Goal: work against real Figma files instead of guessing from screenshots or loose descriptions.

Reference notes: skills/figma-skill/references/figma-skill.md

Default tool choices

• Design understanding: getdesigncontext
• File structure only: get_metadata
• Screenshots: get_screenshot
• Design-system lookup: searchdesignsystem
• Direct canvas writes: use_figma
• First-time webpage capture: generatefigmadesign

Recommended workflow

1. Extract fileKey and nodeId from the Figma URL.
2. Use getdesigncontext by default for design-to-code work.
3. Before creating components, search the design system for reusable assets.
4. Use use_figma for edits inside an existing file.
5. Use generatefigmadesign only when capturing a web page/view into Figma for the first time.

Code Connect workflows

• Read mappings: getcodeconnect_map
• Get suggestions: getcodeconnect_suggestions
• Save approved mappings: sendcodeconnect_mappings
• Add a direct mapping: addcodeconnect_map

Guardrails

• Prefer getdesigncontext over get_metadata when actual implementation guidance is needed.
• Search the design system before recreating components.
• Treat broad destructive canvas edits as high-risk; confirm before mass deletion/rewrite.

References

• Condensed notes: skills/figma-skill/references/figma-skill.md