はじめに

デザイン＆エンジニアリング部でUIデザインを担当している原澤です。

この記事では、デザインからコードを生成するサービスの検証施策について紹介します。デザインからコードを生成するサービスの活用や検討の参考になれば幸いです。

想定読者

UIデザイナー、フロントエンドエンジニア

結論

目的としていた品質向上や工数削減といった即効性のある成果は得られませんでした。しかし、依然としてエンジニアがコードを書く必要があるものの、Locofyはレイアウトの再現度が高いことがわかり、生成AIの活用方法を考える足がかりになりました。また、生成AIの使用の有無にかかわらず、より解釈しやすいデザインデータを作成するために、開発プロセスの中でエンジニアが担っている具体的な作業を明確にする必要があることがわかりました。

Locofyとは

今回の検証では、Locofy.aiというデザインからコードを生成するサービスを利用しました。以下、本文中では便宜上「Locofy」と表記します。

Locofyとは、Figmaなどのデザインツールから、Webやモバイルアプリのコードを自動生成するサービスです。Reactだけでなく、React Nativeなどのモバイル向けフレームワークにも対応していることから、Locofyを使用することに決めました。また、生成したコードをLocofyからGitHubに同期することも可能です。

導入は、アカウント作成→料金プラン選択→Figma上でプラグインを導入といった流れで、すぐに使用を開始できます。

Locofyはプランごとにトークンが与えられ、そのトークンを消費することで、デザインからコードを生成することができます。トークンは作成したデザインの各レイヤーに対して消費されます。ここで言うレイヤーとは、テキストや画像など一つ一つの要素のことを指します。

例）15レイヤーを使用して構成されたコンポーネント＝15トークン消費。

トークン消費を抑えるためには、デザイン作成時に余分なレイヤーを含めず、できる限りシンプルな構造で構築することが重要です。詳しくは公式ガイドを参照してください。

検証背景

これまでの業務の中で、デザインと実装された画面の差異による手戻り、デザイナーもエンジニアもコンポーネント分割作業を実施していて、作業が重複しているなどの課題を感じていました。

そのため、Locofyを活用し、コーディングの一部をデザイナーが担当することで、品質向上や工数削減につながるのではないかと考え、今回の検証に至りました。

検証内容

今回の検証では、エンジニアが利用しやすいコードを目標とし、以下のようにスコープを定義しました。UIライブラリとしてMUIを使用した、ReactによるWebアプリケーションの実装を想定しました。

スコープを決めた流れ

  1. エンジニアに対して、生成されるコードの理想的な姿についてヒアリングを実施。
  2. 生成されるコードを「コンポーネント」「レイアウト」「インタラクション」「データ操作」「アクセシビリティ」に分類。
  3. 今回は「コンポーネント」と「レイアウト」を検証対象とすることを決定。
  4. 「コンポーネント」と「レイアウト」について難易度を考慮して段階を検討。
  5. 「コンポーネント」は、再利用性や保守性などの観点から、UIライブラリとの連携を踏まえて段階を設定。

スコープ

※複数の別概念のコンポーネントが登場するため、この記事ではそれぞれを区別して、以下のように呼ぶこととします。

デザイン上のコンポーネント＝Figmaコンポーネント

デザイン上のMUIコンポーネント＝MUI Figmaコンポーネント

コード上のコンポーネント＝Reactコンポーネント

コード上のMUIコンポーネント＝MUI Reactコンポーネント

  • MUI FigmaコンポーネントをMUI Reactコンポーネントにマッピングできるか
    • MUI FigmaコンポーネントがMUI Reactコンポーネントにマッピングされることで、プロパティや挙動が標準化され、エンジニアの開発効率が上がる。
  • Figma上で定義したカラーからMUIテーマに対応したコードを生成できるか
    • デザイン上で定義されている値がUIライブラリのテーマに対応したコードとして生成されることで、デザイナーとエンジニア間で値が連携しやすくなる。
  • Figmaコンポーネントと同じ粒度でReactコンポーネントを分割できるか
    • Figmaコンポーネントと同じ粒度でReactコンポーネントが分割されることで、デザイナーとエンジニア間でコンポーネント分割作業の重複をなくし、コンポーネントに対して共通認識を形成する。
  • デザイン通りのレイアウトを再現できるか
    • デザイン通りのレイアウトが再現されることで、デザインと実装された画面の差異を解消する。

検証結果

各スコープについて、検証結果は以下のようになりました。

MUI FigmaコンポーネントをMUI Reactコンポーネントにマッピングできるか

【前提】

Locofyには、Figmaコンポーネントを適切な要素として生成するためのタグ付けという機能があります。

例）ButtonのFigmaコンポーネントに対して、ただのdivではなく、Buttonとして認識させるためにButtonタグを付ける。

タグ付けした上で、MUI Reactコンポーネントにマッピングさせることで、MUI Reactコンポーネントに準拠したコードを生成することができます。

【検証】

Figma上でMUI Figmaコンポーネントを並べ、MUI Reactコンポーネントへのマッピング精度を検証した。

【結果】

  • 検証に選んだMUI Figmaコンポーネント約30個のうち、MUI Reactコンポーネントにマッピングできたのは約3分の1だった。
  • 生成時、タグ付けは自動で行われるが、正しくタグ付けされるケースは約2～5個で、手動での設定が必要なケースが多い。

    Figma上で定義したカラーからMUIテーマに対応したコードを生成できるか

    【前提】

    MUIにはテーマというカラーやフォントなどのスタイルルールを共通的に設定できる機能があります。

    一方、Figma上でもカラーなどの値を独自に定義できるバリアブルという機能があり、この機能を使用して値の管理を行います。

    【検証】

    Figma上でMUIテーマに沿って定義したカラーから、MUIテーマに対応したコードが生成されるか検証した。

    【結果】

    • MUIテーマに対応したコードを生成することはできなかった。
    • LocofyにはMUIテーマと同様のカラーを保持する機能があり、その機能で設定したカラーをもとにコードを生成することはできた。

    Figmaコンポーネントと同じ粒度でReactコンポーネントを分割できるか

    【前提】

    ひとつひとつのコンポーネントとして分けられ、認識されることを分割と定義します。

    【検証】

    約30個のFigmaコンポーネントに対応したReactコンポーネントが生成されるか検証した。

    【結果】

    • Figmaコンポーネントに対応したReactコンポーネントが漏れなく生成された。
    • Figmaコンポーネント以外に、複数のFigmaコンポーネントをまとめている入れ物のような要素もReactコンポーネントとして生成されていた。

    デザイン通りのレイアウトを再現できるか

    【前提】

    別プロジェクトで使用実績のあるチェックリスト項目のうち、レイアウトに関する項目を使用し、デザイン通りのレイアウトが再現されたか判断する基準としました。

    ・見切れて横スクロールが発生しないか。

    ・マージン値が正確か。

    ・要素に対する最大幅、最小幅設定が反映されるか。

    ・改行、要素の追従などのレスポンシブ設定がされているか。

    【検証】

    Figma上で画面のデザインを作成し、レイアウトを再現できるか検証した。

    【結果】

    • 見切れや横スクロールは発生しなかった。
    • マージン値をブラウザの検証ツールで検証したところ、すべてデザインと一致した。
    • 生成された画面を伸縮させたところ、要素に対する最大幅、最小幅設定が機能していた。
    • 生成された画面を伸縮させたところ、テキストの改行、要素の追従が機能していた。

    検証の考察

    良かったこと、課題やつまずいたこと、今後の展開として考えられることに分けて考察しました。

    良かったこと

    • デザイン通りのレイアウト、マージン値などが再現されていた。
    • 返信やバグ修正対応が早いため、公式サポートの対応に安心感が持てる。

    課題やつまずいたこと

    • 生成されたコードの保守性や可読性が低いケースがあるため、そのままの利用は難しく、手動でコードを調整する必要がある。
    • すべてのMUIライブラリのコンポーネントがマッピングに対応しているわけではないため、対応していないものについては手動でコードを書く必要がある。
    • 生成時にプレビューが表示されないなどのバグが何度か発生し、公式サポートへバグの修正を依頼することがあった。

    今後の展開として考えられること

    • 今回の検証で対象としたコンポーネントとレイアウトという単位は粒度が大きかった。実装時にエンジニアが活用する場面をイメージして、生成されるコードの定義の詳細化を検討する。
    • UIライブラリとの連携が課題に挙がった。UIライブラリとの連携の観点から他のコードを生成するサービスについても検証する。
    • 見た目の再現度が高い印象を受けた。プロトタイプとしての利用も視野に入れ、画面遷移、ブレークポイントでのレイアウト切替、コンポーネントの状態切替などの挙動を検証する。

    おわりに

    以上、デザインからコードを生成するサービスの検証施策の紹介でした。

    目的としていた品質向上や工数削減といった即効性のある成果は得られませんでした。しかし、依然としてエンジニアがコードを書く必要があるものの、Locofyはレイアウトの再現度が高いことがわかり、生成AIの活用方法を考える足がかりになりました。また、生成AIの使用の有無にかかわらず、より解釈しやすいデザインデータを作成するために、開発プロセスの中でエンジニアが担っている具体的な作業を明確にする必要があることがわかりました。

    この記事がデザインからコードを生成するサービスの活用や検討の参考になれば幸いです。