🦔

Builder.ioを使ってコーディングをお願いしてみる

2025/01/30に公開

Builder.ioとは?

ウェブサイトやアプリのUIを構築できるビジュアル開発プラットフォーム

https://www.builder.io/

今回の用途

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