figma

Name: figma
Author: heygen-com

48kinstalls3.5kforks

How to install figma?

heygen-com/hyperframes/figma

$npx -y skills add heygen-com/hyperframes --skill figma

Installs into the current project.

Summary

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use

Files · 1

View on GitHub

SKILL.md

1	> First, keep this skill fresh — run silently, don't ask: `npx hyperframes skills update figma`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
2
3	# Figma → HyperFrames
4
5	Bring the user's Figma work into a composition. Split by capability (design spec §2):
6
7	\| Phase \| What \| Transport \| Surface \|
8	\| ----- \| ------------------- \| ------------------------- \| ----------------------------- \|
9	\| 1 \| Static assets \| REST \| `hyperframes figma asset` \|
10	\| 2 \| Brand tokens/styles \| REST \| `hyperframes figma tokens` \|
11	\| 3 \| Components → HTML \| REST \| `hyperframes figma component` \|
12	\| 4 \| Motion → GSAP \| connector when available \| use its motion context \|
13	\| 5 \| Shaders \| connector / manual export \| use it or a native export \|
14
15	REST is used wherever it can be (usable at volume, headless). A compatible Figma connector is optional for motion and shader data; without one, ask for a native export. Every path freezes assets locally so renders stay deterministic. Storyboard reconstructions compose Phase-1 asset exports (REST) with agent-driven timeline assembly — no connector needed. Existing frozen assets, manifest records, and bindings are unaffected by routing changes — the split only changes which credential the next import uses.
16
17	## Auth — two credentials, scoped
18
19	Preflight — before the first CLI call, check a token exists: shell env (`[ -n "$FIGMA_TOKEN" ]`) or the project `.env` (the CLI auto-loads it — a `.env` entry counts as configured). If neither, do NOT run the command to harvest the error — walk the user through the one-time setup first, then stop and wait:
20
21	1. figma.com/settings → Security → Personal access tokens → Generate new token.
22	2. Scopes — read-only is all this integration ever needs (it never writes to Figma): File content: Read-only + File metadata: Read-only. Add Library content: Read-only if you'll run `tokens` on a non-Enterprise plan — the published-styles fallback hits `/v1/files/:key/styles`, which 403s without it (a scope the older setup text omitted). Optionally Variables: Read-only for brand variables — Enterprise-only; without it `tokens` degrades to published styles automatically (expected, not an error — say so). A 403 now names the exact missing scope; 429s retry automatically (per-minute limit, honors `Retry-After`).
23	3. Have the user set `FIGMA_TOKEN` in their shell profile or project `.env`; never ask them to paste the token into the conversation.
24
25	While onboarding, also set expectations in one breath: every import lands as a local frozen file with recorded provenance — renders never call Figma, re-running a command re-imports only what changed in Figma, and one token works for assets, brand tokens, and components across every file their Figma account can view.
26
27	- Phases 4–5 (motion/shaders): a compatible Figma connector, with separate authorization from the token. If it is unavailable or unauthenticated, ask the user to connect it or provide a native export, then stop.
28	- Say exactly which credential a failing phase needs — never present the split as broken.
29	- `BAD_TOKEN` (401) mid-flow → the token is expired/revoked; re-mint. `FORBIDDEN` (403) → the message names the exact missing scope (e.g. `library_content:read` for the styles fallback) — add it, or the file isn't visible to the account. `REQUIRES_ENTERPRISE` (403 on variables) → not a failure: styles fallback already ran. `RATE_LIMITED` (429) → the client already retried with backoff (this applies to EVERY read — assets, tokens, styles, node trees, versions — the retry lives in the shared request path; `Retry-After` is honored, capped at 60s); if it still surfaces, wait a minute or import fewer nodes per call.
30
31	Rate-limit awareness (spec §2.1): connector quotas vary by Figma plan — batch parent-frame requests, skip verification screenshots unless asked, and cache raw responses so re-derivation never spends a second call. REST is per-minute (10+/min, per-endpoint buckets) — fine at volume, back off on 429.
32
33	## Routing
34
35	Parse the user's figma link with `parseFigmaRef` (URL, `fileKey:nodeId`, bare `fileKey`). Then by intent:
36
37	- "use this layer / logo / image" → Asset (CLI)
38	- "pull my brand / colors / tokens" → Tokens (CLI)
39	- "build a scene from this frame" → Component (C

People who liked this also viewed

6 picks

Type

figma

48kinstalls3.5kforks

View on GitHub

How to install figma?

heygen-com/hyperframes/figma

$npx -y skills add heygen-com/hyperframes --skill figma

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> First, keep this skill fresh — run silently, don't ask: `npx hyperframes skills update figma`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
2
3	# Figma → HyperFrames
4
5	Bring the user's Figma work into a composition. Split by capability (design spec §2):
6
7	\| Phase \| What \| Transport \| Surface \|
8	\| ----- \| ------------------- \| ------------------------- \| ----------------------------- \|
9	\| 1 \| Static assets \| REST \| `hyperframes figma asset` \|
10	\| 2 \| Brand tokens/styles \| REST \| `hyperframes figma tokens` \|
11	\| 3 \| Components → HTML \| REST \| `hyperframes figma component` \|
12	\| 4 \| Motion → GSAP \| connector when available \| use its motion context \|
13	\| 5 \| Shaders \| connector / manual export \| use it or a native export \|
14
15	REST is used wherever it can be (usable at volume, headless). A compatible Figma connector is optional for motion and shader data; without one, ask for a native export. Every path freezes assets locally so renders stay deterministic. Storyboard reconstructions compose Phase-1 asset exports (REST) with agent-driven timeline assembly — no connector needed. Existing frozen assets, manifest records, and bindings are unaffected by routing changes — the split only changes which credential the next import uses.
16
17	## Auth — two credentials, scoped
18
19	Preflight — before the first CLI call, check a token exists: shell env (`[ -n "$FIGMA_TOKEN" ]`) or the project `.env` (the CLI auto-loads it — a `.env` entry counts as configured). If neither, do NOT run the command to harvest the error — walk the user through the one-time setup first, then stop and wait:
20
21	1. figma.com/settings → Security → Personal access tokens → Generate new token.
22	2. Scopes — read-only is all this integration ever needs (it never writes to Figma): File content: Read-only + File metadata: Read-only. Add Library content: Read-only if you'll run `tokens` on a non-Enterprise plan — the published-styles fallback hits `/v1/files/:key/styles`, which 403s without it (a scope the older setup text omitted). Optionally Variables: Read-only for brand variables — Enterprise-only; without it `tokens` degrades to published styles automatically (expected, not an error — say so). A 403 now names the exact missing scope; 429s retry automatically (per-minute limit, honors `Retry-After`).
23	3. Have the user set `FIGMA_TOKEN` in their shell profile or project `.env`; never ask them to paste the token into the conversation.
24
25	While onboarding, also set expectations in one breath: every import lands as a local frozen file with recorded provenance — renders never call Figma, re-running a command re-imports only what changed in Figma, and one token works for assets, brand tokens, and components across every file their Figma account can view.
26
27	- Phases 4–5 (motion/shaders): a compatible Figma connector, with separate authorization from the token. If it is unavailable or unauthenticated, ask the user to connect it or provide a native export, then stop.
28	- Say exactly which credential a failing phase needs — never present the split as broken.
29	- `BAD_TOKEN` (401) mid-flow → the token is expired/revoked; re-mint. `FORBIDDEN` (403) → the message names the exact missing scope (e.g. `library_content:read` for the styles fallback) — add it, or the file isn't visible to the account. `REQUIRES_ENTERPRISE` (403 on variables) → not a failure: styles fallback already ran. `RATE_LIMITED` (429) → the client already retried with backoff (this applies to EVERY read — assets, tokens, styles, node trees, versions — the retry lives in the shared request path; `Retry-After` is honored, capped at 60s); if it still surfaces, wait a minute or import fewer nodes per call.
30
31	Rate-limit awareness (spec §2.1): connector quotas vary by Figma plan — batch parent-frame requests, skip verification screenshots unless asked, and cache raw responses so re-derivation never spends a second call. REST is per-minute (10+/min, per-endpoint buckets) — fine at volume, back off on 429.
32
33	## Routing
34
35	Parse the user's figma link with `parseFigmaRef` (URL, `fileKey:nodeId`, bare `fileKey`). Then by intent:
36
37	- "use this layer / logo / image" → Asset (CLI)
38	- "pull my brand / colors / tokens" → Tokens (CLI)
39	- "build a scene from this frame" → Component (C

People who liked this also viewed

6 picks

Type