Figmaでコンポーネントを作成する方法

Figmaの最も便利な機能の1つは、オブジェクトやレイヤーのグループを、再利用可能なアセットにできることです。ボタンの形状やテキストなど、デザインの個々のレイヤーをすべて組み合わせて、チーム全員が使用できるコンポーネントにすることができます。このWikiHowでは、Figmaのデザインで使用する再利用可能なアセットを作成し、共有する方法を紹介します。

方法1

コンポーネントを作成する

1. Figmaでプロジェクトを開きます。プロジェクト内の複数のレイヤーからコンポーネントを作成し、Figmaの他の場所で再利用することができます。まず、作業中のデザインをFigmaで開きます。

   • 「コンポーネント」とは、Figma で再利用可能なアセットのことで、例えば、よく使うボタンを形成するレイヤーのグループのようなものです。
2. レイヤー "パネルをクリックします。左のサイドバーにあります。すべてのフレーム、レイヤー、オブジェクトがこのパネルにあります。
3. コンポーネントに含めたいアイテムを選択します。これを行うには、Controlキー（PCの場合）またはShiftキー（Macの場合）を押しながら、コンポーネントに含めたいレイヤーをクリックします。

   • 例えば、長方形とテキストで構成されたメニューアイコンを作成した場合、レイヤーパネルでそれらの要素をすべて選択します。
   • フレーム全体を再利用可能なアセットにしたい場合は、代わりにレイヤーパネルでフレームを選択します。
4. ハイライトされたレイヤーを右クリックし、コンポーネントの作成を選択します。Mac の場合は Option + Command + K、PC の場合は Control + Alt + K を使用しても、コンポーネントを作成できます。 Figma は、これらの要素を、レイヤーパネルのコンポーネント 1 と呼ばれる、ネスト化された1つのレイヤにまとめます。

   • コンポーネントと、それらに含まれるレイヤは、レイヤ・パネルに紫色で表示されます。
   • コンポーネントの名前の横にある下矢印をクリックすると、その中のレイヤーが展開されます。
   • 選択したレイヤーごとに別々のコンポーネントを作成したい場合は、Figma の上部にある、4つの小さな菱形でできた菱形のアイコンの横にある下向き矢印をクリックし、複数のコンポーネントを作成するを選択します。
5. コンポーネントの名前を変更します。コンポーネントに分かりやすい名前を付けるには、コンポーネント 1 を右クリックし、Menu Button/Active や Menu Button/Inactive などの新しい名前を入力します。これで、このコンポーネントの名前が変更され、レイヤーとアセット・パネルの両方に表示されます。

   • Figma は、アセット・パネルで簡単に作業できるように、チームと一緒にコンポーネントの名前付け構造を定義し、文書化することをお勧めします。
   • レイヤー・パネルでコンポーネントが選択されている間、Figma の右端に、コンポーネントの名前といくつかの設定が表示されます。説明(Description) "フィールドを使用して、このコンポーネントを共同作業者に明確に説明します。
6. Assets "タブをクリックします。左のパネルの一番上、レイヤーの右隣にあります。アセットパネルに切り替わり、すべてのコンポーネント（再利用可能なアセット）が表示されます。

   • このファイルで作成したコンポーネントは、ローカルコンポーネントと呼ばれます。
   • 各コンポーネントは、親フレームの名前の下に表示されます。

方法2

コンポーネントを使う

1. アセットパネルで、再利用可能なコンポーネントをすべてブラウズします。Assetsパネルには、3つのセクションがあります：

   • ローカルコンポーネント：このファイルで作成されたコンポーネント。
   • このファイルで使用：このファイルで使用されているコンポーネント： このファイルで作成されたコンポーネントと、共有ライブラリから使用されているコンポーネント。
   • 使用可能なライブラリ：共有ライブラリから使用できるコンポーネント。
2. コンポーネントをワークスペースにドラッグして挿入します。Assetsパネルにあるコンポーネントを再利用するには、クリックして表示させたい場所にドラッグするだけです。これによりインスタンスが作成され、基本的にコンポーネントのコピーとなります。

   • インスタンスは、元のコンポーネントを変更することなく、個別に編集することができます。
   • インスタンスは再利用できず、アセットパネルにも表示されないので、厳密にはアセットではありません。再利用可能なアセットとなるのは、元のコンポーネントだけです。
   • インスタンスはレイヤーパネルに中空のダイヤモンドアイコンで表示され、コンポーネントは4つの小さなダイヤモンドで構成されたダイヤモンドアイコンで表示されます。
3. 共有ライブラリのコンポーネントを調べる他のデザインで作成され、あなたと共有されているアセットを使用したい場合、ライブラリモデルで見つけることができます：

   • アセットパネルの上部にある開いた本のアイコンをクリックします。
   • リストされた共有ライブラリの一つを検索できるようにするには、そのライブラリのスイッチをオンにします。
   • これで、アセットパネルの上部にある検索フィールドで共有コンポーネントを検索できるようになりました。
4. 共有ライブラリにアセットをパブリッシュします。チームの他のメンバーに再利用してもらいたいコンポーネントを作成した場合、簡単にライブラリに公開できます。その方法は次のとおりです：

   • アセットパネル上部のオープンブックアイコンをクリックします。
   • Publishボタンをクリックします。
   • バージョン管理のために、変更の説明を追加します。
   • 公開したいアセットの横にあるボックスにチェックを入れます。
   • パブリッシュをクリックします。
   • 共有コンポーネント（インスタンスではなくオリジナルのみ）を変更した場合、他のチーム メンバーに変更を反映させるために、そのコンポーネントを再度ライブラリにパブリッシュする必要があります。
5. コンポーネントを画像または PDF としてエクスポートします。コンポーネントを Figma の外部で共有する場合の手順は簡単です：

   • Assets タブをクリックして、コンポーネントのリストを開きます。
   • 共有したいコンポーネントを選択します。
   • Figma の右側にあるデザイン・パネルの一番下までスクロールします。
   • ファイルの種類を選択します。PNG、JPG、SVG、PDF のいずれかを選択できます。
   • 拡大率を変更したい場合は、メニューから 1x 以外を選択します。
   • エクスポート（アセット名）をクリックしてファイルを保存します。

この記事は、CC BY-NC-SAで公開されている「 Figmaでコンポーネントを作成する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。