FigmaからReactのコード生成するプラグインを使ってUIコンポーネントを作成してみよう

Figmaはサンフランシスコ発の「すべての人がデザインを利用できるようにする」というビジョンのもと生まれた、現在では世界中の方々に利用されているデザインツールです。WebサイトやWebアプリケーションのUIデザイン、サイトマップ、ワイヤーフレーム、プレゼンテーション資料作成などに利用できるようです。

 
今回は、ボタンのコンポーネントを作成することで、Figmaの基本的な機能に触れた後、Figmaのプラグイン「Anima-Figma to React and HTML」を使ってReactのコードを生成してみたいと思います。実際に、手を動かして「UIコンポーネント」について考える機会にして頂ければ幸いです。

 

Figmaデザインの基礎～スタイル・コンポーネント・オートレイアウト

 
Webデザインを効率的に行う為に、繰り返し利用する設定やパーツを登録しておくのがお勧めです。まずは色やテキストのスタイルを登録するところから始めていきましょう。

スタイルとは、オブジェクトに適用できるプロパティを登録し、再利用できる機能です。デザインの最初の段階で色スタイルやテキストスタイルを登録しておくことで、使用する色やテキストのばらつきを減らすことができます。

 

色スタイルの登録

 
シェイプを複数作成し、それぞれのシェイプに色を登録していきます。

 

ツールバーのシェイプツールから、[ 楕円(O) ] を使用します。キャンバスをクリックし、[ Shift ] を押しながら正円を作成します。[ Alt ] ＋[ Shift ] を押しながら、右にドラッグ＆ドロップをします。

 
シェイプの色を変更

 
円を1つ選択し、右サイドバーの [塗り] パネルでカラーコードを入力します。左から順に次の4つの色を指定していきましょう。

名前に色スタイル名を入力して、４色の色スタイルを登録します。

テキストスタイルの登録

 
　色スタイルと同様に、テキストについても、文字のサイズ、色、行間、文字間など、繰り返し使うパターンを登録していきたいと思います。

 
ここでは、5種類のテキストサイズを用意して、テキストスタイルを作成します。

 
スタイル登録用のテキスト作成

ツールバーから[テキスト（T）] ツールを選択し、「TextStyle/64px-Regular」と入力します。

テキスト：Noto Sans JP
ウェイト：64
行間 ：160（％）　　　　　

と指定します。

 
テキストの複製

「TextStyle/64px-Regular」のテキストを選択し、Altを押しながらテキストを下にドラッグして複製します。合計で5つのテキストを作成し、サイズの値を変更します。

 
フォントサイズを指定する

テキストを変更後に「TextStyle/48px-Regular」以下のテキストのサイズを指定します。フォントの種類と行間は変更せずに進めます。サイズ変更後に、選択範囲の右下に表示される [均等配置] アイコンをクリックします。そして、右サイドバーから[アイテム間の間隔] を「16」に指定します。

 
テキストスタイルの登録

テキストスタイルの登録について、ここでは作業を効率化するためにプラグイン「Styler」を使用します。プラグインの使い方も確認しながら進めましょう。

 

「Styler」を使用してテキストスタイルを登録

テキストを全て選択した状態で、[リソース] ツールを開きます。

登録済みのテキストスタイルは、キャンバスをクリックして右サイドバーから確認できます。また、テキスト ⇒ [スタイル] からも確認できます。

 

オートレイアウトを使用したボタンの作成

 
ボタンテキストの作成

オートレイアウトを追加

「Click Button」を選択し、[Shift＋A] でオートレイアウトを追加します。

オートレイアウト（自動レイアウト）はフレームとコンポーネントに追加できるプロパティのことで、使用することで、マージン（外側の余白）やパディング（内側の余白）などが自動で維持されます。

 
ボタンの背景色を変更

 
オートレイアウトを適用した「Click Button」のフレーム名をクリックし、フレームを選択します。右サイドバーの[塗り] パネルから [スタイル] アイコンをクリックし、色スタイルから[Green] を選択すると、フレームの色を変更できます。

 
テキストの色を変更

「Click Button」のテキストをクリックし、右サイドバーの[塗り] パネルから、[スタイル] アイコンをクリックします。色スタイルから[White]を選択します。

 
ボタンの角を丸くする

ボタンのフレームを選択し、右サイドバーの[フレーム] から[角の半径] を「50」にします。


 
作成したボタンのフレームを選択し、ツールバーの [コンポーネントの作成] アイコンをクリックして、コンポーネントを作成します。

ここで作成したボタンを再利用したい場合は、左サイドバーの[アセット] タブから「Button」と検索します。

 

バリアント（プロパティ）を追加する

 
バリアントとは、１つのコンポーネントにバリエーションを作成、追加できる機能で、基本のデザインは統一しながらコンポーネントにパリエーションを追加することができます。

 

今回は
「通常のボタン」
「フォーカスがあたった場合のボタン」
「クリックされた場合のボタン」

の3つのバリアントを作成したいと思います。

 

まず、コンポ―ネント化したボタンを選択した状態で、画面上部の赤枠の[バリアントの追加] を押してバリアントを追加します。

プロパティ名称を「プロパティ１」⇒「状態」に変更します。

各バリアントの名称を変更

各バリアントの名称を変更します。デフォルトはそのままで、
「状態=バリアント2」を「状態=フォーカス」に、「状態=バリアント3」を「状態=クリック」にします。

 

デフォルトのボタンに動きをつける

 
デフォルトのボタンコンポーネントを選択した状態で、右側の「プロトタイプ」タブから、インタラクションの「+」を押して「インタラクションの詳細」の設定を行います。

フォーカスのボタンに動きをつける

 
次は、フォーカスのボタンをクリックした時の動きをつけます。
同様に、フォーカスのコンポーネントを選択した状態で「プロトタイプ」タブから「インタラクション」の「+」を押して、「インタラクション詳細」の設定をします。

ここまでがボタンのコンポーネントの作成手順となります。

 

Figmaプラグイン「Anima-Figma to React and HTML」について

 
Figmaのデザインから HTML/CSS、やReact のコードを生成できるプラグインで、
デザインしたコンポーネントのパーツをアレンジして使いたい時などに、簡単にコードとして出力してくれます。

 
開かれたページに、コンポーネントをドラッグ＆ドロップしてコードを表示します。

 
[ Download selection ] ボタンを押下すると、zipファイルがダウンロードされます。
中身を確認すると、実際にファイルがエクスポートされたことが確認できると思います。

以上となります。

 
参考文献／WEBサイト：
・阿部文人、今聖菜、田口冬菜、中川小雪『これからはじめるFigma Web・UIデザイン入門』(第3版) 株式会社マイナビ出版（2023年）

・Figmaのコンポーネントに動きをつける
https://qiita.com/tomo_oe/items/89b617a5988f19adc33f