はじめに
Next.js (App Router) でWebアプリを開発する際、Figmaデザインを効率的にコード化したいと思いませんか？
AI搭載プラットフォームBolt.newとFigmaの連携機能を使えば、Figmaフレームをワンクリックでピクセル忠実なNext.jsコードに変換できます。
1. Bolt.new x Figma連携とは？
Bolt.newは、テキストやデザインからNext.jsアプリを自動生成するAI開発プラットフォームです。
2024年以降、Figma連携機能（Figma-to-codeで実績のあるAnima技術を利用）が追加され、Figmaフレームを高精度にコード化できるようになりました。
2. Figma取り込み手順 (簡単3ステップ)
- Figma: コード化したいフレームを選択し、「Copy link」でURLをコピーします。
- Bolt.new: 「Import from Figma」を選び、コピーしたURLを貼り付けてインポートを実行します。
- 完了: 数十秒でFigmaデザインが反映されたNext.jsプロジェクトが生成され、ライブ実行されます。
ポイント:
- フレームのリンクのみ有効です（ページ全体やファイルURLは不可）。
- Figmaファイルに閲覧権限が必要です。
- アドレスバーに
bolt.new/ + FigmaフレームURLを直接入力してもインポート可能です。 - 初回はFigmaへのアクセス許可を求められることがあります。
3. Figma要素からNext.jsコードへの変換
Bolt.new (Anima) はFigmaのデザイン要素を解析し、HTML/JSX構造とCSS（主にTailwind CSS）を生成します。
特にAuto Layoutやコンポーネントを適切に使うと、より整理されたコードが期待できます。
| Figma要素/機能 | Bolt.newでのコード変換 (Next.js / Tailwind) |
|---|---|
| フレーム | Next.jsのページコンポーネント (app/page.tsx等) に。複雑な場合は子コンポーネント化。 |
| Auto Layout |
CSS Flexbox (Tailwindクラス flex, gap-*等) でレイアウトを再現。 |
| レスポンシブ設定 | Animaプラグイン設定に基づき、メディアクエリ付きコードを生成。 |
| コンポーネント | Reactコンポーネントファイルとして出力される傾向あり。 |
| バリアント | 表示中の状態のみ静的にコード化。他状態 (Hover等) は別途実装が必要。 |
| 画像・アイコン |
<img> または Next.js <Image>。SVGはコード化されることが多い。 |
| テキスト | HTML要素 + スタイルはTailwindユーティリティクラスで適用。 |
| エフェクト | CSS (box-shadow等) で再現可能な範囲でコード化。 |
| プロトタイプ挙動 | 引き継がれません。インタラクションは別途実装が必要です。 |
4. 生成されるNext.jsコードの特徴
-
構造: Next.js (App Router) 構成 (
src/app/以下) に準拠。 - スタイリング: 主にTailwind CSSを使用。設定ファイルも含まれます。
- 品質: 高いデザイン再現性。TypeScriptベースの関数コンポーネント。
-
考慮点:
- Next.js規約 (
use client等) の誤りを含む可能性があり、手動修正やAIへの修正指示が必要な場合があります。 - チームの規約に合わせ、リファクタリング (コンポーネント分割、命名規則統一、Tailwindクラス整理等) を推奨します。
- UI以外のバックエンド連携コードが生成されることもあります。
- Next.js規約 (
初期実装としては高品質ですが、最終的な調整は開発者が行う前提です。
5. 注意点・制限事項
- インポートは1フレームずつ行う必要があります（一括インポート不可）。
- Figmaのデザインを更新しても、Bolt.new上のコードは自動更新されません（再インポート or 手動修正）。
- 生成されたレスポンシブコードは、特定の画面幅で微調整が必要になる場合があります。
- スマートアニメーション、GIF、Figma Variables、プロトタイプのインタラクション設定などは非対応です。
- Bolt.new自体が比較的新しいサービスのため、生成結果の検証は必須です。
6. まとめ：Bolt.new Figma連携の活用
Bolt.newのFigma連携は、UIの初期実装を劇的に高速化できる強力な機能です。
活用ポイント:
- Figma側: Auto Layoutやコンポーネントを活用し、構造化されたデザインを作成する。
- 開発側: 生成コードをレビューし、Next.js規約遵守、レスポンシブ調整、チームスタイルへの適合を行う。インタラクションは別途実装する。
これらを意識することで、デザイナーと開発者の連携を強化し、開発プロセス全体の効率化が期待できます。
Next.jsプロジェクトでの活用を検討してみてはいかがでしょうか。
会社紹介
株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。
詳しくは 公式サイト までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/