この記事ではFigmaのコンポーネント機能を使ってWebデザインを効率化する方法を解説します。
コンポーネントの名前の付け方、追加したパターンの切り替え、コンポーネントのネストなどの機能の他に、便利なプラグインやコンポーネントを活用したテンプレートも紹介します。
FigmaのWeb制作を爆速化させるコンポーネントの機能と使い方
Figmaで作ったデザインはコンポーネントとして登録することで再利用が可能になります。
ボタンや見出し、アイコンなどよく使うものをコンポーネント化しておくとアセットパネルから選んでコピー(インスタンス)を使用できます。
ここからはFigmaのコンポーネント機能の基本的な特徴について説明します。
インスタンスとメインコンポーネントについて
Figmaでコンポーネントをコピーしたものはインスタンスと呼ばれます。
インスタンスを作成するには、アセットパネルからコピーする、メインコンポーネントから直接複製する方法があります。
インスタンスには以下のような特徴があります。
- メインコンポーネントの変更が反映される
- インスタンスで変更したスタイルは上書きされずそのまま
- メインコンポーネントから切り離してコンポーネントを解除できる
- 別パターンがある場合は切り替え可能
インスタンスはテキストやスタイル、要素の配置などメインコンポーネントの変更が反映されます。
ただし、インスタンス側で変更していた場合は、メインコンポーネントで変更しても上書きされることはありません。
また、インスタンスはoption+command+Bで「インスタンスの切り離し」が可能です。切り離すと通常のフレームに戻り、メインコンポーネントの変更は適用されません。
コンポーネント名とアセットパネルでの整列について
コンポーネントはコンポーネント名に/を入れることでフォルダのように管理することができます。
同じような機能はSketchというツールにもありましたが、Figmaの場合は例えば次のような感じです。
layout/card/type1
layout/card/type2
layout/card/type3
element/button/normal
element/button/hover
element/button/activeこのように名前をつけておくことで、アセットパネルでフォルダを開いて下の階層を表示するようにできます。
フォルダのように階層表示するには、アセットパネルの検索フォームの横にある設定アイコンから「サブフォルダを表示」を選んでおきます。
このように、コンポーネントは階層化しておくことでライブラリ内の検索もしやすくなります。
コンポーネントの切り替え機能について
コンポーネントは階層化して複数のパターンを作ることができます。
それぞれのパターンは個別にアセットパネルやメインコンポーネントからコピーできますが、インスタンスから直接切り替えることもできます。
インスタンスを選択して右パネルのインスタンスの項目のところに画像のようなメニューが表示されます。
ここでパターンを入れ替えることですぐに切り替えることができます。
コンポーネントのネストについて
コンポーネントは単体での利用のほか、コンポーネント(インスタンス)同士を組み合わせて別のコンポーネントを作成することもできます。
例えば、フォームパーツのインスタンスを組み合わせて問い合せやアンケートなど、より複雑なコンポーネントを作成できます。
コンポーネント内のコンポーネントもパターンの切り替えができ、メインコンポーネントの変更も適用されます。
FigmaのコンポーネントでWebデザイン効率化するコツ
ここからはコンポーネントを使ったWebデザイン
コンポーネント名の命名規則を作る
コンポーネントは名前に/をつけることでフォルダのような管理ができます。
その場で適当に名前をつけてもコンポーネントとして使うことができますが、命名規則を作って管理するとアセットパネルから効率よくコンポーネントを探すことができます。
パターンを追加しやすくする
いきなりデザインシステムのようなものを作ろうとすると大変なので、まずはパターンライブラリとして追加していくのがおすすめ。
命名規則に従ってパターンをいくつでも追加していけるので使えば使うほど引き出しが増えていく感じになります。
コンポーネントだけでレイアウト作れるようにする
コンポーネントだけでレイアウトを作れるようになると、手書きのラフスケッチやワイヤーフレームから直接レイアウトを作成できるようになります。
コンポーネントはどんなデザインにも対応できるように、シンプルなスタイルを当てておくと効率よくなります。
スタイルだけでデザインできるようにする
コンポーネントでレイアウトを作成した後は、スタイルの変更だけでデザインを作れるようにしておくと効率が上がります。
作りたいデザインやテーマに合わせて、フォントや配色、余白などを調整するだけでプロトタイプが出来上がるのでかなり時間短縮することができます。
Figmaのコンポーネントを活用したテンプレート
Figmaのコンポーネント機能を活用したテンプレートをいくつかご紹介します。
どれも使いまわせるものばかりなのでコピーしてカスタマイズしたり、自作のUIを追加していくことができます。
Figma公式のWebデザインテンプレート(英語)
Figmaの公式サイトからテンプレートをダウンロードできます。アプリのUIや管理画面、ワイヤフレームなどいろんなテンプレートが揃っています。
テンプレートの詳細画面から簡単にインポートして使えるので、すぐに使用することができます。
LPを量産できるHTMLファイル付きテンプレート(日本語)
-> 日本語対応のLP(ランディングページ)テンプレートはこちら
Figmaで使えるLPテンプレートはブロックを組み立てるだけで簡単にレイアウトが作れるテンプレートがおすすめ。
こちらのテンプレートでは150以上のUIコンポーネントを使ってブロックのように組み立てるだけで簡単にレイアウトを構築できます。短時間に複数パターンのLPを作成できるため、LPを量産したいときにおすすめ。
Figmaのデザインファイルに加えてBootstrap5で作成されたHTMLファイルも付属しているので効率よくHTMLでコーディングすることもできます。
Webサイト向けデザインが豊富なHTMLファイル付きテンプレート(日本語)
こちらはWebサイト向けのデザインテンプレート。ブロックを組み立てるだけですばやくレイアウトを構築することができ、Webデザインを効率化できます。
使えるUIコンポーネントは200以上あるのでどんなタイプのWebサイトでも使用できます。
こちらもデザインファイルに加えてHTMLファイルが付属しているので効率よくHTMLコーディングすることができます。
Figmaのコンポーネントを使いやすくするプラグイン
Figmaには大量のプラグインが登録されていますが、中にはコンポーネントを使いやすくしてくれるプラグインもあります。
以下でFigmaで使えるコンポーネントにおすすめのプラグインを紹介します。
親コンポーネントを解除できるプラグイン
子コンポーネントはすぐに解除できるのですが、親コンポーネントは直接解除できないので少し手間がかかります。
このプラグインで1発解除できるようになります。
子コンポーネントを素早く探せるプラグイン
コンポーネントを長く使っているとどこに子コンポーネント(インスタンス)があるか探すのに一苦労します。
このプラグインで一括検索できるようになります。
Storybookコードとリンクできるプラグイン
StorybookのストーリーをFigmaに埋め込んでデザインと実装を簡単に比較できるようになります。
ブラウザのタブを行ったり来たりしなくてよくなるので連携機能があると便利です。
コンポーネントの配置を整理してくれるプラグイン
作成したコンポーネントは結構ぐちゃぐちゃに配置されてて残念な感じになってしまいがち。
このプラグインを使えば、指定した幅でバシッと整理整頓してくれます。
まとめ
Figmaのコンポーネント機能は使いこなすとWebデザインを効率よく行えるようになります。
以前は毎回ゼロからデザインしていたのが、コンポーネント化して再利用できるようになると完成までのスピードが3倍くらい早くなりました。
Figmaは今後も継続的に開発が進んでいくのでコンポーネントに関しても新しい機能があれば記事に追加していきたいと思います。