figma-generate-design

To generate Figma screens from code, this skill translates code or design descriptions into complete layouts by reusing a connected design system. It loads existing components, variables, and text styles to ensure visual consistency across web and mobile interfaces.

Building Figma screens with design tokens requires access to a target Figma file URL and a linked design system library. You must also connect the figma-use workflow to load the necessary components, variables, and text styles before generating layouts.

The workflow preserves layout integrity when creating Figma sections by first generating a page wrapper frame. It then builds subsequent sections sequentially, ensuring that all design system components and tokens align properly within the Figma file.

Yes, you can override text in Figma component instances to match code defaults and runtime values. The skill utilizes the setProperties function to update text within instances, ensuring the generated Figma screens reflect accurate data.

The best way to validate generated Figma screens is by capturing screenshots directly within the workflow. This allows you to visually inspect the assembled components and tokens, ensuring fidelity and catching layout issues early in the design process.

For image-heavy Figma screens, you can coordinate parallel workflows and transfer images using image hashes. This allows the generation process to handle complex visual assets while assembling screens from design system components.