クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

生成AIでFigmaからスマホアプリUI作成を自動化して楽したかった話

こんにちは。クラウドワークスのiOSアプリ開発を担当している野村です。 今回は「生成AIでFigmaからスマホアプリUI作成を自動化して楽したい！」という取り組みについて共有したいと思います。タイトルが「楽したかった」と過去形なのは、執筆時点ではあまりうまくいかなかったためですが、デザインから実装までの流れに課題を感じているエンジニアやデザイナーにとって少しでも参考になれば幸いです。

アプリUI開発の流れ

クラウドワークスのアプリUI開発のプロセスは以下の通りです。

  1. デザイナーがFigmaでデザインを作成
    アプリの見た目やレイアウトを詳細に設計しFigmaへ落とし込みます。
  2. iOS/Androidエンジニアがデザインに基づいてUIを実装
    プラットフォームごとにインターフェイスビルダーとコードを用いてUIを構築します。

この流れ自体はシンプルですが、実際にはいくつもの課題が潜んでいます。

課題

1. 単純に時間がかかる

UIを手作業で構築するのは非常に時間がかかり、特にデザイン変更が入ると工数が大幅に増えます。

2. iOS/Androidで同じにできないUIがある

例えば、ダイアログやスイッチの挙動が異なる場合、プラットフォームごとに微調整が必要です。

3. Figmaでは表現できないUIがある

アニメーションや複雑な動きが絡む部分は、Figmaのデザインだけでは実装イメージが共有しきれません。

4. 出来上がったものが「コレジャナイ」ことがある

エンジニアが実装したUIをデザイナーが触った際に、細かい部分でデザイン意図が異なっていた、なんてことも。

生成AIで解決できないだろうか？

これらの課題を解決する手段として、「生成AIでFigmaから直接UIを実装する」という発想に至りました。具体的には以下のようなメリットが期待できます。

  • 工数の大幅削減
    デザインからUIコード生成まで一貫して自動化。
  • デザイナーがUI実装まで担当可能に
    デザインのレビューが早めに終わり、エンジニアとのリレー回数が減るため、両者の負担軽減に繋がります。「コレジャナイ」も未然に防げるでしょう。

Figmaのプラグイン「Codia AI」を試してみた

導入工程

Figmaから直接コードを生成できると噂の「Codia AI」を導入しました。以下がその手順です。

1. FigmaプラグインのCodia AIページからプラグインを有効化

2. "Open in..."でサンプルファイル（Codia.AI Playground 1.0）を開く

3. Figmaのページに移動したら画面下部の"dev mode"をオン

4. 画面をUI生成してみる

"News App"で試してみます。"News App"レイヤーを選択します。

"Plugins"タブから"codia AI"を選択します。

Previewが表示されるので左下の"AI Code"をクリックします。

生成されるまで少し待ちます。

コードが出来上がりました！

5. "Export Code"からExportしダウンロード

iOSのプロジェクトデータがまるっと入っていました。

6. Xcodeで開く

実行してみると何やらエラーが。

Cocoa Podsでライブラリを入れる必要があるみたいです。

プロジェクトのディレクトリでpodをインストールします。

% pod install
Analyzing dependencies
Downloading dependencies
Installing SnapKit (5.6.0)
Generating Pods project
Integrating client project
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

SnapKitが入ったみたいです。レイアウトの制約をコードで簡単に記述できるライブラリですね。

改めてプロジェクトを開きましょう。 ライブラリを入れたので.xcworkspaceの方で開きます。

エラーは無さそうです。

7. 実行！

デザイン通り表示されました！

が、最下部までスクロールするとタブまでスクロールしていることがわかります。 タブをタブとして解釈していないようです。 タブだけでなく全てのUIが単純なViewとして処理されているようです。

ソースコードを少し見てみましょう。

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView = UIScrollView(frame: CGRect(x: 0, y: statusBarHeight(), width: view.bounds.width, height: view.bounds.height - statusBarHeight()))
        view.addSubview(scrollView)
        view.backgroundColor = .white
        mainView = CustomView(frame: CGRect(x: 0, y: 0, width: 130, height: 1135.333))
        scrollView.contentSize = fitScreen(mainView)
        scrollView.addSubview(mainView)
    }

"CustomView"を1枚貼り付けて、そこに子Viewを並べているようです。

func setupSubviews() {
        self.addSubview(self.innerView)
        self.innerView.addSubview(self.image1)
        self.innerView.addSubview(self.image4)
        self.innerView.addSubview(self.image5)
        self.innerView.addSubview(self.image2)
        // ...省略
    }

    func setupConstraints() {
        innerView.snp.makeConstraints { make in
            make.edges.equalTo(self)
        }

        image1.snp.makeConstraints { make in
            make.left.equalTo(self.snp.left)
            make.right.equalTo(self.snp.right)

            make.top.equalTo(self.snp.top)
            make.height.equalTo(13.333)
        }

        customView1.snp.makeConstraints { make in
            make.left.equalTo(self.snp.left)
            make.width.equalTo(130)
            make.top.equalTo(self.snp.top).offset(38.667)
            make.height.equalTo(0.333)
        }
        // ...省略
    }

storyboardは空っぽでカスタムView用のxibなどもありません。 Viewの命名もFigmaのレイヤーとリンクしているわけではなさそうです。

8. 一部のレイヤーだけを選択して生成してみる

"E-Learning APP"画面の一部レイヤーを選択し、そこだけ生成してみました。

このようなUIはTableViewのCellとして生成してくれるのが理想です。 最低限のレイヤーだけを選択したら思惑通りに生成してくれるかも？と思い試してみましたが…

結果は一緒で、ただただカスタムViewがコードで機械的に羅列されるだけでした。

Codia AIで期待したものは出てこなかった…

問題点

  1. storyboardやxibは生成されない
    UIデータはstoryboardやxibで提供されるわけではなく、すべてコードで実装されていました。

  2. 命名や変数が機械的
    Figmaのレイヤー名が反映されるわけでもなく、どれが何のレイアウトなのか分かりにくくなっています。また、フォントやカラーの共通化もされておらず、コード全体が冗長です。

  3. 実用性に乏しい部分も
    TableViewにして欲しいような部分も単純にカスタムViewが並べられているだけなので、どうしても手直しが必要になります。

今後の期待

Codia AIを活用する中で、いくつか可能性や改善ポイントが見えてきました。 まず、手軽なモック作成には十分活用できそうです。デザインの見え方を素早く確認する用途においては手軽で便利だと感じました。 また、SnapKitを導入済みでコードベースでUIを実装しているプロジェクトであれば、工夫次第で部分的な効率化が図れるかもしれません。
さらに、storyboardやxibへの対応が進めばより幅広い活用が期待できます。特にデザインデータからTableViewやCollectionViewを自動で判断して最適なUIを生成したり、タブやNavigationBarを自動生成してくれるような機能が加われば、利便性は大幅に向上するでしょう。他にも一部のレイヤーを選択してCellやカスタムViewを作成できるようになれば、かなり活用できそうです。

最後に

FigmaからのUI自動生成は、まだ完璧とは言えませんが未来を感じさせる技術です。現在の限界を理解しつつ、手作業と組み合わせることで効率を上げられるかもしれません。
「Codia AI」の進化や他の生成ツールの登場を楽しみにしながら、引き続き検証を続けていきたいと思います。

クラウドワークスでは個人がより活躍できる社会を実現するため、仲間を募集しています。アプリ開発に興味がある方以外にも幅広く募集しておりますので、ぜひ募集をご確認ください。

herp.careers

© 2016 CrowdWorks, Inc., All rights reserved.