概要
で解説したとおり実際にプラグインを使ってデザインを出力して動作確認する手順を解説
環境
- MacBookPro M2 Max 12コア 96GB
- Node v22.12.0
Figmaでデザインを作る
https://www.figma.com/community
で無料と有料のテンプレートが公開されているので、プラグインの動作確認の他にもデザインの参考になると思うので活用しています。
今回は、上記のwebsite-prototypeという無料テンプレートを使ってFigmaプラグインで出力したReactコードが使えるかの解説しますが、自作できるor作っているのであればそれを使ってください。
Figmaプラグインを使用する
プラグインを使用する前にどのデザインのReactコードを生成するか選ぶ必要があります。
今回は、上記のトップ画面のデザインで動作確認しようと思います。
デザインのタイトルを選択して右クリックからメニューを開きます（サイドメニューからでも同様に操作できます）。
右メニューからPluginにカーソルを当てて、Manage plugins...をクリックすると以下の小さいウィンドウが表示されるので、今回は一部無料で使えるbuilder.ioを検索して選択します。
すると以下のようにウィンドウが変わるのでExport to Codeをクリックしてしばらく待つとView Codeボタンが表示されるためクリックします。
builder.ioは、Figma内ではなくbuilderのサービス画面上でコード出力することになるため、以下の画面に遷移してReactコードを出力します。
もしデザイン量の多いデータをコード出力しようとするとGenerate Codeボタンではなく、以下の表示で有料プランが必要になるため、活用する前提であれば有料プランにアップグレードして、検証したい目的であれば他のデザインで試すようにしましょう。
FigmaプラグインからReactコード生成
今回は、サイドメニューのGenerated Codeの各項目を以下のとおりにして解説します。
- Framework: React
- Styling: Tailwind
- Language: TypeScript
- Testing Framework: None
Generate Codeボタンをクリックしてしばらくすると以下のようにReactコードが生成されます。
Reactプロジェクト準備
今回は、TypeScriptとTailwind CSSを活用するため、npx create-react-app my-app --template typescriptでTypeScriptテンプレートのReactプロジェクトを生成して、Tailwind公式ドキュメントどおりにセットアップしてReactプロジェクトを準備します。
動作確認
出力されたものをそのままコピペして、HomePage.tsxのコードはsrc/App.tsxに入れてexport const HomePage: React.FC = () => {をfunction App() { ... };とexport default App;の形に変更することで以下のようにプラグインで生成されたReactコードそのままで動作確認することができます。
ただし前回も解説したとおりで細かいデザイン崩れや適応できていない箇所などあるため、そこはよしなに編集して調整が必要になりますが、0→1で作るよりも遥かに開発しやすいと思います。
