Builder.ioはノーコードやローコードでウェブサイトやアプリケーションを構築できる非常に便利なプラットフォームです。FigmaのBuilder.ioプラグインを利用することで、デザインから開発へのプロセスを大幅に効率化し、直感的にウェブページやコンテンツを作成することが可能です。
コード生成だけでなく、デザインデータをプラットフォーム上で編集出来たり、AIを利用したデザイン生成も可能となっているため今後さらに利用シーンが増えそうです。
本記事では、FigmaのBuilder.ioプラグインについて、「利用シーン」と「操作方法」の2つのセクションに分けて詳しく説明します。
利用シーン
デザインデータからコードの生成
Builder.ioプラグインを使うことで、Figmaで作成したデザインをすぐにウェブページやアプリのコードに変換できます。
HTML,CSS,JSはもちろんReactなども対応しています。
正しく構築するためにデザインデータを正しく作成する必要があるので、注意点に関しては公式をご確認ください。
▼コード生成元のデザインデータに関する注意
https://www.builder.io/c/docs/figma-best-practices#best-practices-with-builders-figma-plugin
コンポーネントのマッピング、デザインシステムの管理
コンポーネントや関数をマッピングすることができます。
詳細は公式サイトをご参照ください。
▼デザインシステムに関する情報
https://www.builder.io/c/docs/cli-mapping
WFやデザインをAIで生成できる
こちらはまだ公開前ですが、レガシー版はOpen AIのAPIを叩くことで生成が可能でした。
現在コード生成の管理画面にも一部AIが搭載されているのですが、こちらではOpen AIの連携が不要なため、最新機能も自然言語で簡易的に利用可能ではないかと期待しています。
リリースされた際に通知を受け取りたい方は以下から登録が可能です。
▼デザインAIのリリース通知申し込みURL
https://www.builder.io/make-real-notify-me
▼一部公開されているビジュアルエディタAI
構成やデザインを生成してくれます。
既存サイトのインポート
これは「html.to.design」プラグインと同じ機能で、既存サイトをデザインデータとしてインポートすることができます。
操作方法
プラグインのインストール
1.Figmaの画面下部にあるプラグインをクリックします。
2.「Plugins」タブを選択し、検索バーに「Builder.io」と入力します。
3.プラグインが表示されたら、「実行」をクリックしてインストールを完了させます。
レイヤーの整理（正しくコードを生成するために必要）
1. レイヤーの整理
Builder.ioに正しくインポートされるように、Figma内のレイヤーを適切に整理します。
明確な命名規則を使用、コンポーネントやフレームを活用して階層構造をはっきりさせます。
2. エクスポート設定
Builder.ioでは画像やベクターグラフィックを適切に扱うため、SVGやPNG形式でエクスポートできるようにしておきます。
必要に応じてFigmaのグリッド設定を調整し、レスポンシブデザインを意識した配置を心掛けましょう。
コードを生成する
上記で紹介した「Export」タブから生成が可能です。任意のフレームを選択してから、「Export to Code」をクリックします。
コード生成はプラットフォームのダッシュボードで行います。ブラウザ操作になるので、適宜アカウントを発行してください。
▼開発タブからワンクリックでコードを生成できます
Builder.io内での編集
アップロードしたデザインは、Builder.ioのエディタでさらに編集できます。
▼既存のデザインをAIの提案でブラッシュアップできる機能（2025/1/5時点ではまだリリースされていません）
▼直感的にデザインのカスタムが可能
各ボタンから読み込んだデザインデータを編集することができます
▼レイヤー構造の確認が可能
▼イベントの設定が可能
▼コメント可能
ライブプレビューと公開
Builder.ioでは、編集したデザインをリアルタイムでプレビューすることができます。
エディタ内のプレビュー機能を使ってデザインを確認し、問題がなければ「Publish」をクリックして公開します。
操作のポイント
エクスポート前の確認: インポート対象のデザインを事前にプレビューし、問題がないか確認しましょう。
リアルタイム編集の活用: Builder.ioの強力なリアルタイム編集機能を利用して、迅速に変更を反映させることができます。
作業内容はBuilder.ioのクラウドに自動保存されるため、バックアップの心配がいりません。
まとめ
Builder.ioプラグインを使えば、Figmaで作成したデザインを簡単にウェブサイトやアプリに展開でき、デザインと開発のプロセスを効率化できます。「利用シーン」で示した通り、このプラグインはプロジェクトのさまざまな段階で活用可能です。また「操作方法」では、初めてのユーザーでも簡単に使用できる手順を詳しく説明しました。 ぜひBuilder.ioプラグインを活用し、デザインから開発までの作業をスムーズに進め、プロジェクトの成功に貢献してください！
他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。
