Builder.ioを使ってコーディングをお願いしてみる
Builder.ioとは?
ウェブサイトやアプリのUIを構築できるビジュアル開発プラットフォーム
今回の用途
Builder.ioの機能1つである、デザインからコードの自動生成を見てみます
以下が可能です
✅ デザインファイルを解析して、対応するHTML/CSS/JSXを出力
✅ ReactやNext.jsのコンポーネントとしてコードを生成
✅ Tailwind CSSやCSS Modulesと統合可能
行うこと
Figmaで用意したデザインをBuilder.io(Figmaプラグイン)を使って、HTML,CSSのコードの自動生成をしてもらいます。
出力設定は以下にします。
HTML(Reactなどの他フレームワークも可)
TaildwindCSS
注)デザインツールFigmaが必要なのと、プラグイン使用のため開発モード(有料)が必要です
コード生成までの方法
figmaでデザイン用意
デザインコンポーネントの用意として、無料でインポートできるPreline UIのfigmaデザインを用意しました。赤枠のコンポーネントを変換してみます。
プラグイン設定・実行
figmaプラグインにて、Builder.ioを選択肢、Export to Codeで変換作業します
終了すると、builder.io側のサービスに移行します
builder.io側でコード生成
コード生成設定をして、Gnerate Codeで生成を開始します。
生成中。。
コード生成の結果
背景の画像が少し違ってそうだが、中のコンテンツは割と良さげに見える。。
実際のデザインと比較すると、それでも少しだけズレてそう。
タグの部分のpaddingが違ってそうなので、そこの修正入れてみるとだいぶ合ってきた。
他にやってみたこと
・ページ丸ごと生成してもらう
→ 大きなズレが発生
→ コードの方も複雑に
気になる点
・不要なクラスが少しある(flex flex-colやoverflow-hidden)
・タグ系や特定の要素はpaddingなど少しずれがある
まとめ
・思っていたよりも、実際のデザインに近いものがコード生成された印象
・ただ生成時の方法やコードの修正は多少必要な感じ
・シンプルなデザインのものは実用がしやすそう(複雑なデザインはまだ難しそう)
Discussion