Rork × Figma 統合 — デザインからアプリ自動生成の実践ワークフロー

// 自動生成される ColorPalette
struct ColorPalette {
    struct Primary {
        static let c50 = Color(red: 0.941, green: 0.969, blue: 1.0)
        static let c100 = Color(red: 0.882, green: 0.937, blue: 0.984)
        static let c600 = Color(red: 0.145, green: 0.396, blue: 0.933)
        static let c700 = Color(red: 0.114, green: 0.306, blue: 0.847)
        static let c900 = Color(red: 0.118, green: 0.227, blue: 0.541)
    }
 
    struct Secondary {
        static let c600 = Color(red: 0.961, green: 0.619, blue: 0.043)
        static let c700 = Color(red: 0.855, green: 0.466, blue: 0.024)
    }
 
    struct Gray {
        static let c50 = Color(red: 0.980, green: 0.980, blue: 0.980)
        static let c500 = Color(red: 0.420, green: 0.447, blue: 0.498)
        static let c900 = Color(red: 0.067, green: 0.067, blue: 0.067)
    }
}

struct Typography {
    struct Display {
        static let large = Font.system(
            size: 32,
            weight: .bold,
            design: .default
        )
        // または
        static let large = Font.custom(
            "Inter-Bold",
            size: 32
        )
    }
 
    struct Heading {
        static let h1 = Font.system(
            size: 28,
            weight: .bold,
            design: .default
        )
    }
 
    struct Body {
        static let base = Font.system(
            size: 16,
            weight: .regular,
            design: .default
        )
    }
 
    struct Caption {
        static let small = Font.system(
            size: 12,
            weight: .medium,
            design: .default
        )
    }
}

struct Spacing {
    static let xs = 4.0
    static let sm = 8.0
    static let md = 16.0
    static let lg = 24.0
    static let xl = 32.0
    static let xxl = 48.0
}

struct Button: View {
    enum Style {
        case primary
        case secondary
        case tertiary
    }
 
    enum Size {
        case small
        case medium
        case large
 
        var fontSize: CGFloat {
            switch self {
            case .small: return 12
            case .medium: return 14
            case .large: return 16
            }
        }
 
        var padding: EdgeInsets {
            switch self {
            case .small: return EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12)
            case .medium: return EdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16)
            case .large: return EdgeInsets(top: 14, leading: 20, bottom: 14, trailing: 20)
            }
        }
    }
 
    let title: String
    let style: Style
    let size: Size
    let isDisabled: Bool
    let icon: String?
    let action: () -> Void
 
    @State private var isPressed = false
 
    var body: some View {
        Button(action: action) {
            HStack(spacing: 8) {
                if let icon = icon {
                    Image(systemName: icon)
                        .font(.system(size: size.fontSize))
                }
 
                Text(title)
                    .font(.system(size: size.fontSize, weight: .semibold))
            }
            .padding(size.padding)
            .foregroundColor(foregroundColor)
            .background(backgroundColor)
            .cornerRadius(8)
            .opacity(isPressed || isDisabled ? 0.8 : 1.0)
        }
        .disabled(isDisabled)
        .onLongPressGesture(minimumDuration: 0.1) { _ in } onPressingChanged: { isPressing in
            isPressed = isPressing
        }
    }
 
    private var backgroundColor: Color {
        if isDisabled {
            return ColorPalette.Gray.c100
        }
 
        switch style {
        case .primary:
            return ColorPalette.Primary.c600
        case .secondary:
            return ColorPalette.Secondary.c600
        case .tertiary:
            return Color.clear
        }
    }
 
    private var foregroundColor: Color {
        if isDisabled {
            return ColorPalette.Gray.c400
        }
 
        switch style {
        case .primary, .secondary:
            return .white
        case .tertiary:
            return ColorPalette.Primary.c600
        }
    }
}

struct LabeledInput: View {
    @State private var text: String = ""
 
    var body: some View {
        HStack(spacing: 12) {
            Text("Label")
                .frame(width: 120, alignment: .leading)
 
            TextField("Placeholder", text: $text)
                .frame(height: 44)
                .padding(.horizontal, 12)
                .background(ColorPalette.Gray.c50)
                .cornerRadius(8)
        }
        .padding(16)
    }
}

// チェック: ColorPalette の値が Figma と完全一致しているか
ColorPalette.Primary.c600 == #2563EB ✓
ColorPalette.Gray.c50 == #FAFAFA ✓

// チェック: HStack/VStack/Spacer が Figma の Auto Layout と一致
// - Spacing 値が正確
// - Padding が正確
// - Alignment が指定通り

// チェック: Figma バリアント が SwiftUI enum/条件分岐で表現
Button(style: .primary, size: .medium, state: .default)

// チェック: 画面幅変化時の動作が想定通り
@Environment(\.horizontalSizeClass) var sizeClass
 
var body: some View {
    if sizeClass == .compact {
        VStack { ... }  // 縦積み（モバイル）
    } else {
        HStack { ... }  // 横並び（タブレット・デスクトップ）
    }
}

// 自動生成: HomeScreen
import SwiftUI
 
struct HomeScreen: View {
    @StateObject private var viewModel = ProductViewModel()
    @State private var selectedCategory: String = "all"
 
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                // Header
                VStack(alignment: .leading, spacing: 8) {
                    Text("Welcome Back!")
                        .font(.system(size: 28, weight: .bold))
                        .foregroundColor(ColorPalette.Gray.c900)
 
                    Text("Find your next favorite product")
                        .font(.system(size: 14, weight: .regular))
                        .foregroundColor(ColorPalette.Gray.c600)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(16)
                .background(ColorPalette.Primary.c50)
 
                // Category Filter
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 8) {
                        ForEach(viewModel.categories, id: \.self) { category in
                            Button(action: {
                                selectedCategory = category
                            }) {
                                Text(category)
                                    .font(.system(size: 14, weight: .medium))
                                    .padding(.horizontal, 12)
                                    .padding(.vertical, 8)
                                    .background(
                                        selectedCategory == category ?
                                        ColorPalette.Primary.c600 :
                                        ColorPalette.Gray.c100
                                    )
                                    .foregroundColor(
                                        selectedCategory == category ?
                                        .white :
                                        ColorPalette.Gray.c900
                                    )
                                    .cornerRadius(20)
                            }
                        }
                    }
                    .padding(.horizontal, 16)
                }
                .padding(.vertical, 12)
 
                // Product Grid
                ScrollView {
                    LazyVGrid(
                        columns: [
                            GridItem(.flexible(), spacing: 16),
                            GridItem(.flexible(), spacing: 16)
                        ],
                        spacing: 16
                    ) {
                        ForEach(viewModel.products, id: \.id) { product in
                            NavigationLink(destination: ProductDetailScreen(product: product)) {
                                ProductCard(product: product)
                            }
                        }
                    }
                    .padding(16)
                }
 
                Spacer()
            }
            .navigationTitle("Shop")
        }
        .task {
            await viewModel.loadProducts(category: selectedCategory)
        }
    }
}
 
// 自動生成: ProductCard コンポーネント
struct ProductCard: View {
    let product: Product
 
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // Product Image
            Image(product.imageName)
                .resizable()
                .scaledToFill()
                .frame(height: 180)
                .clipped()
                .cornerRadius(12)
 
            // Product Info
            VStack(alignment: .leading, spacing: 8) {
                Text(product.name)
                    .font(.system(size: 16, weight: .semibold))
                    .foregroundColor(ColorPalette.Gray.c900)
                    .lineLimit(1)
 
                HStack(spacing: 4) {
                    Image(systemName: "star.fill")
                        .foregroundColor(.orange)
                        .font(.system(size: 12))
 
                    Text("\(product.rating, specifier: "%.1f")")
                        .font(.system(size: 14, weight: .medium))
                        .foregroundColor(ColorPalette.Gray.c700)
                }
 
                HStack(spacing: 4) {
                    Text("¥\(product.price)")
                        .font(.system(size: 18, weight: .bold))
                        .foregroundColor(ColorPalette.Primary.c600)
 
                    if product.originalPrice > product.price {
                        Text("¥\(product.originalPrice)")
                            .font(.system(size: 14, weight: .regular))
                            .foregroundColor(ColorPalette.Gray.c500)
                            .strikethrough()
                    }
                }
            }
            .padding(12)
 
            Spacer()
        }
        .background(Color.white)
        .cornerRadius(12)
        .shadow(color: Color.black.opacity(0.05), radius: 4, x: 0, y: 2)
    }
}

struct ResponsiveLayout: View {
    @Environment(\.horizontalSizeClass) var sizeClass
    @Environment(\.verticalSizeClass) var vSize
 
    var body: some View {
        Group {
            if sizeClass == .compact && vSize == .regular {
                // モバイル縦（iPhoneで一般的）
                mobilePortraitLayout
            } else if sizeClass == .compact && vSize == .compact {
                // モバイル横
                mobileLandscapeLayout
            } else if sizeClass == .regular {
                // タブレット / iPad
                tabletLayout
            }
        }
    }
 
    var mobilePortraitLayout: some View {
        VStack(spacing: 16) {
            // スタック型レイアウト
            HeaderView()
            ContentView()
            FooterView()
        }
    }
 
    var tabletLayout: some View {
        HStack(spacing: 24) {
            // 左右並列型レイアウト
            SidebarView()
                .frame(width: 280)
 
            ContentView()
        }
    }
}

struct AnimatedProductCard: View {
    @State private var isExpanded = false
 
    var body: some View {
        VStack {
            // Figma で指定: "Ease-in-out, 300ms"
            // ↓ 自動変換
            Text("Product Details")
                .font(.headline)
                .frame(maxWidth: .infinity)
                .padding(16)
                .background(ColorPalette.Primary.c600)
                .foregroundColor(.white)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 0.3)) {
                        isExpanded.toggle()
                    }
                }
 
            if isExpanded {
                // Figma で指定: "Fade in, 200ms" + "Slide up, 200ms"
                VStack(spacing: 12) {
                    Text("Description")
                    Text("Price: ¥5,000")
                    Button("Add to Cart") {}
                }
                .padding(16)
                .transition(.opacity.combined(with: .move(edge: .bottom)))
            }
        }
        .background(Color.white)
        .cornerRadius(12)
    }
}

# 推奨: デザイン変更時に自動で code 生成 webhook
# GitHub Actions ワークフロー例
 
name: Auto-sync Figma to Code
on:
  workflow_dispatch:  # 手動トリガー
 
jobs:
  sync-figma:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
 
      - name: Export Figma Design
        run: |
          curl -X POST https://rork-api.example.com/export \
            -H "Authorization: Bearer ${{ secrets.RORK_API_KEY }}" \
            -d @figma-config.json
 
      - name: Generate SwiftUI Code
        run: npm run rork:generate
 
      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v4
        with:
          commit-message: "chore: sync design changes from Figma"
          title: "🎨 Design sync from Figma"
          body: "Automated Figma → Code generation"

// Rork Max 生成コード（読み取り専用ファイル）
// → Generated_Button.swift
struct GeneratedButton: View {
    let title: String
    let action: () -> Void
 
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.system(size: 16, weight: .semibold))
                .frame(maxWidth: .infinity)
                .padding(12)
                .background(ColorPalette.Primary.c600)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}
 
// 開発者による拡張（カスタマイズ可能）
// → Button+Extensions.swift
extension GeneratedButton {
    // ローディング状態を追加
    @State private var isLoading = false
 
    var bodyWithLoading: some View {
        Button(action: {
            isLoading = true
            action()
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                isLoading = false
            }
        }) {
            HStack {
                if isLoading {
                    ProgressView()
                        .progressViewStyle(.circular)
                } else {
                    Text(title)
                }
            }
            .frame(maxWidth: .infinity)
            .padding(12)
            .background(isLoading ? ColorPalette.Gray.c300 : ColorPalette.Primary.c600)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .disabled(isLoading)
    }
}

// 更新前
ColorPalette.Primary.c600 = #2563EB
 
// Figma で色を変更: #2563EB → #3B82F6
// ↓ Rork Max で再生成
ColorPalette.Primary.c600 = #3B82F6  // 自動更新
 
// すべての Button・Card・Badge に自動反映 ✓

#!/usr/bin/env bash
# normalize_icons.sh — Figma 取り込み前の SVG 正規化
set -euo pipefail
 
INPUT_DIR="$1"
OUTPUT_DIR="${2:-./icons-normalized}"
mkdir -p "$OUTPUT_DIR"
 
for svg in "$INPUT_DIR"/*.svg; do
  name=$(basename "$svg")
  # 1. viewBox を 24x24 に統一
  npx svgo "$svg" \
    --multipass \
    --plugins='preset-default,prefixIds' \
    -o /tmp/cleaned.svg
 
  # 2. width/height 属性を除去（Figma 側でリサイズさせる）
  sed -i -E 's/(width|height)="[^"]*"//g' /tmp/cleaned.svg
 
  # 3. viewBox を強制的に 24x24 に
  sed -i -E 's/viewBox="[^"]*"/viewBox="0 0 24 24"/' /tmp/cleaned.svg
 
  cp /tmp/cleaned.svg "$OUTPUT_DIR/$name"
  echo "✓ normalized $name"
done
 
echo "done: $(ls -1 "$OUTPUT_DIR" | wc -l) icons"

// figma-plugin/gap-lint.ts
// Figma Plugin で実行: 全フレームの itemSpacing をチェック
 
const ALLOWED_GAPS = [4, 8, 12, 16, 24, 32, 48];
 
function lintGaps(node: SceneNode): void {
  if (
    node.type === "FRAME" &&
    node.layoutMode !== "NONE" &&
    node.itemSpacing !== figma.mixed
  ) {
    const gap = node.itemSpacing;
    if (!ALLOWED_GAPS.includes(gap)) {
      // Figma 画面に赤いマーカーを表示
      figma.notify(`❌ ${node.name}: gap=${gap}px (許可されていない値)`, {
        error: true,
      });
      // 該当ノードを選択状態に
      figma.currentPage.selection = [node];
      figma.viewport.scrollAndZoomIntoView([node]);
    }
  }
 
  if ("children" in node) {
    for (const child of node.children) {
      lintGaps(child);
    }
  }
}
 
figma.currentPage.findAll().forEach(lintGaps);
figma.notify("✓ gap lint complete", { timeout: 1500 });