figma-ops

figma-ops is a skill for Claude Code from 0xDarkMatter/claude-mods. It costs 135 tokens per session (4,233 once invoked), scanned A, original, MIT.

A workflow for planning and composing work in Figma, a collaborative interface-design tool, through its official integration. It routes requests to the right Figma tool and supports arranging screenshots, references, moodboards, and design boards.

In plain words
What is it for?
Use it to capture images into a Figma file, build moodboards or reference boards, arrange items on a canvas, and route design-to-code or canvas-editing requests.
Why use it?
Figma tasks can require different tools and careful layout decisions. This workflow helps choose the right operation and keeps imported visual material organised and consistent.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: names the AskUserQuestion tool; mentions Claude Code.

Part of the claude-mods plugin — 112 skills, 3 commands, 3 agents, 4 hooks shipped together

Good fit Use it to capture images into a Figma file, build moodboards or reference boards, arrange items on a canvas, and route design-to-code or canvas-editing requests.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/0xdarkmatter/claude-mods/figma-ops
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 0xDarkMatter/claude-mods --skill figma-ops
Clone the repo
git clone --depth 1 https://github.com/0xDarkMatter/claude-mods

Made for: Claude Code.

Or install claude-mods, the plugin that ships this one along with the rest of its 112 skills, 3 commands, 3 agents, 4 hooks.

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.

agentmods badge for figma-ops

README.md
[![agentmods](https://agentmods.dev/badge/skills/0xdarkmatter/claude-mods/figma-ops/github.svg)](https://agentmods.dev/skills/0xdarkmatter/claude-mods/figma-ops)
Your own site
<a href="https://agentmods.dev/skills/0xdarkmatter/claude-mods/figma-ops"><img src="https://agentmods.dev/badge/skills/0xdarkmatter/claude-mods/figma-ops/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.

agentmods 80×15 button for figma-ops

Your own site · 80×15
<a href="https://agentmods.dev/skills/0xdarkmatter/claude-mods/figma-ops"><img src="https://agentmods.dev/badge/skills/0xdarkmatter/claude-mods/figma-ops.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 135 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,233 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00135 $0.04233
Opus 5.5 $0.00054 $0.01693
Sonnet 5.5 $0.00027 $0.00847
Haiku 4.5 $0.00014 $0.00423

Measured 1mo ago against content hash baae96f3d0df, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

figma-ops scanned grade A with 1 finding 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 1mo ago.

The scan reads SKILL.md. This mod also ships 7 executable files (scripts/emit-placement.mjs, scripts/plan-layout.mjs, scripts/stage-assets.mjs, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

- **Renders go to the user.** `curl` the screenshot URL to `design/exports/` and send
skills/figma-ops/SKILL.md · 261 lines

How it starts

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

Figma Operations

The front door for Figma work. The official Figma plugin ships eleven skills that own the Plugin API surface; the community ships fifty more for tokens, components, a11y and docs. This skill does not replicate any of them. It does three things they don't:

  1. Routes — says which skill or tool to load for a given job (§1).
  2. Composes — capture → curate → arrange workflows for moodboards, reference boards and any "put these images in Figma, beautifully" request (§3–§5).
  3. Guards — the canvas craft rules that sit above the API rules: aspect ratio, z-order, overlap budgets, verification loops, page hygiene (§6).

Always load figma-use before any use_figma call. It is the source of truth for the Plugin API and its gotchas. This skill assumes it is loaded and cites its references rather than restating them.

1. Router — which skill for which job

The job Load Tool it wraps
Any script that mutates or reads the canvas figma-use (mandatory prerequisite) use_figma
Design → code, implement a screen the design-to-code guidance served as MCP resource skill://figma/figma-design-to-code/SKILL.md (not a plugin skill) get_design_context, get_screenshot
SwiftUI ↔ Figma, either direction figma-swiftui get_design_context, use_figma
Build a page/screen from app code figma-generate-design + figma-use use_figma, generate_figma_design
Tokens, variables, component library figma-generate-library + figma-use use_figma, search_design_system
Map components to code figma-code-connect Code Connect tools
New blank file figma-create-new-file create_new_file
Mermaid-class diagram in FigJam figma-generate-diagram generate_diagram
FigJam board content figma-use-figjam + figma-use use_figma
Slides deck figma-use-slides + figma-use use_figma
Motion / animation figma-use-motion, figma-implement-motion use_figma, get_motion_context
Images or SVGs into a file this skill §4 upload_assets
Moodboard, reference board, composed arrangement this skill §3–§5 upload_assets + use_figma
Live-site captures as source imagery shotcraft → this skill §4 —
Design-token export/import, a11y audits, variable CRUD community skills — see references/skill-map.md varies

Read the full file on GitHub · 261 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.

  1. 1mo ago First seen · 261 lines · 135 tokens per session scan A baae96f3d0df

Subscribe to this mod's changes

figma-ops is a skill published in the GitHub repository 0xDarkMatter/claude-mods (75 stars, last pushed 10d ago), licensed MIT. It adds 135 tokens to every session and 4,233 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-17.

Related

Other skills, from other repositories

brand-identity

Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.

travisjneuman/.claude · 30 tokens

generic-react-ux-designer

Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…

travisjneuman/.claude · 69 tokens

graphic-design

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

travisjneuman/.claude · 32 tokens

generic-ux-designer

Professional UX expertise for any project type. Covers user research, design thinking, interaction patterns, accessibility, and design critique. Use when designing new features, improving UX, conducting design reviews, or evaluating user flows. For visual UI work, combine with ui-research skill.

travisjneuman/.claude · 60 tokens

frontend-enhancer

Enhance the visual design of web apps: modern UI components, layout, responsive design, color palettes, animations. Use for styling and UI polish; pair with ui-research first for new design directions.

travisjneuman/.claude · 45 tokens

generic-design-system

Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.

travisjneuman/.claude · 60 tokens