UIデザイン制作を加速させるFigmaの「コンポーネント」とは

昨日は「Figmaって使いやす～っ！」って話をお伝えした。

本日は、UI制作をさらに効率化する便利な機能、Figmaの「コンポーネント」を紹介したい。

「コンポーネント」はデザインの一貫性を保つのに役立つ機能。

デザインの修正や更新が頻繁に発生する場合、手作業でひとつひとつ変更するのは大変だが、「コンポーネント」を使えば手間をかけずに一瞬で修正・更新を行うことができる。

そして、再利用性の高い「コンポーネント」を使いまわすことも可能で、UIデザイン制作を加速させることができる。

Figmaのコンポーネントとは？

そもそも「コンポーネント」という言葉に聞き慣れていない人も多いはず。

「コンポーネント」とは「部品」や「構成要素」という意味で、プログラミングでは「機能の部品」といった意味でよく使われている。

Figmaにおいてコンポーネントとは、デザインの再利用性を高めるために作成した「部品」のこと。

たとえばボタンやアイコンといったものが分かりやすい。

こういったUIの部品は、同じデザインを複数の場所で使い回すことが多いため、元となる部品を一度作成しておけば、後は必要なときに呼び出すだけで使い回すことができ、デザインの一貫性を保つことができる。

大元となるメインコンポーネント

コンポーネントはデザインの大元を定義する「メインコンポーネント」と、そこから複製して再利用する「インスタンスコンポーネント」で構成されている。

「メインコンポーネント」のデザインを変更すれば、そこから生成した複数の「インスタンスコンポーネント」に変更が自動的に反映されることになる。

反対に、インスタンスコンポーネントを修正した場合、そのインスタンスコンポーネントのデザインのみが修正され、メインコンポーネントや他のインスタンスコンポーネントには適応されないので注意が必要だ。

ちなみに「インスタンス」とは「実体」という意味。

メインコンポーネントを使うと、あとから部品のデザインを全体的に変更したい場合にも便利だ。

コンポーネントの作成方法

Figmaでコンポーネントを作成する方法はとてもシンプル。

デザインで再利用したいオブジェクトを選択し、画面上部中央の「四角い記号」である「コンポーネントの作成」をクリックするだけ。

選択したオブジェクトがコンポーネント化され、このオブジェクトが「メインコンポーネント」となる。

インスタンスンコンポーネントを生成するには、通常のコピーと同じ方法か、左のサイドメニュー上部で「アセット」に切り替えると、作成したコンポーネントが一覧で表示され、これをドラッグ&ドロップするだけだ。

教材について

20分程度の公式チュートリアル動画を使用した。

いろいろと手元で実際にいじりながらなので、1時間以上も時間がかかった。

この20分程度のチュートリアル動画は全部で4本あるのだが、今回見たのは2つめのチュートリアル。

いろいろな機能が紹介されていたが、特に重要だと思ったのが今回紹介した「コンポーネント」という機能。

このチュートリアルはよくできており、実際の現場のやり方に即していると感じた。

というのも、「components」というpageを作成し、作業用のpageとは分ける方法が紹介されていたから。

まずは「components」というpageにメインコンポーネントだけを移動して集めておく。

するとメインコンポーネントはすべて「components」pageにて管理することになる。

そうすることにより、実際のデザイン作業のpageと、メインコンポーネントだけのpageを分け、操作区分が明確になっていい。

まとめ

Figmaのコンポーネントについて基本的な使い方を解説した。

この機能はUIデザイン制作において欠かせない機能の1つ。

UIパーツを再利用できるので、制作スピードが大幅にアップし、修正にも対応しやすい。

まだFigmaを使い始めたばかりだが、今回のチュートリアルで基本的な使い方を覚えることができた。

これからは練習を繰り返して慣れていくことで、効率的にデザイン制作ができるようになりたい。