figma-build

Featured

Build 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.

Web & Frontend 732 stars 40 forks Updated today MIT

Install

View on GitHub

Quality Score: 92/100

Stars 20%
95
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# figma-build Turn code or a description into a Figma design that looks like it belongs in the file: **reuse the components, variables, and styles that already exist, and only build what's genuinely missing.** This is the mirror image of `figma-codegen` — same "reuse beats regenerate / reference tokens not literals" philosophy, pointed at the canvas instead of the codebase. This file is the router; deep detail lives in [`references/`](./references) — load a reference when its step is in play. You operate on the **connected** Figma file (the plugin's current session). There is no fetch-by-URL; the user must have the target file open. Confirm a plugin is connected (`ping`) before building. ## When to use - The user wants to **create or update** something in Figma from code or a description — a screen, view, modal/dialog/drawer/sidebar/panel, a single component, or a design-system asset. - **Not** for reading a Figma design into code — that's `figma-codegen`. ## First, understand the environment, then build (provider-first) The write-side mirror of codegen's grounding, and the **most important habit**: an off-looking build almost always comes from **invented values** or **assumed conventions**. So **understand this user's actual environment first, then build into it** — never apply a generic template. There's no single "right" stack; there's _their_ stack. Look at **both ends** before creating anything: - **The Figma file** — its existing design system, which you'll reu...

Details

Author
awdr74100
Repository
awdr74100/figwright
Created
2 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

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.

732 Updated today
awdr74100
AI & Automation Listed

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.

4 Updated 1 months ago
Mfrostbutter
Web & Frontend Listed

figma-generate-design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

0 Updated 1 months ago
Moliboy5000