skills.rest
artosetrov
artosetrovCOMMUNITY
Explore all skills by this author →
GitHub

cc-figma-component

Generate Figma component sets from component contracts and semantic token bindings.

Updated Mar 5, 2026
Search Tags:#automation#figma#component#tokens#wireframes#design-system#contract
One-click install
npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill cc-figma-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cc-figma-component
Source: https://github.com/artosetrov/iron-fist-arena-backend/tree/main/.claude/skills/cc-figma-component
Command: npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill cc-figma-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate a Figma component set directly from a contract definition, enabling teams to synchronize design components with system contracts and semantic tokens.

Core Features & Use Cases

  • Reads a component contract and derives Tier 3 tokens to generate a fully bound component set in Figma
  • Supports multiple variants per component and aligns visuals to semantic variables
  • Use Case: When a Button contract defines colors, spacings, and states, this skill creates a Button component set in Figma with proper variant axes and bindings

Quick Start

Run cc-figma-component with the component contract placed in CONTRACTS_DIR to generate the corresponding Figma component set.

Frequently Asked Questions about cc-figma-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Figma component sets from a design system contract?▼

You can generate Figma component sets from contracts by defining component properties, colors, spacings, and states in a contract file, then running the skill to derive Tier 3 tokens and build variant matrices aligned to semantic variables.

What are Tier 3 tokens in a design system and how are they derived?▼

Tier 3 tokens are component-specific design tokens derived from semantic token bindings. The skill automatically calculates them during generation to ensure component variants align with the semantic variables defined in your contract.

Can I automate Figma component variant creation from semantic token bindings?▼

Yes, you can automate Figma component variant creation from semantic token bindings. The skill reads your component contract and automatically builds component sets with strict variant architectures aligned to your semantic variables.

Do I need a specific file format to define component contracts for Figma generation?▼

You need to provide a component contract placed in the CONTRACTS_DIR directory. This contract should define component properties, colors, spacings, and states to enable successful token derivation and Figma component set generation.

How do I wire Figma components to semantic variables using a contract?▼

To wire Figma components to semantic variables, the skill validates the semantic token bindings defined in your contract and automatically aligns the generated component visuals to those variables during the component set generation process.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced
allofmengallofmeng
12

implement-design

Translate Figma designs into UI code using design tokens and MCP context.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
artosetrovartosetrov

cc-figma-tokens

Create Primate and Semantic Figma collections from component-contracts token files with alias relationships.

Community
Advanced