What is figma-local-workflow?

A step-by-step workflow for working with the Figma Design file open in Figma Desktop through a local bridge. It covers inspecting the design, using available design-system assets, editing, comments, and exporting.

Analysing and editing Figma designs, synchronising or rearranging content, using design-system components, handling review comments, and exporting approved work.

It prevents the agent from guessing which Figma page, frame, component, or style to use before making changes.

figma-local-workflow — Skill for Claude Code by david-buck

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add david-buck/figma-local-bridge --skill figma-local-workflow

Clone the repo

git clone --depth 1 https://github.com/david-buck/figma-local-bridge

Made for: Claude Code.

Or install figma-local-bridge, the plugin that ships this one along with the rest of its 1 skill, 1 MCP server.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/david-buck/figma-local-bridge/figma-local-workflow/github.svg)](https://agentmods.dev/skills/david-buck/figma-local-bridge/figma-local-workflow)

Your own site

<a href="https://agentmods.dev/skills/david-buck/figma-local-bridge/figma-local-workflow"><img src="https://agentmods.dev/badge/skills/david-buck/figma-local-bridge/figma-local-workflow/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/david-buck/figma-local-bridge/figma-local-workflow"><img src="https://agentmods.dev/badge/skills/david-buck/figma-local-bridge/figma-local-workflow.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 124 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,311 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00124	$0.03311
Opus 5	$0.00062	$0.01656
Sonnet 5	$0.00025	$0.00662
Haiku 4.5	$0.00012	$0.00331

Measured 5d ago against content hash d9eda8a93798, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

figma-local-workflow scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/figma-local-workflow/SKILL.md · 134 lines

How it starts

The opening of the file, as written. The whole thing — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Local Figma workflow

Use an inspect-first sequence. Do not begin by querying arbitrary page nodes or editing the current selection.

Required sequence

Call figma_bridge_status. Continue only when exactly one plugin is connected, and use its reported page name to confirm the expected Figma context.
Call figma_get_user_preferences before choosing components, styles, tokens, typography, layout conventions, or copy patterns. Treat only returned confirmed preferences as durable user guidance.
When review feedback is relevant, call figma_comment_status, then figma_list_comments before editing. Comment access is optional; if it is unavailable, report the missing REST setup without blocking unrelated canvas work.
Call figma_list_design_system_assets, then figma_list_artboards. Discover verified component/style/token candidates and stable artboard IDs; never guess IDs or recreate an appropriate available component. If the relevant artboard is absent, call figma_list_pages, navigate with figma_navigate_to_page, then repeat discovery.
Identify the relevant artboard or page pair:
- Call figma_read_frame_content with detail: summary for one artboard.
- Call figma_read_spread_content with detail: summary for a spread, passing nodeIds in the order returned by figma_list_artboards.
- Request detail: full only when hierarchy or hidden variants are needed.
For routine copy-only work, use the structured read and figma_audit_text_overflow; do not export or screenshot by default. Export or screenshot only when layout, imagery, geometry or uncertain wrapping needs visual judgement.
Analyse copy and layout before proposing or making changes. Call figma_audit_text_overflow when text fit, truncation, clipping, or typography may matter.
Only then edit identified nodes. Prefer the narrowest appropriate mutation tool and preserve unrelated content.
Verify after editing:
- Re-read affected frame or spread content.
- Re-run the overflow audit when text or dimensions changed.
- Capture a screenshot only for uncertain wraps, adjacency or visual hierarchy; export a PNG only for a full-page/layout review, imagery or retained comparison.

Read the full file on GitHub · 134 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago Changed · +12 lines d9eda8a93798
9d ago First seen · 122 lines · 124 tokens per session scan A ebff7966ed7c

Subscribe to this mod's changes

figma-local-workflow is a skill published in the GitHub repository david-buck/figma-local-bridge (1 stars, last pushed 2d ago), licensed MIT. It adds 124 tokens to every session and 3,311 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code Design and UX codex figma mcp

create-anatomy

Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions "anatomy", "anatomy annotation", "component anatomy", "create anatomy", or wants to annotate a component's structural elements.

redongreen/uSpec · 59 tokens

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…

awdr74100/figwright · 145 tokens

create-component-md

Generate a canonical JSON contract and a self-contained implementation Markdown specification for a Figma component covering API, structure, color, and screen-reader behavior. Reads a base.json produced by the uSpec Extract plugin, runs four read-only interpretation skills in parallel, reconciles their outputs, and…

redongreen/uSpec · 107 tokens

create-voice

Generate screen reader accessibility specifications for VoiceOver (iOS), TalkBack (Android), and ARIA (Web). Use when the user mentions "voice", "voiceover", "screen reader", "accessibility spec", "talkback", "aria", or wants to create accessibility documentation for a UI component.

redongreen/uSpec · 66 tokens

create-color

Generate color annotation specifications mapping UI elements to design tokens. Use when the user mentions "color", "color annotation", "color spec", "tokens", "design tokens", or wants to document which color tokens a component uses.

redongreen/uSpec · 48 tokens

extract-api

Interpret a component's API (properties, sub-components, configuration examples) from the base.json produced by the uSpec Extract Figma plugin, and write the normalized JSON to disk. Read-only interpretation — no Figma calls except an optional tiny delta script. Use as a sub-skill of create-component-md.

redongreen/uSpec · 67 tokens