Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the…
Install Figma To Section
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install textura-agency/next16-claude-starter figma-to-section --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/figma-to-section .claude/skills/figma-to-section && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .claude/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-sectionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install textura-agency/next16-claude-starter figma-to-section --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/figma-to-section .agents/skills/figma-to-section && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .agents/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install textura-agency/next16-claude-starter figma-to-section --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/figma-to-section .cursor/skills/figma-to-section && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .cursor/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/textura-agency/next16-claude-starter.git --path .claude/skills/figma-to-section--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install textura-agency/next16-claude-starter figma-to-section --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/figma-to-section .gemini/skills/figma-to-section && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .gemini/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install textura-agency/next16-claude-starter figma-to-sectionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/figma-to-section .github/skills/figma-to-section && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .github/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install textura-agency/next16-claude-starter figma-to-section --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/figma-to-section .opencode/skills/figma-to-section && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-section" agent skill from https://github.com/textura-agency/next16-claude-starter/tree/main/.claude/skills/figma-to-section into .opencode/skills/figma-to-section/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-section", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
figma-to-section- GitHub stars
- 135
- Token cost
- ~1.4k tokens
- SKILL.md length
- 675 words
- Files
- 1
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- Unlicense
At a glance
Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the…
- Works in 6 steps: Extract, in this order → Record what you fetched → Assets → …
- The user provides a Figma URL
- SKILL.md covers 1. Extract, in this order, 2. Record what you fetched, 3. Assets and 4. Values → tokens (do not…, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Figma To Section is an agent skill from textura-agency/next16-claude-starter. Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the three-tier token system, and choosing spring primitives for whatever motion the design implies. Use when the user provides a Figma URL, says "build this section", "implement the design", "match the Figma", or hands over a frame to code up.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with Figma and Model Context Protocol. The repository describes itself as: AI-first Next.js 16 starter for animation-heavy sites, wired with an Obsidian vault & Claude Code hooks. The licence is Unlicense.
When your agent uses it
- The user provides a Figma URL
- Says build this section
- Implement the design
- Match the Figma
Example prompts
- “build this section”
- “implement the design”
- “match the Figma”
- “/figma-to-section”
Requirements
- Pre-approved tools (allowed-tools): Bash, Read, Grep, Glob, Edit, Write
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 1170942. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
BashReadGrepGlobEditWrite
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Figma To Section loads about 1.4k tokens when it runs. Until then it costs about 113 tokens; SKILL.md has 675 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Bash, Read, Grep, Glob, Edit, Write
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from textura-agency/next16-claude-starter at commit 1170942, republished under its Unlicense licence (© textura-agency). 675 words, ~1,416 tokens.
Download SKILL.mdSave it as
.claude/skills/figma-to-section/SKILL.md (or your agent's skills folder).- name
- figma-to-section
- description
- Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the three-tier token system, and choosing spring primitives for whatever motion the design implies. Use when the user provides a Figma URL, says "build this section", "implement the design", "match the Figma", or hands over a frame to code up.
- allowed-tools
- Bash, Read, Grep, Glob, Edit, Write
Figma → section
Build from live Figma data, never from a text description, a summary you wrote earlier, or memory. Descriptions lose exactly the values that matter.
1. Extract, in this order
get_metadata— file structure, pages, top-level frames. Gives you thefileKeyand the node IDs.get_design_contexton the target node — exact text, colours, typography, spacing, layout, asset URLs. This is the source of truth for values.get_screenshoton the same node — the source of truth for layout: column count, direction, alignment, order, positioning.
Both. get_design_context will not tell you a layout reads as three columns;
the screenshot will not tell you the gap is 28px.
2. Record what you fetched
Write DESIGN-MAP.md at the repo root (gitignored or committed, user's call):
**Figma file key:** `<fileKey>`
**Source URL:** <url>
**Frame width:** <px> ← the design base width; check it against the adaptive grid
| Section | Node ID | View / component | Background | Notes |
|---------|---------|------------------|------------|-------|
| Hero | `1:234` | views/home → Hero | full-bleed image | h1 lives here |Every section needs its node ID. QA and any later pass re-fetch from these — a section without a node ID cannot be verified against its design later.
3. Assets
get_design_context returns asset URLs that expire (~7 days). Download
immediately.
- Save to
public/assets/<section>/— one folder per section (obsidian/architecture/folder-structure.md). Meta/PWA assets stay atpublic/root. - kebab-case, prefixed by section:
hero-background.webp,team-jane-doe.webp,icon-arrow.svg. - Verify each file after download: run
file <path>. Figma often returns an SVG where you asked for a raster, or a PNG named.jpg. Rename to match the real type — a mismatched extension renders as a broken image. - Sanity-check size: a content photo under ~5KB is almost certainly a vector placeholder, not the intended export. Flag it; do not ship it.
- Prefer
.webp/.aviffor photos.next/imagewith explicitwidth/height. - If a download fails: use a placeholder, add a comment saying why, and tell the user immediately — never silently skip an asset.
4. Values → tokens (do not skip to markup)
Before writing JSX, map the design's values onto the token system
(obsidian/frontend/design-system.md):
- Every colour becomes a
--raw-*primitive plus a semantic Tier 2 token naming its purpose.--raw-color-brand-500+--action-primary, never--blue-500used directly in markup. - Spacing/radius/type values: reuse an existing token if one matches; otherwise add one, with a comment naming the Figma frame it came from.
- A value you cannot justify as a token is a design-review flag for your summary, not a magic number in a class name.
- This project scales the root font-size with the viewport, so design px map to
remcleanly at the design base width. Check the frame width against the breakpoints inglobals.cssbefore converting anything.
Show full SKILL.md (279 more words)Show less
5. Build
Follow obsidian/workflows/new-page.md. Specific to design work:
- Copy is character-for-character from
get_design_context. Never rewrite, shorten or invent — even if the design's copy reads badly. Flag it instead. - Do not invent visual features. No shadows, gradients, overlays, hovers or card wrappers that are not in the design. An invented wrapper background is the single most common cause of "the logo disappeared".
- Do add the motion this starter is for — that is the one place we
deliberately go beyond a static Figma frame. Reveals, parallax and text
animation are the house style; use
Inview/SpringTrigger/ the text engine and keep it restrained. If the user wants a literal static translation, they will say so. - Content comes in as props (mocks under
src/data/mocks/<page>.tsuntil real data or the CMS exists) — never hardcoded in the component. - Semantic markup and the correct
tagon every animation component. - First-screen sections use the robot twins (
robot-spring,robot-text,robot-inview,robot-hoverinsrc/components/common/) so crawlers get the copy at rest; below-fold text engines takelazy; everyloop:readsuseMotionOff()(optimize-load/references/robot-path.md). - Phone frames are layouts, not coordinates. Build the phone design in flow
(flex/grid, a page gutter token) — absolutely positioning every element from a
390-wide frame made a later "1rem side padding" request a 30-file change on a
production site. Split-letter headlines group letters per word
(
white-space: nowrap) so they never break mid-word; checkscrollWidth === innerWidthat 320–430. Scene boxes arelvh, menusdvh+ safe area (mobile-device-qa).
6. Finish
Run the qa-verify skill against the section before reporting done, and report:
new tokens added and why, values that could not map to tokens, any asset that
failed or looked wrong, and any copy you flagged rather than changed.
© textura-agency, Unlicense. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/figma-to-section of textura-agency/next16-claude-starter.
Open the folder on GitHubat commit 1170942
Compare with similar skills
Figma To Section next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma To Section this skilltextura-agency/next16-claude-starter | 135 | — | ~1.4k | Automated safety check: Notes | Unlicense | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Code Connect Componentswarpdotdev/warp | 65k | 2 repos | ~4.2k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Screen Generatorwarpdotdev/warp | 65k | 2 repos | ~5k | Automated safety check: Pass | AGPL-3.0 | |
| Refero Designreferodesign/refero_skill | 299 | — | ~5.3k | Automated safety check: Pass | MIT |
Similar skills
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
Figma Screen Generator
warpdotdev/warp
Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.
Refero Design
referodesign/refero_skill
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…
- Official
Build Figma
cursor/plugins
Guides an agent through turning a Figma node into production UI with the repo's own components, then checks the result visually before finishing.
More from textura-agency/next16-claude-starter
All 16 skills in this repoMobile Device QA
textura-agency/next16-claude-starter
Make a site behave on real phones — the defects no Lighthouse run or headless scroll test sees, learned from site owners reviewing production sites on an iPhone.
Optimize Load
textura-agency/next16-claude-starter
Get a page into Lighthouse's green zone on desktop and mobile, for people AND for the robot form crawlers get — build it, audit all four categories (Performance, Accessibility, Best Practices, SEO)…
Optimize Performance
textura-agency/next16-claude-starter
Make a page in this starter actually smooth — build it, scroll it in real Chrome on PC and on an emulated phone, fix what the measurement blames, re-measure to prove it.
Payload Admin
textura-agency/next16-claude-starter
Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard…
Payload Cms
textura-agency/next16-claude-starter
Put a Payload CMS admin on a site built from this starter — every visible string and content photo editable, derived from the site's own content objects with the code's copy as the fallback, a…
Aeo Visibility
textura-agency/next16-claude-starter
Answer Engine Optimisation — make the site citable by ChatGPT, Claude, Perplexity, Gemini and AI Overviews.
Related
Works with
Categories
Questions about Figma To Section
What does Figma To Section do?
Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the…. Figma To Section is an agent skill from textura-agency/next16-claude-starter. Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the three-tier token system, and choosing spring primitives for whatever motion the design implies.
When should I use Figma To Section?
Figma To Section fits situations like: the user provides a Figma URL; says build this section; implement the design; match the Figma.
How do I install Figma To Section in Claude Code?
Run `npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a claude-code`. Or copy the skill folder (.claude/skills/figma-to-section in textura-agency/next16-claude-starter) into .claude/skills/figma-to-section in your project. Claude Code loads it when a task matches its description.
How do I install Figma To Section in Codex?
Run `npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a codex`. Or copy the skill folder (.claude/skills/figma-to-section in textura-agency/next16-claude-starter) into .agents/skills/figma-to-section in your project. Codex loads it when a task matches its description.
Can I use Figma To Section in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add textura-agency/next16-claude-starter --skill figma-to-section -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-to-section, .gemini/skills/figma-to-section, .github/skills/figma-to-section and .opencode/skills/figma-to-section in your project.
What does Figma To Section need to run?
SKILL.md names no scripts, command-line tools or credentials: Figma To Section is instructions for the agent only. Its frontmatter pre-approves these tools: Bash, Read, Grep, Glob, Edit, Write.
Does Figma To Section access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma To Section safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Figma To Section use?
Figma To Section is published under the Unlicense licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Figma To Section use?
About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Figma To Section?
Skills that share tags, products or a category with Figma To Section: Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars), Figma Code Connect Components (warpdotdev/warp, 65k stars) and Figma Screen Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma To Section?
textura-agency (a GitHub organization) maintains it in textura-agency/next16-claude-starter, which has 135 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 10, 2026.
Source: textura-agency/next16-claude-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.