figma-to-weaverse

Name: figma-to-weaverse
Author: Weaverse

83stars25forks

How to install figma-to-weaverse?

weaverse/shopify-hydrogen-skills/figma-to-weaverse

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill figma-to-weaverse

Installs into the current project.

Summary

Use when recreating a Figma design as Hydrogen + Weaverse pages in this repo — turning a Figma file, frame, or flow into reusable Weaverse sections. Triggers on a figma.com URL, "build this design", "implement this Figma", or "create the storefront from the design". The Figma cou

Files · 1

View on GitHub

SKILL.md

1	# Figma to Weaverse
2
3	Turn a Figma design into maintainable Weaverse pages. This is the Figma input adapter — the sibling of `cloning-websites-to-weaverse`, but the source is a Figma file instead of a live URL. Both adapters converge on the same downstream skill, `generating-weaverse-project-json`.
4
5	```
6	Figma file / frame ─→ figma-to-weaverse ─→ generating-weaverse-project-json ─→ import / content API
7	(Figma MCP) (tokens + manifest + preview) (project JSON)
8	```
9
10	The two adapters share the same downstream rules. Section matching, deep schema verification, the content manifest, the clone preview route, and the brand-guideline conflict rule are identical to `cloning-websites-to-weaverse` — read that skill for the full matching logic. This skill only replaces the extraction layer (Figma MCP instead of Firecrawl) and adds Figma-specific gotchas.
11
12	## When to Use
13
14	- A figma.com URL (file, frame, or selection) is the source of a page or storefront
15	- "Implement this design in Weaverse", "build the homepage from Figma"
16	- Multi-frame flows that map to multiple Weaverse pages
17
18	Do not use it for live-website cloning (use `cloning-websites-to-weaverse`) or tiny copy edits.
19
20	## Required Inputs
21
22	- Figma file/frame/node URL (or current selection)
23	- `.guides/brand-guideline.md`
24	- `sections.md`
25	- `app/weaverse/components.ts`
26
27	## Required Outputs
28
29	Same three deliverables as the website cloning skill:
30
31	1. Content manifest — per-section table of real asset URLs (from Figma asset export), text, links, Shopify refs, media types.
32	2. Clone preview route — a single `app/routes/clone-preview.$page.tsx` rendering the full design as React + Tailwind, section-marked, brand-adjusted. User must approve this before section decomposition.
33	3. Design spec — section mapping, schema boundaries, interaction model, token mapping.
34
35	## Extraction with Figma MCP (MCP-first)
36
37	Use the Figma MCP tools. They return structured design data — more precise than scraped HTML for tokens and layout, but weaker on real interaction (a static design has no runtime behavior).
38
39	> Before any `use_figma` write call, load the `figma-use` skill. For reads below, no write is needed.
40
41	1. Map the structure — `get_metadata` on the file/frame to get the node tree. Top-level frames/sections become your section-splitting boundaries (the Figma equivalent of HTML section markers).
42	2. Extract design tokens — `get_variable_defs` for colors, typography, spacing, radius. These map directly into `project.config.theme` in the JSON generator (colors → `colorPrimary`/`colorText`/…, type scale → `bodyBaseSize`/`h1BaseSize`/…). This is the biggest advantage over web scraping — tokens are explicit, not inferred.
43	3. Read layout + content per frame — `get_design_context` on each section frame for layout structure, auto-layout direction, text content, and component usage. Auto-layout (horizontal/vertical, wrap, spacing) tells you composition (side-by-side vs stacked vs grid).
44	4. Export assets — `download_assets` (or `get_screenshot` of leaf image nodes) to get real image/icon URLs. These populate the content manifest's image columns. There is no "video src" to extract like in HTML — flag motion/video intent from frame names or prototype notes instead.
45	5. Visual reference — `get_screenshot` of each frame for the approval checkpoint and for verifying the clone preview matches.
46	6. Design system reuse — `search_design_system` / `get_libraries` when the file uses a component library, to understand reusable component intent.
47
48	### Plugin fallback
49
50	If the MCP can't reach the file or can't export a specific asset (e.g. a flattened group, an unusual export setting), fall back to a Figma agent plugin export and read its output file. MCP is the primary path; use the plugin only to fill a concrete gap, and note in the manifest which assets came from the fallback.
51
52	## Workflow
53
54	1. Read `.guides/brand-guideline.md` first. Brand guideline beats the design on visual conflicts.
55	2. Ensure `sections.md` exists and is current before section matching.
56	3. Extract the design with Figma MCP (steps 1–6 above). Save raw context/exports under `.figma/<file>-<frame>.json` (mirrors the cloning skill's `.firecrawl/`).
57	4. Map tokens — turn `get_variable_defs` output into a theme token table for `project.config.theme`.
58	5. Build the content manifest — required deliverable, same columns and rules as the cloning skill. Asset URLs come from `download_assets`, not from guessing.
59	6. Generate the clone preview route at `app/routes/clone-preview.$page.tsx` — React + Tailwind, real asse

People who liked this also viewed

6 picks

Type

figma-to-weaverse

83stars25forks

View on GitHub

How to install figma-to-weaverse?

weaverse/shopify-hydrogen-skills/figma-to-weaverse

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill figma-to-weaverse

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Figma to Weaverse
2
3	Turn a Figma design into maintainable Weaverse pages. This is the Figma input adapter — the sibling of `cloning-websites-to-weaverse`, but the source is a Figma file instead of a live URL. Both adapters converge on the same downstream skill, `generating-weaverse-project-json`.
4
5	```
6	Figma file / frame ─→ figma-to-weaverse ─→ generating-weaverse-project-json ─→ import / content API
7	(Figma MCP) (tokens + manifest + preview) (project JSON)
8	```
9
10	The two adapters share the same downstream rules. Section matching, deep schema verification, the content manifest, the clone preview route, and the brand-guideline conflict rule are identical to `cloning-websites-to-weaverse` — read that skill for the full matching logic. This skill only replaces the extraction layer (Figma MCP instead of Firecrawl) and adds Figma-specific gotchas.
11
12	## When to Use
13
14	- A figma.com URL (file, frame, or selection) is the source of a page or storefront
15	- "Implement this design in Weaverse", "build the homepage from Figma"
16	- Multi-frame flows that map to multiple Weaverse pages
17
18	Do not use it for live-website cloning (use `cloning-websites-to-weaverse`) or tiny copy edits.
19
20	## Required Inputs
21
22	- Figma file/frame/node URL (or current selection)
23	- `.guides/brand-guideline.md`
24	- `sections.md`
25	- `app/weaverse/components.ts`
26
27	## Required Outputs
28
29	Same three deliverables as the website cloning skill:
30
31	1. Content manifest — per-section table of real asset URLs (from Figma asset export), text, links, Shopify refs, media types.
32	2. Clone preview route — a single `app/routes/clone-preview.$page.tsx` rendering the full design as React + Tailwind, section-marked, brand-adjusted. User must approve this before section decomposition.
33	3. Design spec — section mapping, schema boundaries, interaction model, token mapping.
34
35	## Extraction with Figma MCP (MCP-first)
36
37	Use the Figma MCP tools. They return structured design data — more precise than scraped HTML for tokens and layout, but weaker on real interaction (a static design has no runtime behavior).
38
39	> Before any `use_figma` write call, load the `figma-use` skill. For reads below, no write is needed.
40
41	1. Map the structure — `get_metadata` on the file/frame to get the node tree. Top-level frames/sections become your section-splitting boundaries (the Figma equivalent of HTML section markers).
42	2. Extract design tokens — `get_variable_defs` for colors, typography, spacing, radius. These map directly into `project.config.theme` in the JSON generator (colors → `colorPrimary`/`colorText`/…, type scale → `bodyBaseSize`/`h1BaseSize`/…). This is the biggest advantage over web scraping — tokens are explicit, not inferred.
43	3. Read layout + content per frame — `get_design_context` on each section frame for layout structure, auto-layout direction, text content, and component usage. Auto-layout (horizontal/vertical, wrap, spacing) tells you composition (side-by-side vs stacked vs grid).
44	4. Export assets — `download_assets` (or `get_screenshot` of leaf image nodes) to get real image/icon URLs. These populate the content manifest's image columns. There is no "video src" to extract like in HTML — flag motion/video intent from frame names or prototype notes instead.
45	5. Visual reference — `get_screenshot` of each frame for the approval checkpoint and for verifying the clone preview matches.
46	6. Design system reuse — `search_design_system` / `get_libraries` when the file uses a component library, to understand reusable component intent.
47
48	### Plugin fallback
49
50	If the MCP can't reach the file or can't export a specific asset (e.g. a flattened group, an unusual export setting), fall back to a Figma agent plugin export and read its output file. MCP is the primary path; use the plugin only to fill a concrete gap, and note in the manifest which assets came from the fallback.
51
52	## Workflow
53
54	1. Read `.guides/brand-guideline.md` first. Brand guideline beats the design on visual conflicts.
55	2. Ensure `sections.md` exists and is current before section matching.
56	3. Extract the design with Figma MCP (steps 1–6 above). Save raw context/exports under `.figma/<file>-<frame>.json` (mirrors the cloning skill's `.firecrawl/`).
57	4. Map tokens — turn `get_variable_defs` output into a theme token table for `project.config.theme`.
58	5. Build the content manifest — required deliverable, same columns and rules as the cloning skill. Asset URLs come from `download_assets`, not from guessing.
59	6. Generate the clone preview route at `app/routes/clone-preview.$page.tsx` — React + Tailwind, real asse

People who liked this also viewed

6 picks

Type