skills.rest
brianmontero18
brianmontero18COMMUNITY
Explore all skills by this author →
GitHub

figma-design-ops

Create native Figma frames from Claude-generated specifications via figma-console MCP.

1|Updated Mar 1, 2026
Search Tags:#claude#figma#prototype#design-automation#font-loading#desktop-bridge
One-click install
npx skills add https://github.com/brianmontero18/astral --skill figma-design-ops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-ops
Source: https://github.com/brianmontero18/astral/tree/main/.claude/skills/figma-design-ops
Command: npx skills add https://github.com/brianmontero18/astral --skill figma-design-ops

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables programmatic creation of native Figma designs from Claude-generated code, bridging Claude with Figma via the figma-console MCP and the Desktop Bridge to accelerate prototyping and reduce manual recreation.

Core Features & Use Cases

  • Automated frame and component creation in Figma from Claude descriptions.
  • Pre-flight checks including font loading for multiple variants.
  • Prototype interactions that connect frames and overlays.
  • Validation through screenshot checks to ensure layout integrity.

Quick Start

Provide a design description and run the skill to generate a native Figma frame.

Frequently Asked Questions about figma-design-ops

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

FAQPage Schema
How do I automate native Figma design creation from Claude code?▼

You can automate native Figma design creation from Claude code by using the figma-design-ops skill to generate frames, components, and prototype interactions from text descriptions via the figma-console MCP and Desktop Bridge.

Do I need figma-console MCP and Desktop Bridge to generate Figma frames from Claude?▼

Yes, generating native Figma frames from Claude requires both the figma-console MCP and Desktop Bridge to connect Claude's code generation environment directly to the Figma desktop application.

How does font loading work when prototyping Figma designs programmatically?▼

Programmatic Figma prototyping requires pre-flight checks that load necessary fonts using figma.loadFontAsync to ensure all required font variants are available before Claude generates and applies text layers to the design.

Can I validate the layout integrity of Figma frames generated by Claude?▼

Yes, the skill validates layout integrity by performing automated screenshot checks on the generated Figma frames to ensure the programmatic design matches the intended layout specifications.

What is the best way to rapidly prototype design-to-code interactions in Figma?▼

The best way to rapidly prototype design-to-code interactions in Figma is to automate the creation of prototype interactions, connecting frames and overlays directly from Claude-generated specifications.

Why does my automated Figma design generation fail during font pre-flight checks?▼

Automated Figma design generation fails during font pre-flight checks if specific font variants are not loaded successfully using figma.loadFontAsync before the script attempts to apply them to text layers.

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
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced