design-figma

Create and edit Figma designs programmatically via browser automation.

11|2|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/manushi4/Screenhand --skill design-figma
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-figma
Source: https://github.com/manushi4/Screenhand/tree/main/.claude/plugins/screenhand/skills/design-figma
Command: npx skills add https://github.com/manushi4/Screenhand --skill design-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Figma design automation via ScreenHand enables creating and editing frames, shapes, text, components, and layouts directly in the browser, speeding up design iterations without manual clicking.

Core Features & Use Cases

  • Plugin API Mode: Use browser_js to call the Figma Plugin API for reliable, code-driven design changes.
  • UI Automation: Use browser_dom and browser_click to interact with panels, toolbars, and the canvas for design workflows.
  • Export & Style: Apply auto-layout, fills, effects, and export assets from designs; update components and variants.
  • Use Case: Quickly create a responsive frame with text and a button, then export assets for handoff.

Quick Start

Open a Figma file and use ScreenHand to create and edit frames, shapes, text, and components via browser automation.

Frequently Asked Questions about design-figma

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

FAQPage Schema
How do I automate Figma design creation directly in the browser?

Automate Figma design creation by using browser automation to call the Figma Plugin API and interact with DOM elements. This enables code-driven creation and editing of frames, shapes, text, and components without manual clicking.

What is the best way to programmatically apply auto-layout and export assets in Figma?

Programmatically apply auto-layout and export assets in Figma through browser automation calls. This approach handles fills, effects, and asset exports directly, speeding up design iterations and handoff.

Can I use browser automation to update Figma components and variants?

Yes, you can update Figma components and variants using browser automation. By interacting with the Figma Plugin API and DOM, you can programmatically modify existing design elements and their properties.

Does Figma browser automation require a specific plugin setup to create frames?

Figma browser automation requires an open Figma file and uses browser automation to interact with the Figma Plugin API and DOM. It does not rely on traditional manual plugin installation, operating via code-driven browser calls instead.

Why use code-driven Figma automation instead of manual design workflows?

Code-driven Figma automation solves the problem of slow, manual design work by enabling programmable creation and editing of designs. It accelerates iterations by automating repetitive tasks like creating frames, applying auto-layout, and exporting assets.

What are the limitations of automating Figma UI through browser DOM interactions?

Automating Figma UI through browser DOM interactions is limited to actions supported by the Figma Plugin API and accessible DOM elements. Complex canvas interactions may require precise browser automation calls and a stable browser environment.