AIフレンドリーなFigmaデータとは？（第二弾）
X-tech推進本部 倉原前回の記事では、Figmaのデザインの作り方によってget_design_contextから取得できるコードがどう変わるかを比較しました。
今回はその続編です。AIフレンドリーなFigmaデータから取得したコードと、非AIフレンドリーなFigmaデータから取得したコードをそれぞれ生成AIに渡し、全く同じプロンプトで実装を指示した時、出力される実装結果にどのような違いが出るのかを検証します。
検証方法
前回の記事で紹介した2つのデザインデータ、AIフレンドリーなBデザイン案と、AIフレンドリーでないAデザイン案からget_design_contextで取得したコードを、生成AIに渡しました。
プロンプトは両方とも同一で、次の通りです。
これはReactとtailwindのデザインデータです。
これを基にHTMLとCSSとJavaScriptを実装してください※ これはReactとtailwindのデザインデータです。というプロンプトがややこしいですが、「これ」とはget_design_contextで取得したコードのことです。
前回はヘッダー部分のみの比較でしたが、今回はページ全体（ヘッダー、パンくず、フォーム、フッター）を含むデザインデータを対象としています。
実装結果の比較
CodePen（検証用に調整した再現）
比較をわかりやすくするため、実装結果をそれぞれCodePenに掲載しています。
AIの実装に以下の加工を行ったうえで掲載しています。
- HTMLは生成後にヘッダー部分のみを残して掲載
- JavaScriptは削除
- CSSは生成結果をそのまま掲載
AIフレンドリーなデザインデータから実装した例
See the Pen AIフレンドリーなFigmaデータで実装by ミツエーリンクス (@mitsue-links) on CodePen.
非AIフレンドリーなデザインデータから実装した例
See the Pen 非AIフレンドリーなFigmaデータで実装by ミツエーリンクス (@mitsue-links) on CodePen.
ここでは、実装結果に特に差が出た2点を説明します。
1. CSS変数が使われているか
AIフレンドリーなデザインデータから実装したCSSの一部は次の通りです。
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-3: #343640;
}
...
.nav-item {
font-size: var(--font-14);
font-weight: 400;
line-height: 28px;
color: var(--color-gray-3);
}このように CSS変数が利用されており、スタイルの一貫性や保守性が高い構造になっています。
一方、非AIフレンドリーなデザインデータから生成されたCSSではCSS変数が使われておらず、色や余白などの値がすべてハードコードされていました。
この違いは、前回の記事でも触れた「Figmaでバリアブルを使用しているかどうか」によって生じたと考えられます。
2. コンポーネントとして再利用できるか
AIフレンドリーなデザインデータから生成されたHTMLでは、メニューの一部が次のように実装されました。
<nav class="global-nav">
<a href="#" class="nav-item">サービス</a>
<a href="#" class="nav-item">実績紹介</a>
<a href="#" class="nav-item">ナレッジ</a>
<a href="#" class="nav-item">セミナー</a>
<a href="#" class="nav-item">ニュース</a>
<a href="#" class="nav-item">会社情報</a>
<a href="#" class="nav-item">採用情報</a>
</nav>この場合、.nav-itemなど役割に紐づいたクラスがCSS側に存在すれば、他の箇所でもそのまま再利用できます。
一方、非AIフレンドリーなデザインデータから実装したHTMLでは、次のように実装されました。
<nav class="nav">
<a href="#">テキスト</a>
<a href="#">テキスト</a>
<a href="#">テキスト</a>
<a href="#">テキスト</a>
<a href="#">テキスト</a>
<a href="#">テキスト</a>
<a href="#">テキスト</a>
</nav>この場合、CSSが nav > a のようなセレクタ中心になるため、別の文脈で同じリンク要素を再利用することが難しくなります。
この差は、前回説明した「Figmaで再利用すべき要素にコンポーネントを使っているかどうか」によって生じたと考えられます。
まとめ
今回の検証では、同じプロンプトを与えた場合でも、Figmaデザインデータの作り方がAIの実装結果に大きく影響することが確認できました。
前回の記事ではget_design_contextで取得されるコードの質が変わる点を紹介しましたが、今回はその違いが最終的な実装結果にどのように波及するかを検証しました。
AIにより良いコードを書いてもらうために、プロンプトを工夫することも重要ですが、それ以前にAIに渡すデザインデータの質を上げること。
つまり、Figmaでの設計そのものをAIフレンドリーにすることが、安定した実装品質につながる重要な要素だと考えられます。