Figma Use

figma-use is the skill to install before every use_figma call so JavaScript runs safely in a Figma file context. It supports design implementation work like creating and editing nodes, wiring variables and styles, building components and variants, and inspecting file structure programmatically. The repo includes usage guidance, gotchas, and patterns to reduce common Figma automation errors.

figma-generate-design helps turn coded pages, modals, drawers, sidebars, panels, and other multi-section views into Figma using the published design system. It finds components, variables, styles, and library assets from Code Connect and related sources, then assembles the screen section by section for Design Implementation instead of redrawing everything manually. Use the figma-generate-design guide when you need fidelity to code and tokens.

figma-create-new-file creates a new blank Figma or FigJam file in drafts, with defaults for editor type and file name. This figma-create-new-file skill helps with design implementation, rapid prototyping, and starting a fresh canvas before use_figma. It also handles planKey resolution via whoami when needed.

figma-implement-design turns Figma screens into production-ready code in your repo, aiming for close visual parity with layout, states, tokens, and responsive behavior. Use it for Figma-to-code implementation, not Figma editing, code connect mapping, or generating new designs. It includes install guidance, usage notes, and boundary rules for Design Implementation workflows.

figma-generate-library helps turn a codebase into a Figma design system library with tokens, variables, components, theming, and documentation. Use the figma-generate-library skill when you need a phased workflow for Design Systems work, including install, setup, discovery, creation, validation, and reconciliation with code.

figma-generate-design helps turn a real screen, page, or multi-section layout into Figma by reusing the published design system instead of generic shapes. It is ideal for matching code or product pages with strong parity, editable structure, and token-based consistency. Use it for full-page UI design updates, not rough mockups.