skills.rest
figma
figmaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-swiftui

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
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-swiftui-figma
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Kushal9889Kushal9889

figma-generate-library

Automate design system creation and maintenance in Figma using the Plugin API.

Community
Advanced
nguyennamkkbnguyennamkkb

ios-debug

Diagnose and fix iOS/Swift errors in Xcode projects.

Community
Basic
alanharrryy-wqalanharrryy-wq
2

figma-implement-design

Translate Figma design specifications into production-ready code via the Figma MCP workflow.

Community
Advanced
Yemomo511Yemomo511
2

expo-ui-swift-ui

Integrate native iOS SwiftUI views and modifiers into Expo apps.

Community
Basic