skills.rest
ryanallen
ryanallenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

designer-figma

Generate or update Figma designs using the Figma Console MCP.

Updated Aug 27, 2026
Search Tags:#automation#design#ui#figma#mcp#ux
One-click install
npx skills add https://github.com/ryanallen/product-studio --skill designer-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer-figma
Source: https://github.com/ryanallen/product-studio/tree/main/.claude/skills/designer-figma
Command: npx skills add https://github.com/ryanallen/product-studio --skill designer-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of generating or updating designs within Figma, streamlining the design workflow and reducing manual effort.

Core Features & Use Cases

  • Design Generation: Create new designs directly in Figma based on provided parameters.
  • Design Updates: Modify existing Figma designs programmatically.
  • Capture Flow Integration: Obtain necessary IDs and endpoints for design capture processes.
  • Use Case: A product manager needs to quickly visualize a new feature. They can use this skill to generate a basic wireframe in Figma based on a description, which a designer can then refine.

Quick Start

Use the designer-figma skill to generate a new design in the specified Figma file using the provided file URL and node ID.

Frequently Asked Questions about designer-figma

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

FAQPage Schema
How do I generate Figma designs automatically from text descriptions?▼

To generate Figma designs automatically, you can use this Skill to create new visual elements directly in Figma based on provided parameters and text descriptions. It leverages the Figma Console MCP to translate your input into design nodes within a specified file.

Can I update existing Figma designs programmatically using a file URL?▼

Yes, you can update existing Figma designs programmatically by providing the specific file URL, file key, and an optional parent node ID. This ensures precise design placement and modification within your existing Figma workspace.

Do I need the Figma Desktop Bridge to update Figma designs via MCP?▼

Yes, the Figma Desktop Bridge is required for specific functionalities like Prompt to Figma. You also need proper Figma Console MCP configuration and authentication to execute design generation or updates successfully.

How do I integrate Figma design generation with capture flows?▼

You integrate Figma design generation with capture flows by using this Skill to provide necessary capture IDs and endpoints. This connects your automated design output directly into your downstream capture processes.

What is the best way to visualize a new product feature in Figma without manual drawing?▼

The best way to visualize a new feature without manual drawing is using this Skill to generate a basic wireframe in Figma from a description. Product managers can quickly produce these visualizations for designers to refine later.

Why does my automated Figma design generation fail to place nodes correctly?▼

Automated Figma design generation fails to place nodes correctly if you omit the optional parent node ID or file key. Ensure your Figma Console MCP is authenticated and the Figma Desktop Bridge is running for precise design placement.

Related Skills

Explore More Design & Creative Skills→
mims-harvardmims-harvard
1.6k

setup-tooluniverse

Install ToolUniverse and configure MCP with Cursor or Claude Desktop.

Official
Advanced
rodrigotoledorodrigotoledo

figma

Fetch structured Figma design data via MCP for React and Tailwind code generation.

Community
Intermediate
jaypatrickjaypatrick

figma

Fetch Figma design context and assets via MCP to generate UI code.

Community
Advanced
redongreenredongreen
236

update-changelog

Add new changelog entries to a specified Figma frame using MCP tools.

Community
Advanced