design-to-swiftui

name	design-to-swiftui
description	Convert design specifications from Figma, Sketch, or Penpot to SwiftUI view code with proper modifiers and theme integration
created	2026-02-22T00:00:00.000Z
updated	2026-02-22T00:00:00.000Z
tags	["design","swiftui","ios","code-generation","figma","sketch"]
requires	design-tokens-extraction

Design to SwiftUI

Convert design component specifications to SwiftUI view code.

Overview

This skill transforms design specifications (from Figma, Sketch, or Penpot) into idiomatic SwiftUI views with proper modifiers, layout containers, and theme token integration.

This skill covers:

• Converting design frames to SwiftUI layouts (VStack, HStack, ZStack)
• Mapping design properties to SwiftUI modifiers
• Generating reusable SwiftUI components
• Integrating with extracted design tokens

This skill does NOT cover:

• Design token extraction (see design-tokens-extraction skill)
• State management and data binding
• Navigation and routing

Quick Reference

Design to SwiftUI Mapping

Design Element	SwiftUI Component
Horizontal layout	HStack
Vertical layout	VStack
Overlapping layers	ZStack
Auto-layout	Stack with spacing
Grid	LazyVGrid / LazyHGrid
Scroll container	ScrollView
Text	Text with modifiers
Rectangle	RoundedRectangle or Rectangle
Circle	Circle
Image	Image / AsyncImage
Button	Button with custom label

Property Mapping

Design Property	SwiftUI Modifier
Fill color	.fill() / .foregroundStyle()
Stroke	.stroke() / .overlay()
Corner radius	.clipShape(RoundedRectangle())
Shadow	.shadow()
Opacity	.opacity()
Padding	.padding()
Size	.frame()
Position	.offset() / .position()

Workflow: Convert Design Component

Step 1: Analyze Design Structure

Read the design component from MCP and identify:

• Layout type (horizontal, vertical, grid, free-form)
• Child elements and their order
• Spacing and padding values
• Constraints and sizing behavior

Step 2: Map to SwiftUI Layout

Auto-layout (horizontal):

HStack(alignment: .<alignment>, spacing: <gap>) {
    // children
}

Auto-layout (vertical):

VStack(alignment: .<alignment>, spacing: <gap>) {
    // children
}

Grid layout:

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]
LazyVGrid(columns: columns, spacing: <gap>) {
    // children
}

Absolute positioning (rare in SwiftUI):

ZStack {
    // position children with .offset() or .position()
}

Step 3: Generate View Code

For each design element, generate SwiftUI code:

Text elements:

Text("<content>")
    .font(<Theme.Typography.style>)
    .foregroundStyle(<Theme.Colors.color>)
    .lineLimit(<lines>)
    .multilineTextAlignment(.<alignment>)

Shapes with fill:

RoundedRectangle(cornerRadius: Theme.Radius.<size>)
    .fill(Theme.Colors.<color>)
    .frame(width: <width>, height: <height>)
    .shadow(color: .black.opacity(0.1), radius: 4, y: 2)

Images:

// Local image
Image("<assetName>")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: <width>, height: <height>)
    .clipShape(RoundedRectangle(cornerRadius: Theme.Radius.<size>))

// Remote image
AsyncImage(url: URL(string: "<url>")) { image in
    image
        .resizable()
        .aspectRatio(contentMode: .fill)
} placeholder: {
    ProgressView()
}
.frame(width: <width>, height: <height>)

Buttons:

Button {
    // action
} label: {
    HStack(spacing: 8) {
        Image(systemName: "<icon>")
        Text("<label>")
    }
    .font(Theme.Typography.<style>)
    .foregroundStyle(Theme.Colors.<textColor>)
    .padding(.horizontal, Theme.Spacing.<h>)
    .padding(.vertical, Theme.Spacing.<v>)
    .background(Theme.Colors.<bgColor>)
    .clipShape(RoundedRectangle(cornerRadius: Theme.Radius.<size>))
}

Step 4: Create Component View

Wrap the generated code in a reusable SwiftUI View:

import SwiftUI

struct <ComponentName>View: View {
    // Properties extracted from design variants
    let title: String
    let subtitle: String?
    var onTap: (() -> Void)?

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
            Text(title)
                .font(Theme.Typography.headlineMedium)
                .foregroundStyle(Theme.Colors.text)

            if let subtitle {
                Text(subtitle)
                    .font(Theme.Typography.bodyMedium)
                    .foregroundStyle(Theme.Colors.textSecondary)
            }
        }
        .padding(Theme.Spacing.md)
        .background(Theme.Colors.surface)
        .clipShape(RoundedRectangle(cornerRadius: Theme.Radius.md))
        .onTapGesture {
            onTap?()
        }
    }
}

#Preview {
    <ComponentName>View(
        title: "Preview Title",
        subtitle: "Preview subtitle text"
    )
    .padding()
}

Common Patterns

Card Component

Design spec:

• Background fill with rounded corners
• Shadow elevation
• Padding around content
• Optional image header

struct CardView<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            content
        }
        .background(Theme.Colors.surface)
        .clipShape(RoundedRectangle(cornerRadius: Theme.Radius.lg))
        .shadow(
            color: .black.opacity(0.08),
            radius: 8,
            y: 4
        )
    }
}

Button Variants

Design spec defines Primary, Secondary, Ghost variants:

enum ButtonVariant {
    case primary, secondary, ghost

    var backgroundColor: Color {
        switch self {
        case .primary: Theme.Colors.primary
        case .secondary: Theme.Colors.surface
        case .ghost: .clear
        }
    }

    var foregroundColor: Color {
        switch self {
        case .primary: Theme.Colors.onPrimary
        case .secondary: Theme.Colors.primary
        case .ghost: Theme.Colors.primary
        }
    }
}

struct ThemedButton: View {
    let title: String
    let variant: ButtonVariant
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .font(Theme.Typography.labelLarge)
                .foregroundStyle(variant.foregroundColor)
                .padding(.horizontal, Theme.Spacing.lg)
                .padding(.vertical, Theme.Spacing.md)
                .background(variant.backgroundColor)
                .clipShape((cornerRadius: ..md))
        }
    }
}

List Item

Design spec with leading icon, title/subtitle, trailing accessory:

struct ListItemView: View {
    let icon: String
    let title: String
    let subtitle: String?
    let accessory: Accessory

    enum Accessory {
        case chevron
        case toggle(Binding<Bool>)
        case badge(String)
        case none
    }

    var body: some View {
        HStack(spacing: Theme.Spacing.md) {
            Image(systemName: icon)
                .font(.system(size: 20))
                .foregroundStyle(Theme.Colors.primary)
                .frame(width: 24)

            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(Theme.Typography.bodyLarge)
                    .foregroundStyle(Theme.Colors.text)

                if let subtitle {
                    Text(subtitle)
                        .font(Theme.Typography.bodySmall)
                        .foregroundStyle(Theme.Colors.textSecondary)
                }
            }

            Spacer()

            accessoryView
        }
        .padding(.vertical, ..sm)
        .padding(.horizontal, ..md)
    }

    
      accessoryView:   {
         accessory {
         .chevron:
            (systemName: )
                .foregroundStyle(..textSecondary)
         .toggle( isOn):
            (, isOn: isOn)
                .labelsHidden()
         .badge( text):
            (text)
                .font(..labelSmall)
                .padding(.horizontal, )
                .padding(.vertical, )
                .background(..primary)
                .foregroundStyle(..onPrimary)
                .clipShape(())
         .none:
            ()
        }
    }
}

Token Integration

Reference design tokens through the Theme struct:

// Colors
Theme.Colors.primary
Theme.Colors.surface
Theme.Colors.text
Theme.Colors.textSecondary

// Typography
Theme.Typography.displayLarge
Theme.Typography.headlineMedium
Theme.Typography.bodyLarge
Theme.Typography.labelSmall

// Spacing
Theme.Spacing.xs  // 4
Theme.Spacing.sm  // 8
Theme.Spacing.md  // 16
Theme.Spacing.lg  // 24
Theme.Spacing.xl  // 32

// Corner Radius
Theme.Radius.sm   // 4
Theme.Radius.md   // 8
Theme.Radius.lg   // 16
Theme.Radius.full // 9999

Naming Conventions

Design Name	SwiftUI Name
Button/Primary	PrimaryButton
Card - Article	ArticleCardView
List Item/Default	ListItemView
Header/Large	LargeHeaderView
Input/Text Field	TextFieldView

See Also

• design-tokens-extraction skill - Extract tokens first
• design-token-swift style - Swift code output format
• swiftui-components skill - SwiftUI component patterns