🧞♂️
【Figma&OpenAI】FigmaからTailwind CSSのconfigファイルと連携したコードを生成してAIで出力してみる
この記事の内容
FLINTERSブログ祭り🏮の記事です。figma、フロントエンド、AIについて
Figmaからコードを生成するためにがんばった話
楽したい
労せず開発したい
👉 Figmaのデザインからtsxのコードを自動で起こしたい
👉👉 さらにTailwind CSSに対応させたい
👉👉👉 さらにさらにtailwind.config.js(ts)に設定してあるテーマを反映させたい
👉👉👉👉 🧘
既存のプラグインを見る＆比較
まずは、既存でどんなプラグインがあるか調査＆比較
比較用のFigmaのデザイン
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
特徴
- 無料かつオープンソースなプラグイン
生成結果
生成結果全文
<div className="w-[375px] h-[812px] relative bg-white">
<div className="w-[375px] h-[812px] left-0 top-0 absolute bg-white" />
<div className="w-[148px] h-10 left-[16px] top-[104px] absolute">
<div className="left-0 top-0 absolute text-black text-4xl font-normal font-['Comfortaa']">Register</div>
</div>
<div className="w-[343px] h-[52px] left-[16px] top-[176px] absolute">
<div className="w-[343px] h-[52px] left-0 top-0 absolute bg-white border-2 border-black" />
<div className="left-[17px] top-[17px] absolute text-black/opacity-50 text-[15px] font-normal font-['Roboto']">Email address</div>
</div>
<div className="w-[343px] h-[52px] left-[16px] top-[244px] absolute">
<div className="w-[343px] h-[52px] left-0 top-0 absolute bg-white border-2 border-black" />
<div className="left-[17px] top-[17px] absolute text-black/opacity-50 text-[15px] font-normal font-['Roboto']">Create password</div>
</div>
<div className="w-[343px] h-[52px] left-[16px] top-[312px] absolute">
<div className="w-[343px] h-[52px] left-0 top-0 absolute bg-yellow-500 rounded-md border-2 border-yellow-500" />
<div className="left-[153.29px] top-[19px] absolute text-center text-white text-[13px] font-black font-['Roboto'] uppercase tracking-wide">next</div>
</div>
<img className="w-[12.21px] h-[11.35px] left-[16px] top-[60px] absolute" src="https://via.placeholder.com/12x11" />
<div className="w-[375px] h-11 left-0 top-0 absolute">
<div className="w-[68px] h-4 left-[293px] top-[15px] absolute">
<div className="w-[25px] h-3 left-[43px] top-[2px] absolute">
<div className="w-[22px] h-[11.33px] left-0 top-[0.33px] absolute opacity-30 rounded-sm border border-black" />
<div className="w-[18px] h-[7.33px] left-[2px] top-[2.33px] absolute bg-black rounded-sm" />
</div>
<div className="w-[21px] h-[15px] left-[20px] top-[1px] absolute">
<img className="w-[15.33px] h-[11px] left-[2.67px] top-[1.33px] absolute" src="https://via.placeholder.com/15x11" />
</div>
<div className="w-[18px] h-3 left-0 top-[2px] absolute">
<img className="w-[17px] h-[10.67px] left-[0.67px] top-[0.67px] absolute" src="https://via.placeholder.com/17x11" />
</div>
</div>
<div className="w-14 h-[23px] left-[21px] top-[8px] absolute">
<div className="w-[54px] left-[0.33px] top-[6px] absolute text-center text-black text-[15px] font-semibold font-['SF Pro Text']">9:27</div>
</div>
</div>
</div>
-
w-[375px]のようなArbitrary Valuesと呼ばれる直接指定が多い
<div className="w-[375px] h-[812px] relative bg-white">
- 近い色を自動でTailwind CSSのデフォルトの色に設定される、ここの
border-yellow-500は#eab308だが、Figmaで設定した色は本当はff4b00 -
absoluteなども多い
<div className="w-[343px] h-[52px] left-0 top-0 absolute bg-yellow-500 rounded-md border-2 border-yellow-500" />
Figma to Tailwind CSS
特徴
- Tailwind CSSに特化したFigma to Codeプラグイン
- 無料で３日間コード生成はできるが、コードをコピーするのに$29かかる
生成結果
-
leftやtop、absoulteが消えていたり、Figma to CodeよりはArbitrary Valuesが少なくより手作りコードに近い
-
buttonも対応、色はTailwindのデフォルトに存在しない場合border-[#FF4B00]のようにArbitrary Valuesになっている
-
svgも生成してくれる
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
特徴
- AIをつかったFigma to Codeプラグイン
- 無料だと、月50コード生成まで無料
- Basic(年間月$19、1ヶ月$24)だと、月500コード生成まで無料（他も色々）
- Growth(年間月$24、1ヶ月$49)だと、月2500コード生成まで無料（他も色々）
- 価格設定
- 自分で作ったコンポーネントを反映できる
- 生成したコードをそのままプロジェクトにインストールできる
- なんならインストールしなくてもAPI経由で使える
生成結果
生成結果全文
import * as React from "react";
function MyComponent() {
return (
<div className="flex flex-col justify-center mx-auto w-full text-base text-black bg-white max-w-[480px]">
<div className="flex flex-col px-4 pt-4 pb-20 w-full bg-white">
<div className="flex gap-5 justify-between self-start ml-4 font-semibold tracking-tight text-center whitespace-nowrap">
<div className="my-auto">9:27</div>
<img
loading="lazy"
src="https://cdn.builder.io/api/v1/image/assets/TEMP/bf726325a393d53b06ea6dc79bc40f34d9e76e5fb0eef67c62993e906fc657c2?"
className="shrink-0 aspect-[4.17] w-[68px]"
/>
</div>
<img
loading="lazy"
src="https://cdn.builder.io/api/v1/image/assets/TEMP/31f970f8c0a58e640266f61d2f01c7fbd583cce431a7bd18b2cfa725bc5c34c9?"
className="mt-7 w-3 aspect-[1.09] fill-black fill-opacity-80"
/>
<div className="mt-9 text-4xl tracking-tight">Register</div>
<div className="justify-center items-start px-4 py-5 mt-8 bg-white border-2 border-black border-solid text-black text-opacity-50">
Email address
</div>
<div className="justify-center items-start px-4 py-5 mt-4 bg-white border-2 border-black border-solid text-black text-opacity-50">
Create password
</div>
<div className="justify-center items-center px-16 py-6 mt-4 mb-72 text-sm font-black tracking-wide text-center text-white uppercase whitespace-nowrap bg-yellow-500 rounded-md border-2 border-yellow-500 border-solid">
next
</div>
</div>
</div>
);
}
- UIを提供してくれている
-
flexが使われていてより手作りに近いコードに -
Arbitrary Valuesがほぼ存在しない
<div className="flex flex-col justify-center mx-auto w-full text-base text-black bg-white max-w-[480px]">
- ボタンのところ、色はFigma to Codeと同じ
border-yellow-500になっている -
<button />にはなっていない
<div className="justify-center items-center px-16 py-6 mt-4 mb-72 text-sm font-black tracking-wide text-center text-white uppercase whitespace-nowrap bg-yellow-500 rounded-md border-2 border-yellow-500 border-solid">
next
</div>
他の参考にしたプラグイン
Anima - Figma to Code: React, HTML, Vue, CSS, Tailwind
概要
- AIをつかったFigma to Codeプラグイン
- 無料だとコード出力自体できない
- Pro($24、1ヶ月)だと、500コード生成まで無料（他も色々）
- Growth($39)だと、2500コード生成まで無料（他も色々）
価格設定
Figma to React Component
概要
- FigmaからReact Copomnentを出力
- Tailwind CSSは対応してない
- このプラグイン作成の解説がとても丁寧
今回求めているもの
- 自身のプロジェクトのtainwind.config.tsを反映させたい
- 無料がいい
👉 オープンソースなFigma To Codeをカスタマイズしよう
プラグインをカスタマイズしてみる
プラグインの仕組み
Figmaのプラグインがどういう仕組みで動いているかは、下記のブログがとっっっっても参考になるのでそちらを参照してください
今回の目標
まずプロジェクトで用いているtailwind.config.tsはこんな感じ
import type { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
const config: Omit<Config, "content"> = {
theme: {
extend: {
colors: {
hoge: {
orange: "#FFB400"
...
なのでFigmaで#FFB400という色を使っていたら、bg-hoge-orangeのようになって欲しい
Figma to Codeのコード生成の流れ
Figma to Codeで色を設定する流れは下記な感じ
-
packages/backend/src/code.tsでFigma上で設定したNodeを受け取る -
packages/backend/src/common/retrieveUI/retrieveColors.ts上の-
retrieveGenericSolidUIColorsで色用の型に変換 -
convertSolidColorで選択したフレームワークによって色変換の処理を分岐-
convertSolidColorの
else if (framework === "Tailwind") { const kind = "solid"; const hex = rgbTo6hex(fill.color); exported = tailwindSolidColor(fill.color, fill.opacity, kind); // tailwind.config.tsを読み込んでその色を設定するbuildThemeTailwindColorsを追加 const themeColor = buildThemeTailwindColors(hex); if (themeColor) { colorName = themeColor; } else { // tailwind.config.tsのextendsのcolorsに // fill.colorが存在しない場合には通常と同じ挙動をする const hexNearestColor = tailwindNearestColor(hex); colorName = tailwindColors[hexNearestColor]; } } -
-
buildThemeTailwindColors()はtailwind.config.tsのcolorを読み込んでその色と、引数で渡ってきた色が合致するかを調べるだけなので、時間があれば書けるし長いので割愛🙇
※注意、fill.colorは１６進数ではなく、0-1に正規化されたデータ
例えばこうなってる
{
"r": 0.4470588266849518,
"g": 0.4431372582912445,
"b": 0.4431372582912445
}
結果
独自のthemeを反映したコードを生成することができた!!!れ!
...が、「既存のプラグインを見てみる」で説明した通りArbitrary Valueやabsoluteが多かったりとまだ使い物にはならない
なので、次はAIに力を借りてみる
OpenAIの力を借りる
プロンプト
今回はOpenAIのAssistansを使ってみる
Instructionsに、色々試した結果のプロンプトを打ち込んだ
プロンプト
下記の#1 はfigmaから自動生成したtailwindcssのコードです、
#2は手動でかいたコードです
#1では下記のような問題点があり、その問題点を修正しながら#2のように書き直したものが#3になります、あなたはこのように自動生成されたtailwindcssのコードをよりよい手動のものに近づけることができます、またその際には下記の注意点を気をつけてください
# 問題点
### 1. レイアウトが固定的
- 固定幅や固定高さが指定されています（例：`h-[812px]`や`w-[375px]`）。
- 自動生成されたコードは、特定の画面サイズに依存していることが多いです。
### 2. クラス名が細かすぎる
- たくさんの細かいCSSクラスを使っています（例：`px-4`, `py-3`など）。
- これにより、コードが読みにくく、メンテナンスが難しいです。
### 3. 不要な要素が多い
- 意味のない`div`要素が多くて、HTMLの階層が深くなっています（例：`relative`要素や`absolute`要素がたくさんある）。
### 4. スタイルの一貫性が欠けている
- 例えば、フォントの指定がバラバラで、統一感がありません（例：`font-['Hiragino Sans']`と`font-['SF Pro Display']`）。
# 注意点
### 1. flexを余計に書きすぎない
### 2. コメントは不要
#1
（Figma to Codeで生成したコード）
#2
（手作りコード）
結果2
コード全文
<div className="w-full h-screen bg-white relative flex flex-col items-center">
<header className="w-full h-11 flex items-center justify-between px-4 border-b border-neutral-200">
<div className="text-lg font-semibold">9:27</div>
<div className="flex items-center space-x-2">
<div className="w-5 h-5 bg-gray-400 rounded-sm"></div>
<div className="w-5 h-5 bg-gray-400"></div>
<div className="w-5 h-5 bg-gray-400"></div>
</div>
</header>
<div className="mt-4 w-full px-4">
<h1 className="text-4xl font-comfortaa">Register</h1>
<div className="mt-8 w-full">
<div className="mb-6">
<label className="block text-sm text-gray-500">Email address</label>
<input
type="email"
className="w-full h-12 px-4 border-2 border-black rounded-md"
/>
</div>
<div className="mb-6">
<label className="block text-sm text-gray-500">Create password</label>
<input
type="password"
className="w-full h-12 px-4 border-2 border-black rounded-md"
/>
</div>
<button className="w-full h-12 bg-hoge-orange text-white font-black text-lg uppercase rounded-md">
Next
</button>
</div>
</div>
</div>
- コードはすごいシンプルになった
-
buttonやinputも対応している - 表示した結果も大体合っている
コードをプロジェクトに貼り付けて表示した結果
まとめ
Figmaからノーコード開発!!
はさすがにプロパガンダだが、かなり開発の手助けにはなりそうなものができた
ちなみに、公開しないでチームで使う場合は下記が参考になった
開発で用いつつ、適宜修正も入れていく運用でやってみる、乞うご期待!!
参考文献
Discussion