figma-expert

figma-expert is a skill for Claude Code, Codex from librefang/librefang-registry. It costs 22 tokens per session (728 once invoked), scanned A, a copy of figma-expert, MIT.

Guidance for designing interfaces in Figma, a collaborative tool for making screen designs and prototypes. It covers reusable components, responsive layouts, design variables, and developer handoff.

In plain words
What is it for?
Use it to create component libraries, configure auto-layout, define colors and spacing as reusable variables, handle long or unusual content, and document designs for developers.
Why use it?
It helps keep designs consistent and reduces the gap between what designers create and what engineers build.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/librefang/librefang-registry/figma-expert
Any agent
npx skills add librefang/librefang-registry --skill figma-expert
Clone the repo
git clone --depth 1 https://github.com/librefang/librefang-registry

Made for: Claude Code, Codex.

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-expert

README.md
[![agentmods](https://agentmods.dev/badge/skills/librefang/librefang-registry/figma-expert.svg)](https://agentmods.dev/skills/librefang/librefang-registry/figma-expert)
Your own site
<a href="https://agentmods.dev/skills/librefang/librefang-registry/figma-expert"><img src="https://agentmods.dev/badge/skills/librefang/librefang-registry/figma-expert.svg" alt="Measured on agentmods" height="20"></a>
Per session 22 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 728 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 97% copy Near-identical to another mod 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 $0.00022 $0.00728
Opus 5 $0.00011 $0.00364
Sonnet 5 $0.00004 $0.00146
Haiku 4.5 $0.00002 $0.00073

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

Security

Grade A, and why

figma-expert 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.

Origin

This is a copy

97% identical to figma-expert — 3 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/figma-expert/SKILL.md · 43 lines

How it starts

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

Figma Expert

A product designer and design systems architect with deep expertise in Figma's component system, auto-layout, prototyping, and developer handoff workflows. This skill provides guidance for building scalable design systems, creating maintainable component libraries, and ensuring smooth collaboration between designers and engineers through precise specifications and token-driven design.

Key Principles

  • Build components with auto-layout from the start; it ensures consistent spacing, responsive resizing, and alignment with how CSS flexbox renders in production
  • Use variants and component properties to reduce component sprawl; a single button component with size, state, and icon properties replaces dozens of separate frames
  • Establish design tokens (colors, typography, spacing, radii) as Figma variables and reference them everywhere instead of hardcoding values
  • Separate styles (visual appearance) from variables (semantic tokens); variables enable theming and mode switching (light/dark, brand A/brand B)
  • Design with real content and edge cases; placeholder text hides layout issues that surface when actual data varies in length and complexity

Techniques

  • Configure auto-layout with padding (top, right, bottom, left), gap between items, and primary axis alignment (packed, space-between) for flexible container behavior
  • Create component variants using the variant property panel: define axes like Size (sm, md, lg), State (default, hover, disabled), and Type (primary, secondary)
  • Define a type scale using Figma text styles with consistent size, weight, and line-height ratios; map them to semantic names (heading-lg, body-md, caption)
  • Build interactive prototypes with smart animate transitions between component variants for micro-interaction demonstrations
  • Use the Figma Plugin API to automate repetitive tasks: batch-renaming layers, generating color palettes, or exporting design tokens to JSON
  • Leverage Dev Mode for handoff: inspect spacing, export assets, and copy CSS/iOS/Android code snippets directly from the design
  • Structure design system files with a cover page, a changelog page, and dedicated pages per component category (buttons, inputs, navigation, feedback)

Read the full file on GitHub · 43 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. 5d ago First seen · 43 lines · 22 tokens per session scan A d3e8f4d4533b

Subscribe to this mod's changes

figma-expert is a skill published in the GitHub repository librefang/librefang-registry (11 stars, last pushed 11d ago), licensed MIT. It adds 22 tokens to every session and 728 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 97% identical to figma-expert, differing in 3 lines, and is treated as a copy.

Related

Other skills, from other repositories

edgeone skill scanner

Scan any agent skill for security risks before you install or use it. Powered by Tencent Zhuque Lab A.I.G (AI-Infra-Guard). 100% local static analysis — no file contents or credentials leave your device. Compatible with CodeBuddy, Cursor, Windsurf, Claude Code, OpenClaw and more. Triggers on: 这个 skill 安全吗, skill 安全扫描…

Tencent/AI-Infra-Guard · 148 tokens

continual-learning

Nightly refinement of an existing per-repo review-style prompt using this reviewer's own finding outcomes. Read confirmed (resolved-by-commit / thumbs-up) and dismissed (thumbs-down) findings, promote the bug patterns the team actually fixes, demote the false-positive patterns, reconcile against the current prompt…

langchain-ai/open-swe · 89 tokens

nano-banana-pro-openrouter

Deterministic OpenRouter image generation adapter for Nano Banana Pro / Gemini image models. Use as skillexec when a meta-skill needs local image files and structured IMAGEREADY records without spawning an LLM agent.

opensquilla/opensquilla · 49 tokens

skill-creator-linter

Internal tool (not user-invocable). Called by meta-skill-creator as a DAG step (kind: agent) to lint a candidate meta-skill SKILL.md against G1 (parse + reference check + xmlescape grep + structural lint) and G2 (scheduler dry-run with stub executors). Deterministic, sub-second, no LLM. Returns JSON diagnostics.

opensquilla/opensquilla · 84 tokens

paper-abstract-author

Write the abstract after the paper body has been revised, using the final claims and evidence.

opensquilla/opensquilla · 23 tokens

statsmodels

Statistical models library for Python. Use when you need specific model classes (OLS, GLM, mixed models, ARIMA) with detailed diagnostics, residuals, and inference. Best for econometrics, time series, rigorous inference with coefficient tables. For guided statistical test selection with APA reporting use…

synthetic-sciences/openscience · 65 tokens