skills.rest
HealthSamurai
HealthSamuraiOFFICIAL
Explore all skills by this author →
Website𝕏@health_samuraiGitHub

figma-use

Automate Figma design tasks via CLI and declarative JSX.

Updated Aug 23, 2026
Search Tags:#design system#cli#figma#design automation#component generation#jsx#ux/ui
One-click install
npx skills add https://github.com/HealthSamurai/health-samurai-io-bun --skill figma-use-healthsamurai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/HealthSamurai/health-samurai-io-bun/tree/main/skills/figma-use
Command: npx skills add https://github.com/HealthSamurai/health-samurai-io-bun --skill figma-use-healthsamurai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation and modification of designs within Figma, bridging the gap between design and development through a command-line interface and declarative JSX syntax.

Core Features & Use Cases

  • Design Automation: Create shapes, frames, text, icons, and components programmatically.
  • Style Management: Apply fills, strokes, layout constraints, and text styles.
  • Exporting & Round-tripping: Export designs to JSX, Storybook, or images, and re-import modified JSX.
  • Analysis & Linting: Audit designs for consistency, accessibility, and adherence to design tokens.
  • Use Case: Automatically generate a set of UI buttons with different variants and states based on a design system, or export existing Figma components into a Storybook format for developer handoff.

Quick Start

Use figma-use to create a frame with a blue background and a text layer saying "Hello, World!".

Frequently Asked Questions about figma-use

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

FAQPage Schema
How do I automate Figma design tasks programmatically?▼

You can automate Figma design tasks by using a CLI and declarative JSX syntax to programmatically create, manipulate, and manage shapes, frames, text, and components.

Can I export Figma components to Storybook for developer handoff?▼

Yes, you can export existing Figma components into Storybook format or images, and re-import modified JSX to facilitate round-trip workflows between code and design.

How do I audit a Figma design system for accessibility and consistency?▼

You can audit Figma designs for consistency, accessibility, and adherence to design tokens by running linting and analysis commands through the CLI.

Does this approach support generating UI components with different variants and states?▼

Yes, you can automatically generate a set of UI buttons with different variants and states based on a design system using imperative commands and declarative JSX rendering.

What is the best way to control Figma layouts, styles, and variables with code?▼

The best way to control Figma layouts and styles is using declarative JSX rendering to programmatically apply fills, strokes, layout constraints, text styles, and variables.

Can I use JSX to create and manipulate Figma design elements?▼

Yes, JSX rendering enables you to create and manipulate design elements like shapes, frames, text, icons, and components directly within Figma via a command-line interface.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
AIS-Commercial-Business-UnitAIS-Commercial-Business-Unit

ais-ux-design-system-bridge

Normalize and port design system rules across Figma tokens, Storybook components, and project code.

Official
Advanced
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
mnltmnlt
8

figma

Automates reading Figma design data and exporting assets via REST API.

Community
Advanced