Help us improve
Share bugs, ideas, or general feedback.
From claude2figma
Runs a preflight checklist before Figma design work: verifies MCP connection, audits libraries, loads styles/variables/components, and builds a Token Map.
npx claudepluginhub senlindesign/claude2figma --plugin claude2figmaHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude2figma:figma-preflightThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Run at the start of every design session. Do NOT start design work until all steps pass.
Automates design review, token extraction, component mapping, and implementation planning from Figma. Reduces design handoff from hours to minutes.
Audits Figma variable collections against three-tier token architecture best practices, checking naming conventions, tier separation, alias chains, mode coverage, orphans, and DTCG readiness. For Figma-native design systems.
Executes JavaScript in Figma files via Plugin API for creating/editing nodes, variables, components, and inspecting structure. Must be loaded before every use_figma call.
Share bugs, ideas, or general feedback.
Run at the start of every design session. Do NOT start design work until all steps pass.
Prerequisite: Load figma-use skill before any use_figma call.
Run these two in parallel:
mcp__figma__whoami. Must return user email and plan. Fail → stop, re-authenticate.Parse fileKey from the Figma URL, then run in parallel:
get_metadata with extracted nodeId and fileKey. Must return file name and pages.get_libraries with fileKey. Store subscribed libraries as Library Registry (name, libraryKey, description). These enable search_design_system to find library styles and components during design work.Combine all three inventories in one script:
const textStyles = await figma.getLocalTextStylesAsync();
const paintStyles = await figma.getLocalPaintStylesAsync();
const collections = await figma.variables.getLocalVariableCollectionsAsync();
const variables = await figma.variables.getLocalVariablesAsync();
const grouped = {};
for (const v of variables) {
const key = v.resolvedType;
if (!grouped[key]) grouped[key] = [];
grouped[key].push({ name: v.name, scopes: v.scopes });
}
const components = {};
for (const page of figma.root.children) {
await figma.setCurrentPageAsync(page);
const sets = page.findAll(n => n.type === "COMPONENT_SET");
const solos = page.findAll(n => n.type === "COMPONENT" && n.parent.type !== "COMPONENT_SET");
if (sets.length > 0 || solos.length > 0) {
components[page.name] = {
sets: sets.map(c => c.name),
solos: solos.map(c => c.name).slice(0, 15),
};
}
}
return {
textStyles: textStyles.map(s => s.name),
paintStyles: paintStyles.map(s => s.name),
collections: collections.map(c => c.name),
variableCount: variables.length,
byType: Object.fromEntries(
Object.entries(grouped).map(([type, vars]) => [type, vars.map(v => v.name)])
),
components
};
Store names only in context. IDs are looked up on-demand during design work. Library styles/variables are discovered via search_design_system.
After Step C, derive a semantic index from variables grouped by scopes:
| Role | Scope | Example names |
|---|---|---|
| Background fill | FRAME_FILL, SHAPE_FILL | background/surface, color/neutral-100 |
| Text color | TEXT_FILL | text/primary, color/neutral-900 |
| Border / stroke | STROKE_COLOR | border/default, color/neutral-300 |
| Gap | GAP | gap/sm, spacing/xxs |
| Padding | PADDING | padding/md, spacing/section-xl |
| Border radius | CORNER_RADIUS | radius/sm, radius/full |
✅ MCP Connection — [name] ([email]) · [plan]
✅ CLAUDE.md — Font: [primary] / [code] · Goal: [goal]
✅ Figma File — [file name] · [N] pages
✅ Libraries — [N] connected: [names]
✅ Styles — [N] text + [N] paint
✅ Variables — [N] across [N] collections
✅ Components — [N] sets across [N] pages
── Token Map ──────────────────────────────
Background : [names]
Text : [names]
Border : [names]
Gap : [names]
Padding : [names]
Radius : [names]
────────────────────────────────────────────
Ready to design.
If any step fails, output ❌ with error and stop.