Figmaコンポーネントとは？初心者が挫折を乗り越え「便利さ」を実感した話
designmoデザイン制作で避けて通れない「修正作業」。何度も同じ変更を繰り返す「チマチマ作業」から卒業するための強力な味方、Figmaのコンポーネント機能について解説します。
今回はコンポーネントの話です。
コンポーネント、最初、意味が分かりませんでした。
そもそも「コンポーネント」って言葉自体が分からない。日常使いの横文字で掠りもしない言葉、コンポーネント。
意味の分からないものを覚えたり使いこなすのは難しいので、一旦調べましょう。
「コンポーネント」…部品、成分、構成要素などの意味を持つ英単語。
らしいです。わかったような、わからんような。
現場でとりあえず「figma」を使う、と指定されたとして。
まずざっとfigmaの使い方を調べた時に、まず大体コンポーネントの説明を通ります。でもすぐには理解ができない。
でも現場は納期があります。
「何がなんだかわけがわからない。何か同じものを増やすのに便利そうだけど、どう使っていいのかわからない。時間もないし今回はコンポーネントとやらを使いこなす前に、知っているやり方でチマチマ手を動かすしかない」となります。
今回はやっと、コンポーネントの存在意義がわかって、「便利なんだな！」と実感した話です。
同じパーツのコピペで起きていた「デザイン修正」の地獄
さて本題に入りましょう。
以下のような、似て非なるカードを３枚縦並びにするレイアウトを作りたいと思っています。
↓これが作りたい。
そのためにまず、最初のカードを作ります。
以前の私も含めて、初心者は大体まず、このカードをコピペで増やせばいいじゃんと考えます。
試しに増やす。
増やす。
これで、まあ、左サイドの画像の種類を変えて、画像タイトルのナンバリングも2や3に変えたらいいかな、とやりがちです。
……だがしかし！
修正が重なると「仁義なき戦い」が始まってしまう
そこでデザインあるあるなんですが、変更の必要に迫られたり、「ここ、もうちょっとこう、なんか違う雰囲気にしたくなっちゃった」ということが起こります。大体毎回起こります。普通にあります。
↓こんな感じに変えてみたくなっちゃった…。
でも、これに変えるということは、３枚のカードにチマチマ同じ変更を加えないといけないということ。
同じサイズにして、パディングも変えまして、大枠の角も同じ大きさで丸くしましてね、とかいうことをチマチマ３枚やっていくのです。
これ３枚どころか６枚とか９枚とかあったらどうする？
気軽に「これココをちょこっと変更したのを見てみたいな♪」とか出来ないですよね。
横から他の人に、「ねえこれをちょっと変更したものをずらっと並べて見せてよ。良かったらそっち採用するし、元の方が良かったらそっちに戻すから」とか言われたらちょっと泣きたくなりますよね。
私だったら心の中で仁義なき広島弁が出ちゃうかな。
【実践】コンポーネントの作り方とパーツ化の手順
そんなあなたにコンポーネント！
私の場合、新しいフレームを作って「パーツ入れ」と名称変えたアートボードを作ります。
そこに、元のカードの一枚をコピペで持ってきます。
その一枚を好きなだけ捏ね繰り回して「これかな」と思う一枚を作ります。
出来たら、対象カードを右クリックして「コンポーネントを作成」を選びます。
この一枚がコンポーネントとして登録されました。基本の雛形パーツとして登録された感じかな。
↓コンポーネント化した要素は、紫のラインで表示されるようになって、分かりやすくなりました。
次に、このコンポーネントしたカードから同じカードを増やします。
最初の方で初心者仕草のコピペで作った３枚並んだカードの大枠フレームを選択します。とりあえずその中に新しくデザインしたカードをぶち込みたいので。カチコミじゃぁ！！
↓これに新カードを突っ込むつもりで大枠フレームを選択。
アセットから「インスタンス」を配置する
左サイドバーの「アセット」タブを選択して「このファイル内で作成」を選びます。
ここに、このファイル内で作ったコンポートネントやらがこの中にまとまっているのです。
↓「アセット」タブをクリックして、「このファイル内で作成」をクリック。
さっき作ったコンポーネントをクリックしたら、「インスタンスを挿入」という青ボタンが出現するので、クリック。
（インスタンスの言葉の意味は分からん。※詳しく知りたい方はこちら）
↓先ほどのカードのインスタンスが強引に入ってきました。
さっきまで居たカードが上に押しやられている。かわいそうに。
でもとりあえず元居たカードは消します。
※消す前に元の一枚は同じようにコンポーネントとして登録しておけば、「やっぱり元の形に戻したい！」というときに便利です。
元居たカードは全部消します。
先ほど強引に割り込んだインスタンスをコピペ仕草で増やします。
これ、ただのコピペじゃないんですよ。コンポーネントからつながったインスタンスをコピペすると、自動的に全部インスタンスとしてペーストされるんです。ただのコピペとは違うんです。
↓その証拠に、全部紫のラインで表示されてます。
これで、インスタンス３姉妹のカードが揃いました。
さて、これだけでは「ただのコピペとどう違うの？」という疑問が浮かぶはず。
ここからなんです、コンポーネントがすごいところは。
一瞬で修正完了！コンポーネントが「神機能」な理由
さて、カード揃えてあるあるなのが、「やっぱりまだここをつつきたい、変更したい、なんかこのままでは変な気がする」というキリがない現象です。
今回だったら例えば、なぜか急に大枠の角を尖らせたくなった、とする。（デザイン的には角丸のままがいい気がするけど）
そんな時には、大元のコンポーネントをいじります。
インスタンス３姉妹じゃなくて大元のコンポーネントです。
↓大元のコンポーネントの大枠フレームの角を直角にすると…
↓一気にインスタンス３姉妹の大枠フレームの角も直角になった！
ちなみに、タイトルのナンバリング変えたり、画像のアップロード内容変えたり、くらいはインスタンスそれぞれに個別で出来ます。
こんな風に↓
ただ、個別にオートレイアウトやらサイズやらを変えたい、となるとコンポーネント母さんがインスタンス姉妹らの自立を許してくれないので（つまり変えられない）、次の記事で個別に大きな修正を加える方法を書いていきたいと思います。
