figma-build
FeaturedBuild a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g. 'build this in Figma', 'create a Figma design for this', 'push this component/screen to Figma', 'turn this React/Vue into a Figma design', 'recreate this UI in Figma', 'make a Figma version of …', 'design a landing page/screen in Figma' — or whenever a coding artifact (a component, page, or spec) appears alongside a request to author in a connected Figma file. Works for full screens, sections, single components, or design-system assets.
Install
Quality Score: 93/100
Skill Content
Details
- Author
- awdr74100
- Repository
- awdr74100/figwright
- Created
- 3 months ago
- Last Updated
- today
- Language
- TypeScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
figment
Figment builds and iterates on a Figma design system, component library, illustrations and complete screens straight from code, using a local Figma plugin plus an offline harness that catches layout bugs before Figma is ever opened. Use this whenever someone wants design generated into Figma from a codebase, a token file or a spec — "build these screens in Figma", "push our design system / tokens to Figma", "generate a component library in Figma", "make a Figma file for this app", "keep Figma in sync with the code" — and especially when the Figma MCP server is unavailable, rate-limited, or the seat cannot edit the file. Use it too when iterating on generated Figma output from screenshots and review notes, or whenever the design needs to be reproducible, diffable and versioned in git instead of hand-drawn.
figma-codegen
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or whenever a Figma URL or the current Figma selection appears alongside a coding request. Works for full screens, single sections, or one component.
figma-design
Design, build, or edit a Figma file through a design connector (plugin-API calls verified with screenshots). Use whenever the task is to create or change a Figma design, mock up a UI, logo, infographic, or design system, build styles or components, or hand a design to dev. Triggers even if the user does not name Figma but asks to "mock up", "design a screen", or "build a component library". Encodes the hard rule that page structure and layer naming come before any frame.