skills.rest
ahandsel
ahandselCOMMUNITY
Explore all skills by this author →
GitHub

figma-use

Execute JavaScript in the Figma Plugin API to manipulate design nodes.

1|Updated May 21, 2020
Search Tags:#automation#javascript#figma#ui-development#design-systems#plugin-api
One-click install
npx skills add https://github.com/ahandsel/debugging_log --skill figma-use-ahandsel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/ahandsel/debugging_log/tree/main/skills/figma-use
Command: npx skills add https://github.com/ahandsel/debugging_log --skill figma-use-ahandsel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of programmatically interacting with Figma files, allowing for automated design tasks that would otherwise require manual, repetitive effort in the Figma editor.

Core Features & Use Cases

  • Programmatic Design Manipulation: Create, edit, and delete nodes, manage auto-layout, and build components or variants via the Plugin API.
  • Design System Management: Bind variables to properties, build design tokens, and assemble complex screens incrementally.
  • Use Case: If you need to generate a series of UI screens based on a JSON data source, this skill allows you to script the creation of frames, text nodes, and component instances, ensuring consistency and speed.

Quick Start

Use the figma-use skill to create a new auto-layout frame named Main Container and add a text node inside it.

Frequently Asked Questions about figma-use

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

FAQPage Schema
How do I automate UI generation in Figma using JavaScript?▼

You can automate Figma design tasks by executing JavaScript within the Plugin API environment to manipulate design nodes and component structures. This allows programmatic creation of frames, text nodes, and component instances from data sources.

What is the best way to manage design system variables programmatically in Figma?▼

Managing design system variables programmatically involves using the Figma Plugin API to bind variables to properties and build design tokens. This facilitates automated design system maintenance, allowing incremental assembly of complex screens.

Can I use the Figma Plugin API to generate multiple screens from a JSON data source?▼

Yes, you can use the Figma Plugin API to generate UI screens from a JSON data source by scripting the creation of frames, text nodes, and component instances. This ensures consistency and speed across generated designs.

Does Figma automation work across design, FigJam, and Slides modes?▼

Figma automation via the Plugin API supports programmatic file inspection and node manipulation across design, FigJam, and Slides modes. It requires strict adherence to atomic script execution and incremental node mutation patterns.

What are the limitations of automating Figma design node manipulation via scripts?▼

Limitations of Figma automation scripts include the requirement for strict atomic script execution and specific font loading recipes. Incremental node mutation patterns must be followed to avoid errors when manipulating complex component structures.

Related Skills

Explore More Design & Creative Skills→
Luohao-YanLuohao-Yan
6

figma-use

Execute JavaScript scripts to manipulate Figma files via the Plugin API.

Community
Advanced
AradotsoAradotso
3

figma-console-mcp-design-system-api

Synchronize Figma design tokens and components with code-ready formats.

Official
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
xlelibertyxleliberty

figma-use

Execute JavaScript code in the Figma Plugin API to manipulate design nodes.

Community
Advanced