figma-swiftui

Name: figma-swiftui
Availability: InStock
Author: Figma

Convert Figma designs to SwiftUI code and SwiftUI views to Figma files.

1.9k|171|Updated Aug 5, 2025

Search Tags:#figma #swiftui #ui development #design to code #code to design

Ready to run

npx skills add https://github.com/figma/mcp-server-guide --skill figma-swiftui-figma

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-swiftui
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-swiftui
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-swiftui-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-use, figma-generate-design, figma-generate-library, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to convert Figma designs to SwiftUI code and vice versa, enabling seamless collaboration between designers and developers.

Core Features & Use Cases

Design to Code: Convert Figma frames into SwiftUI code.
Code to Design: Push SwiftUI views into a Figma file.
Use Case: A designer sends a Figma design to a developer. The developer uses this Skill to automatically generate the corresponding SwiftUI code, which can then be integrated into the app.

Quick Start

Use the figma-swiftui skill to generate SwiftUI code for a Figma design 'design-file.fig'.

Frequently Asked Questions about figma-swiftui

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

FAQPage Schema

How do I convert Figma designs to SwiftUI code automatically?▼

To convert Figma designs to SwiftUI code, this Skill maps Figma frames directly into SwiftUI views. It handles both one-directional transformations and bidirectional mapping of UI elements for seamless design-to-code workflows.

Can I push SwiftUI views back into a Figma file?▼

Yes, you can push SwiftUI views back into a Figma file. This Skill supports bidirectional mapping, allowing you to translate SwiftUI code into Figma designs and maintain synchronization between your codebase and design files.

Do I need other Figma skills to generate SwiftUI code from a design file?▼

Generating SwiftUI code requires the figma-use, figma-generate-design, and figma-generate-library skills. These dependencies are necessary to facilitate the full transformation of Figma designs into SwiftUI code and vice versa.

What is the best way to handle Figma to SwiftUI UI development workflow?▼

The best way to handle Figma to SwiftUI UI development is using a bidirectional mapping tool. This Skill translates Figma frames into SwiftUI code and pushes SwiftUI views back to Figma, ensuring continuous synchronization between designers and developers.

Does this Figma to SwiftUI conversion support bidirectional mapping of UI elements?▼

Yes, this Figma to SwiftUI conversion supports bidirectional mapping of UI elements. It handles both one-directional transformations from Figma to SwiftUI and reverse mappings from SwiftUI code back into Figma design files.