skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

figma-swiftui

Translate Figma designs into idiomatic SwiftUI and map SwiftUI back to Figma.

2|1|Updated May 17, 2026
Search Tags:#figma#ios#swiftui#sf symbols#code connect#design translation#ui mapping
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-swiftui-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-swiftui
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-swiftui
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-swiftui-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the friction between design and implementation by translating SwiftUI apps into Figma designs and Figma designs back into idiomatic SwiftUI, so product and engineering can stay aligned without manual rework.

Core Features & Use Cases

  • Design to Code: Turn Figma frames, components, and system UI patterns into SwiftUI views, navigation, lists, forms, tabs, and sheets.
  • Code to Design: Push SwiftUI screens, components, and tokens back into Figma using the correct library components, variables, typography, and SF Symbols.
  • System-Aware Mapping: Preserves Apple UI conventions such as navigation chrome, tab bars, list styles, semantic colors, Dynamic Type, and glass/material behaviors.
  • Use Case: A designer shares a Figma mobile screen, and the Skill produces a SwiftUI implementation that matches the layout and system patterns instead of rebuilding it from primitives.

Quick Start

Ask the skill to translate the provided Figma design into SwiftUI while preserving Apple system components, semantic colors, typography, and navigation structure.

Frequently Asked Questions about figma-swiftui

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

FAQPage Schema
How do I translate Figma designs into SwiftUI views?▼

Translating Figma designs into SwiftUI involves mapping Figma frames, components, and system UI patterns into SwiftUI views, navigation, lists, forms, tabs, and sheets while preserving Apple HIG semantics, SF Symbols, and dynamic layout patterns.

Can I push SwiftUI source code back into Figma components?▼

Yes, you can push SwiftUI screens, components, and tokens back into Figma-ready design structures. The Skill maps SwiftUI source using the correct library components, variables, typography, and SF Symbols for both iOS and iPadOS workflows.

Does this approach preserve Apple system components and semantic colors during design translation?▼

Yes, design translation preserves Apple UI conventions such as navigation chrome, tab bars, list styles, semantic colors, Dynamic Type, and glass or material behaviors. It applies Code Connect mappings to ensure accurate handling of system controls.

What is the best way to handle SF Symbols and Dynamic Type when converting Figma to iOS code?▼

The best way to handle SF Symbols and Dynamic Type during Figma to SwiftUI conversion is using system-aware mapping that applies Code Connect mappings and Apple HIG semantics, ensuring variables and dynamic layout patterns remain accurate.

Do I need Code Connect mappings to map Figma frames to idiomatic SwiftUI?▼

Yes, Code Connect mappings are required for accurate handling of Figma context. They ensure that Figma frames, components, and tokens translate into idiomatic SwiftUI views and map back into Figma-ready design structures without manual rework.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced
curtislmartincurtislmartin

swiftui-design-principles

Enforce SwiftUI design rules for iOS and watchOS interfaces.

Community
Intermediate
nsnguyennsnguyen
5

mobile-ios-design

Create iOS-native SwiftUI interfaces following Apple's Human Interface Guidelines.

Community
Basic
GyananoGyanano

ios-style-designer

Architect web interfaces following Apple's Human Interface Guidelines.

Community
Intermediate