のんびり学ぶ Figma 〜コンポーネント編〜 (1)
目次
このシリーズについて
みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。
自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。
Figmaのご紹介
チーム開発に適したデザインツール
Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。
中でも、複数人で同じデザインファイルを閲覧・編集可能なコラボレーション機能は、チーム開発において重要な機能です。Figmaを使ってサービス設計段階からアイデアを出し合ったり、プロトタイピング機能で画面の遷移を確認しあったりと、これまでチームのメンバーが個別に行ってきた作業を共同で行っていくことで、より素早い意思決定が可能になります。
Figmaは、単なるデザイナーのデザインツールだけではない、デザイナー以外も含めたチームメンバーとデザインプロセスを共有できるチーム開発に適したツールといえますね！
本記事では、そんな Figmaの魅力を、何回かに分けて丁寧に解説できればと思います。
この記事で学ぶこと（それはコンポーネントです！）
いきなりFigmaのすべてを紹介すると大変ボリュームが大きくなってしまいますので、この記事ではFigmaの素敵な機能の一つであるコンポーネントの基礎についてご紹介します。コンポーネント機能はFigmaの機能の中でも最もよく使われるものの一つで、しかも便利な機能が盛り沢山です。コンポーネント機能を覚えることが、Figmaを使いこなす一歩になるでしょう。
まずはコンポーネント機能の概要を学んでいきましょう。基礎を学ぶことで、後半ご紹介するコンポーネントのより強力な使い方を学ぶことができるようになると思います。
表示言語について
Figmaは最近、UIの日本語化に対応しましたが、本稿では設定言語を「English」に設定しています。ただし、日本語訳の単語を用いたほうが説明がスムーズな場面では、日本語を用いる場合があります。
言語設定変更は、Figmaの画面右上のFigmaのロゴ → Help and account → Account settings でアカウント情報を編集する画面が表示されますので、この中からLanguage項目の中のChange languagesリンクから、言語設定を変更可能です。
各画面の名称
説明に入る前に、Figmaの説明を行う時に画面のどこを確認すればよいのかがわかりやすいように、画面の名称をまとめておきます。以下の画像は、項目に対する名称を説明しています。
左側サイドバーが「レイヤーパネル」、中央が「キャンバス」、右側サイドバーが「デザインパネル」です。デザインパネル内のそれぞれの枠で囲った部分を「セクション」と呼びます。例えば、Auto layoutのエリアは「Auto layoutセクション」です。
左側サイドバーの上部、赤枠で囲った「Layers」の部分が「Assets」に変わったときには「アセットパネル」と呼びます。
コンポーネントについて学ぼう
Figmaのコンポーネント機能をシンプルに説明すると、「デザインファイル内で何度も利用する、同じかちょっと似ている要素を簡単・便利に扱うことができるようにする仕組み」です。このコンポーネント機能を使って作成される、UI上再利用な要素をFigmaではComponent（コンポーネント）と呼んでいます。
Figmaの同一デザインファイル上でよく使うオブジェクトやレイヤーをコンポーネント化しておくと、これらの要素ごとの管理がしやすくなり、結果としてデザイン制作が効率的に進みます。
また、フロントエンド領域のコンポーネント指向の設計ともとても相性がよく、コンポーネント作成時点でフロントエンドの実装と近づけることで、両者の見た目やふるまいの乖離を減らすことができるメリットもあります。
コンポーネントの考え方は共通？！
Figmaに限らずAdobe XD、SketchなどモダンなデザインツールではFigmaと似たコンポーネント機能が実装されています。デザインツールが変わっても、コンポーネントを用いた開発経験は生かされるので、コンポーネントという概念については是非覚えておきたいですね！
Figmaのコンポーネントには2種類あります。コンポーネントの性質（これらの情報をプロパティといいます）を定義する「メインコンポーネント」と、メインコンポーネントから生成されるデザインファイル上で再利用可能なコピーである「インスタンス」と呼ばれるコンポーネントです。
メインコンポーネントは、インスタンスを生成するための設計図だと捉えてもらうとよいでしょう。再利用したい任意のレイヤーやオブジェクト（テキストオブジェクト・シェイプ・画像要素など）をメインコンポーネントとしてコンポーネント化しておき、メインコンポーネントを元にインスタンスという実際の製品を作成してデザインファイル内のいろんな場所で利用していく、というのがコンポーネントの基本的な利用方法です。
メインコンポーネントとインスタンスとの関係については、後ほど解説を行います。
コンポーネントを使用することのメリット
ところで、わざわざコンポーネントを作成する理由はどこにあるのでしょうか？単に要素を複製するのと、どのような違いがあるのでしょうか？
Figmaのコンポーネントは、メインコンポーネントの変更をインスタンスに反映するという仕組みを持っています。要素をコンポーネント化してインスタンスとして利用していれば、メインコンポーネントの修正はすべてインスタンスに反映されるので、コピーしたすべての要素を手動で修正する必要がなくなるんですね。
また、インスタンスはメインコンポーネントで定義した性質を引き継いでいます。コンポーネント化することで、そのコンポーネント固有のデザイン上のふるまいを制御することができるようになり、デザインの一貫性を保つことに役立ちます。コンポーネントのプロパティについては、後半の「Component properties（コンポーネントプロパティ）を学ぼう」の項目で詳しく説明します。
設計図としてのメインコンポーネントと、再利用可能な要素であるインスタンスを使ったデザイン制作こそ、これまでのデザインツールからの大きな進化といえるでしょう。
メインコンポーネントの作成方法を学んだ後、インスタンスがいかに便利なのかを説明していこうと思います。
コンポーネントの作り方
Figmaではどのような要素をコンポーネントとして作成することができるでしょうか。オブジェクトや任意のレイヤーの組み合わせなど、選択したレイヤー要素をコンポーネント化することができます。早速、コンポーネントの作成を試してみましょう。
練習時のFrameについて
ここでは、あらかじめ作業スペースとして大きめのFrameを定義して、その中で作業を行います。
ツールバーの#アイコンを選択して、適当な大きさの作業スペースを作っておきましょう。デザインパネルから好きなサイズのフレーム定義を呼び出してもOKです。
https://knowledge.sakura.ad.jp/wp-content/uploads/2022/08/figma-1-3.mp4
ツールバーの □アイコン → Shape からRectangleを選んで、適当な場所に配置しておきます。続いて、作成したRectangleを選択して、画面上部のツールバーにある❖アイコンをクリックしてください。すると、選択中のレイヤーが紫色の❖アイコンをもつレイヤーに変化していることがわかります（ここでは ❖ Rectangle 1 という名前のレイヤーに変化しています） 。
この❖アイコンは、このレイヤーがメインコンポーネントであることを表しています。
おめでとうございます！コンポーネントの作成に成功しました！
さまざまなコンポーネントの作り方
要素をコンポーネント化する方法は複数あります。自分にあった方法を選んでコンポーネント化を行いましょう。
ツールバー 1. 要素を選択する
2. ツールバーの ❖アイコンをクリックするコンテキストメニュー 1. 要素を選択する
2. 右クリックでコンテキストメニューを出す
3. 「Create Component」を選ぶキーボードショートカット 1. 要素を選択する
2. 以下の通りキーボードショートカットを実行する
Mac: ⌥ Option - ⌘ Command - K
Windows: Ctrl + Alt + Khttps://knowledge.sakura.ad.jp/wp-content/uploads/2022/08/figma-1-3.mp4
Mac の場合のキーボードショートカット
次に、複数の要素から構成される、より複雑な要素を持つコンポーネントを制作してみましょう。
新しくツールバーの □アイコン -> Shape からRectangleを選んで適当に配置したあと、ツールバーのTアイコンを選んで、テキストを先に配置しておいたRectangleに重ねるように中央あたりに配置してください。テキストの内容は、ここでは「button」としておきましょう。
この重なった2つのレイヤー（Rectangle 2とText）を選択状態にして、コンポーネント化してみましょう。
2つのレイヤー要素をまとめた1つのコンポーネントが作成されました。コンポーネント化成功です！
ですが、作成したメインコンポーネントのレイヤー名が少しわかりにくいですね（ここでは ❖ Component 1 という名前が自動でつけられています）。
レイヤーの名前は、その他のレイヤー要素と同じく、メインコンポーネント・インスタンスともにいつでも変更することができます。試しに、画面左レイヤーパネルから、❖ Component 1レイヤーをダブルクリックしてみましょう。すると、入力エリアに変更されるので、ここで任意の名前に変更することができます。
ここではbuttonという名前に変更しました。
わかりやすい名前に変えることは、コンポーネントを運用していく上でのポイントです。自分以外のメンバーにもわかりやすい名前をつけることを心がけていくとよいでしょう。
レイヤーのリネーム方法
Figmaに限らず、デザインツールを扱う場合、レイヤーの名前付けはいつでも重要なタスクです。レイヤー数が増えてくると、自動で名前付けされたレイヤーが何を指しているのかわかりにくくなってきます。
Figmaでは、レイヤー名のリネームを行う方法をいくつか提供しています。自分にあった方法を選んで、名前付けの癖をつけていきましょう。
ツールバー 1. 要素を選択する
2. ツールバーの❖アイコンをクリックするコンテキストメニュー 1. 要素を選択する
2. 右クリックでコンテキストメニューを出す
3. 「Rename」を選ぶキーボードショートカット 1. 要素を選択する
2. 以下の通りキーボードショートカットを実行する
Mac: Command ⌘ + R
Windows: Ctrl + R
レイヤー要素をコンポーネント化するのはとても簡単です。どのくらいコンポーネント化したらよいか迷うことがあるかもしれません。はじめは気にせずどんどんコンポーネント化してみて、コンポーネントの挙動について学んでみるとよいでしょう。
インスタンスを作成する方法
コンポーネントを無事に作成することはできました。ですが、ここまではまだメインコンポーネントを定義しただけです。先ほど、コンポーネントは2種類あるということを学びました。実際にデザインファイルで利用するコンポーネントは、メインコンポーネントという設計図からUI要素として再利用するために作成されるインスタンスであることを思い出しましょう。
インスタンスの作成はとてもシンプルです。一番簡単な方法は、メインコンポーネントをコピーアンドペーストすることです。レイヤーパネル内に注目してください。❖ button レイヤーのひとつ上のレイヤーに ◇ button というレイヤーが生成されました。
レイヤーパネルに表示されている、◇アイコンがついたレイヤーがインスタンスである印です。インスタンスの作成に成功しました！ キャンバスには、メインコンポーネント ❖ button と同じ見た目の要素が生成されています。これが、レイヤーパネルの ◇ button レイヤーに対応した要素です。
インスタンスからもインスタンスを作成できる？
インスタンスは、メインコンポーネントからコピーアンドペーストすることで作成可能ですが、実はインスタンスをコピーアンドペーストすることでもインスタンスを作成することができます。
インスタンスをコピーアンドペーストして生成されたインスタンスも、メインコンポーネントから生成されたインスタンスと同様の働きをします。加えて、インスタンスの情報はこの後説明する「オーバーライド」と呼ばれる仕組みにより、各オブジェクトやレイヤーのプロパティを上書きして変更することができます。すでにオーバーライドを行ったインスタンスからコピーアンドペーストで複製されたインスタンスのプロパティの情報は、複製元のインスタンスと同じ値です。
インスタンスの複製は、プロパティの変更を行ったインスタンスをそのまま増やしたい、という場合にも活用できるでしょう。
コンポーネントのコピーアンドペースト方法
インスタンス作成のために利用するコピーアンドペーストについて、Figmaではいくつかの方法を提供しています。また、後で紹介しますが、インスタンスは「リソース」から簡単に呼び出しを行うことができます。
コンテキストメニュー 1. 要素を選択する
2. 右クリックでコンテキストメニューを表示して、Copy を選ぶ
3. 右クリックでコンテキストメニューを表示して、Paste here を選ぶキーボードショートカット 1. 要素を選択する
2. コピー: 以下の通りキーボードショートカットを実行する
Mac: ⌘ Command + C
Windows: Ctrl + C
3. ペースト: 以下の通りキーボードショートカットを実行する
Mac: ⌘ Command + V
Windows: Ctrl + V
コンポーネントのリストからインスタンスを作成する方法
インスタンスを作成する方法の一つとして、コンポーネントのコピーアンドペーストによる方法を紹介しました。ですが、デザインファイルが大きくなるにつれて、コンポーネントの種類が増えてくると、どのコンポーネントがどこで定義されているのか把握しづらくなってきます。コンポーネントの場所がわからなくてインスタンスが生成できないのでは困ってしまいますね。
そこで、定義したコンポーネントを、「アセットパネル」と呼ばれるエリアから簡単に呼び出す方法をご紹介します。
左サイドバーの上部の「Assets」→「Local Components」を選ぶと、このデザインファイルで定義されたコンポーネントが一覧で表示されます。この中に、先ほど作成したbuttonも表示されているので、これをキャンバスの任意の場所にドラッグ＆ドロップしてみましょう。
無事にアセットパネルのコンポーネントのリストからインスタンスを作成することができました！ 配置が終わったらページ上部から、「Layouts」からレイアウトパネルに戻しておくと混乱せずにすみますね。
コンポーネントの呼び出し方法
Figmaでは、コンポーネントのリストからインスタンスを作成する方法を複数提供しています。インスタンスをどこからでも作成できると、メインコンポーネントの場所を覚えておく必要がなくてとても便利です。
アセットパネル 1. アセットパネルを表示する
2. Local Componentsから任意のコンポーネントを選んで、キャンバスにドラッグアンドドロップする
[TIPS] デザインファイルに「ライブラリ」を利用している場合には、ライブラリで利用可能なコンポーネントのリストが表示されます。リソース 1. ツールバーのリソースアイコン（下記キャプチャの赤枠部分）をクリックする 2. リソースモーダルの表示: 以下よりコンポーネントを絞り込む
検索フォームからコンポーネント名を入力して絞り込む
検索フォーム下部のプルダウンからLocal Componentsを選ぶ
3. コンポーネントのリストから任意のコンポーネントを選んで、キャンバスにドラッグアンドドロップするキーボードショートカット
（クイックインサート）1. リソースモーダルの表示: 以下の通りキーボードショートカットを実行する
Mac: ⇧Shift + I
Windows: Shift + I
2. コンポーネントのリストから任意のコンポーネントを選んで、キャンバスにドラッグアンドドロップする
メインコンポーネントはどこで管理する？
ある程度の規模が想定される場合、あらかじめメインコンポーネントを定義しておく場所を決めておくと管理が楽になります。
どのようなコンポーネントの管理を行うべきかは、デザインファイルの規模やチーム内の運用によって異なります。ここでは、ある程度の規模でも運用可能な管理方法をいくつかご紹介します。
例えば、中規模以上のページを持つデザインファイルの場合に、ページ内に固有のコンポーネントを定義したい場合などに、「コンポーネント専用フレーム」を併用する方法も考えられます。
コンポーネント専用フレーム 単一のページで完結する程度のデザインファイルまで メインコンポーネント専用フレームを用意して、そこにメインコンポーネントを定義していく方法。
フレームは「Components」などわかりやすい名前をつけておくとよいでしょう。コンポーネント専用ページ 数ページ程度の小〜中規模なデザインファイルまで メインコンポーネント専用ページを用意して、そこにメインコンポーネントを定義していく方法。
ページは「Components」などわかりやすい名前をつけておくとよいでしょう。ページが複数あっても、メインコンポーネントはこのページにまとめておき、インスタンスを任意のページで利用するとよいでしょう。ライブラリ 数ページ程度の小規模サイトから、デザインシステムのような大規模デザインファイルまで コンポーネントを「ライブラリ」として外部デザインファイル化しておき、デザインファイルにライブラリを読み込んで利用する方法。
ライブラリ利用側デザインファイルは、メインコンポーネントの場所を気にする必要がなくなり、ライブラリ側ではコンポーネントのみを関心の対象にすればよいので、よりコンポーネントの管理がシンプルに行えるようになります。
どのコンポーネント管理方法がよいかは、プロジェクトの規模やチームメンバーの管理しやすさによって変わってきます。Figmaのコミュニティやさまざまな企業がデザインシステムを公開しています。コンポーネント管理に迷ったら、これらを参考にしてもよいでしょう。
メインコンポーネントとインスタンスの関係
先にお話ししたとおり、インスタンスはメインコンポーネントのコピーであり、メインコンポーネントの変更がインスタンスに反映されるという仕組みを持っています。
では、このコンポーネントの働きを改めて学んでいきましょう。まずは先ほど作成したメインコンポーネント ❖ button のインスタンスを3つ作成してみましょう。インスタンスの作成について、ここでは、アセットパネルからインスタンスを作成する方法を使用しています。自分の好きな方法でトライしてみましょう。
無事、❖ button のインスタンスである、◇ button が3つ作成できました。
次に、メインコンポーネントのプロパティを変更して、インスタンスの変化を観察してみます。
レイヤーパネルから、❖ button レイヤーを選択して、左側の [v] の部分をクリックしてみましょう。すると、そのコンポーネントを構成するレイヤー要素が表示されます。表示された中から □ Rectangle 1（ここでの名前はデザインファイルにより異なります）レイヤーを選択します。
すると、デザインパネルに、□ Rectangle 1 のデザインに関するプロパティ（Layer、Fill、Stroke、Effects等）が表示されますので、ここでは、□ Rectangle 1 の色を変更してみましょう。Fillの値を好きな色の値に変更してみてください。
メインコンポーネント ❖ button レイヤー内 □ Rectangle 1 のプロパティ変更を行うと、インスタンスもまた同じ色に変更されました！
インスタンスのプロパティ変更
このように、メインコンポーネントのプロパティ変更がインスタンスにも反映されることがわかりました。では、逆に、インスタンス側のプロパティを変更したらどうなるでしょうか？
メインコンポーネントと同じように、3つあるインスタンス◇ button のどれかを選択の上、コンポーネントを構成するレイヤーから □ Rectangle 1 を選択して、デザインパネルからFillの値を変更してみましょう。
メインコンポーネントの場合と異なり、Fillの変更作業を行ったインスタンスだけ、色の変更がされました。メインコンポーネントはもちろん、その他のインスタンスについても影響を与えていません。その他のインスタンスの情報を変更しても同様に、変更を行ったインスタンス以外にはその変更が反映されることはありません。
このインスタンスの性質により、インスタンスを利用する場所や状況に応じて、コンポーネントのデザインをカスタマイズして利用することができるようになります。インスタンスのプロパティを利用するシーンに合わせて上書き変更する仕組みを「オーバーライド」といいます。
インスタンスで変更可能なこと
「オーバーライド」は、Text、Fill、 Stroke、Effect、Layout、Layout Gridプロパティの変更が行える他、インスタンス内で利用されている別のコンポーネントの切り替え、Export設定に関するプロパティの変更、レイヤー名の変更をサポートしています。
buttonコンポーネントのケースを考えてみます。インスタンスのプロパティをオーバーライドすることで、ある場所ではインスタンスのテキストを「前へ」にして、別のある場所のインスタンスでは「次へ」にするといった使い方ができるようになります。
オーバーライドの役割と限界
オーバーライドを使ってもできないことがあります。オーバーライドはインスタンスのプロパティを変更するための仕組みであるため、メインコンポーネントで定義したレイヤーの順番やレイヤー内の位置といった、コンポーネントレイヤー内に存在するオブジェクトやレイヤーを変更するようなことはできません。
ただし、コンポーネントレイヤー内に存在するレイヤーやオブジェクトのうち、インスタンスを利用するシーンで必要のないものをレイヤー機能の表示/非表示機能を使って出し分けることは可能です。例えば、ボタンにアイコンが存在するパターンと存在しないパターンがあったとして、メインコンポーネントはアイコンありとして定義した上で、インスタンス側で場所により表示/非表示を行うといったことが可能です。
コンポーネントを構成するオブジェクトやレイヤー自体を変更する必要がある場合は、この後で学ぶ「Variants（バリアント）」を利用することで実現できます。
つづきは次回
この記事では、Figmaの素敵な機能の一つであるコンポーネントの基礎をご紹介しました。これに続く次回の記事では、Figmaのコンポーネントをグループ化して管理する「Variants（バリアント）」という仕組みについて解説します。