skills.rest
rp4ri
rp4riCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-creator

Create and manipulate Figma designs with auto-layout and design tokens.

Updated Jun 2, 2026
Search Tags:#design tokens#Figma#auto-layout#design creation#component set
One-click install
npx skills add https://github.com/rp4ri/pi-studios --skill figma-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-creator
Source: https://github.com/rp4ri/pi-studios/tree/main/design-studio/skills/figma-creator
Command: npx skills add https://github.com/rp4ri/pi-studios --skill figma-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for efficient design creation and manipulation within Figma, streamlining the process of building visual designs programmatically.

Core Features & Use Cases

  • Figma Design Creation: Offers tools to create page structures, frames, and layouts in Figma.
  • Auto-Layout Composition: Facilitates building compositions with proper spacing and alignment.
  • Component Sets & Styles: Generates component sets and applies paint and text styles for consistency.
  • Design Tokens: Sets up design tokens as variables for consistent branding.
  • Validation: Provides screenshot validation after each major creation step.
  • Use Case: Ideal for UI/UX designers or product designers who need to build hi-fi screens or components within Figma.

Quick Start

To create a new page with auto-layout and apply a brand style, run the command: 'create page with auto-layout and apply brand style'.

Frequently Asked Questions about figma-creator

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

FAQPage Schema
How do I create Figma frames with auto-layout programmatically?▼

You can create Figma frames with auto-layout programmatically by using this Skill's async APIs to build page structures and apply proper spacing and alignment directly to Figma nodes.

What is the best way to apply design tokens as variables in Figma?▼

Applying design tokens as variables in Figma is done through this Skill, which sets up tokens as variables for consistent branding and applies paint and text styles across component sets.

Does Figma design creation require the Desktop Bridge for node manipulation?▼

Figma design creation requires the Desktop Bridge because this Skill relies on async APIs to manipulate Figma nodes, generate component sets, and ensure proper naming and validation of design elements.

How do I validate visual designs after creating components in Figma?▼

To validate visual designs after creating components in Figma, this Skill provides screenshot validation after each major creation step to ensure proper rendering of auto-layout and component sets.

Can I generate component sets and apply text styles in Figma automatically?▼

You can generate component sets and apply text styles in Figma automatically, as this Skill facilitates building compositions and applies paint and text styles for visual consistency across designs.

Related Skills

Explore More Design & Creative Skills→
redongreenredongreen
236

create-color

Generate color annotation tables mapping Figma UI elements to design tokens.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
manutejmanutej
61

figma-design

Automate Figma design workflows for plugin development and design-system management.

Community
Advanced
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate