FigmaデザインのReactでの実装：FigmaでクリーンなReactコンポーネントを作成する方法1 min read

FigmaのデザインをReactに変換する方法をお探しですか？この記事では、Figma内でAnimaを使用して、Figmaのコンポーネントをクリーンで規則に則ったReactのコンポーネントに簡単に変換する方法をご紹介します。

AnimaはFigmaのオフィシャルパートナーであり、Animaのコード生成AIは、Figmaの新しい開発モードのパネルにデフォルトで統合されています。Figmaの開発モード用のAnimaがあれば、Figmaのあらゆるコンポーネントやデザイン画面に対して、効率的ですぐにリリース可能、かつメンテナンス可能なコードをリアルタイムで生成することができます。

Animaのコードの特徴はこちら：

• すぐに実行可能なサブコンポーネントサポートつきの機能的なReact + TypeScript/JavaScriptコード
• Figmaのバリアントとプロップをベースにした、ステートフルでインタラクティブなReactコンポーネント
• Figmaオートレイアウト をベースにしたレスポンシブ対応のCSSフレックス
• 通常のCSS、Styled Components、Tailwind CSS、そしてまもなく実装されるCSSモジュールから、お好みでスタイルが選択可能

👉 YouTube – Animaを使用した、Figmaで作成したデザインのReactコードへの変換方法

それでははじめましょう。

Animaを使用した、Figmaで作成したデザインのReactコードへの変換方法

Animaには、Figmaで作成したデザインからReactコードを生成する方法が2種類あります。

1. Reactデザイン画面全体のコードとすべてのフロー(Figmaの編集権限が必要)：
   • Reactに対応したプロトタイプやMVPが必要な場合に最適です。
   • Figmaの画面とすべてのフローをAnimaのウェブアプリに同期する必要があります。
   • ブレイクポイントやページ間のFigmaリンクにも対応した状態で、同期したプロジェクトのReact（JSXまたはTSX）をエクスポートできます。
   • ※外部同期とコード処理業務が必要です。※
2. 個々のコンポーネントのReactコード(Figmaの読み取り専用モードで利用可能)
   • 再利用可能なReactコンポーネントを求めるデベロッパーにとって、最も効率的でアクセスが容易な方法です。
   • Figmaの開発モード内でFigmaのコンポーネントをReactのコンポーネント（JSXもしくはTSX）に変換します。
   • 選択したコンポーネントと個々のサブコンポーネントのコードをすぐに生成し、インスペクトし、コピーできます。
   • ワンクリックでコードパッケージ全文をダウンロードしたり、Codesandboxで開いたりすることができます。

👉方法 1：すべてのフローを含むReactコードを生成する

ステップ1：FigmaでAnimaのプラグインを開きます

ステップ2：「Turn Design to Code」を選択します。

ステップ3：Reactに変換したいFigmaコンポーネンツ、デザイン画面、フローのいずれかを選択します。

この方法を使用すると、Animaはブレイクポイントを使用して定義したさまざまな画面サイズを読み取り、メディアクエリに変換して、あらゆるFigmaデザインからレスポンシブReactコードを生成することができます。

ステップ4：プラグインの下部から「Sync」ボタンをクリックします。

ステップ5：同期が完了したら、「Go to Anima」からAnimaに移動します。

ステップ6：Animaのウェブアプリでプロジェクトに移動し、「< > Code」のアイコンを選択してコードモードに切り替えます。 

ステップ7：フレームワークの選択肢から「React」を選択して、「Javascript」か「Typescript」を選択し、「Change to React」をクリックします。

ステップ8：画面の右上部の「コードをエクスポート」ボタンをクリックして、特定の選択部分、デザイン画面、あるいはプロジェクト全体のコードパッケージをzipファイルでダウンロードできます。

👉方法 2：個々のコンポーネントとデザイン画面に対して React コードを生成する

ステップ1：Figmaのインスペクトパネルの上部のトグルを使って、開発モードに切り替え、「Plugins」のタブを選択します。

ステップ2：開発モードでAnimaのプラグインを実行します。(プラグインのリスト上にない場合は、検索ボックスに「Anima」と入力します。)

ステップ3：Figmaのコンポーネント、レイヤー、フレームを選択します。

ステップ4：右側のパネルに、実行可能なReactとCSSのコードが表示されます。トグルを使って、TailwindとStyled Componentsを切り替えることができます。

トグルを使うと、選択したコンポーネントのインスタンス（「Usage」）と、すべてのバリアントとサブコンポーネントを含む完全な定義（「Source」）を簡単に切り替えることができます。

コードウィンドウの上部から、JSXとTSXを切り替えることもできます。

ステップ5：「Download selection」をクリックして、すべてのコードが入ったzipファイルをダウンロードするか、「Open in Codesandbox」をクリックして、すぐにコードを開くことができます。

CodeSandboxでの表示例はこちら👇 

.

Figmaで簡単に作成できるReactコンポーネントを使ってフロントエンドの構築を2倍速く完了しましょう🚀 無料で試してみる

figmaプラグイン用 Anima