figma-generate-design

To convert code to Figma screens, this skill maps code-driven UI to a published design system, reusing components, tokens, and styles to assemble production-ready frames incrementally. It requires a connected Figma environment and access to target files.

Yes, you can update existing Figma frames to reflect UI changes by reusing mapped components, tokens, and styles from your connected design-system libraries. This ensures your design files stay synchronized with code modifications without manual rebuilding.

Mapping UI to design tokens requires a connected Figma environment with access to target files and published design-system libraries. The skill uses these libraries to translate hard-coded values into matching Figma variables, text styles, and effect styles.

Generating multi-section Figma layouts from code requires a published design system to ensure consistency. The skill reuses the library's component instances, spacing, typography, and color tokens to assemble full pages accurately rather than relying on hard-coded values.

Limitations include requiring pre-published design-system libraries; the skill cannot generate screens from code without existing tokens, variables, and component instances to map to. It also requires direct Figma environment connectivity to access target files and search the design system.