back
loading skill details...
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…
Build / Update Screens and Views from Design System Use this skill to create or update screens, views, and multi-section UI containers in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. This includes full pages, modals, dialogs, drawers, sidebars, panels, and any composed view with multiple sections. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. MANDATORY: You MUST also load figma-use before any use_figma call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write. Always pass skillNames: "figma-generate-design" when calling use_figma as part of this skill. This is a logging parameter — it does not affect execution. Skill Boundaries Use this skill when the deliverable is a composed Figma view (new or updated) — full-page screens, modals, dialogs, drawers, sidebars, panels, or any multi-section container — built from design system component instances. If the user wants to create new reusable components or variants, use figma-use directly. If the user wants to write Code Connect mappings, switch to figma-code-connect. Prerequisites
don't have the plugin yet? install it then click "run inline in claude" again.