Figmaのインスタンスが編集できない？切り離しで解決！

Figmaのコンポーネント（インスタンス）で、「特定の要素だけデザインや形状を変えたい」ときの解決策である「インスタンスの切り離し」の手順を初心者向けに分かりやすく解説します。

特定のインスタンスだけ形やパディングを変えたい時の悩み

今回は、前回記事『Figmaコンポーネントとは？初心者が挫折を乗り越え「便利さ」を実感した話』の続きみたいなものです。

同じ要素が連続した箇所の修正を一度に全部行うのに便利な機能、コンポーネント。

コンポーネントから派生させたインスタンスのテキスト内容、画像などの差し替えもできて、それでいてパディングなどのオートレイアウト機能は保ってくれる。有難い機能です。

しかし、オートレイアウトを保ったまま、という所が便利でありがたくもあり、時にちょっと困ることがあります。

それは大体、こういう時です。

「このカードだけはパディング変えたいんだよね…」

そういう状況の時、どうすればいいかのお話をします。

例えば、コレ↓を、

↓真ん中の一枚だけ、こういう風に変えたいよう、となった場合です。デザイン的な可否は置いておいて。

ちなみに白枠の角丸を独自に変えることはできるんですよ。すごいですよね。

なぜ？ダブルクリックしてもベクター編集ができない理由

でも、ぐにゃぐにゃさせたいんです。微妙なニュアンス枠を作りたいんです！

そういう場合は、対象の白枠をダブルクリックしていって（難しい場合は直接レイヤーを選択するといいです）、ベクターがいじれるモードにすればいいんじゃない？

初心者はそう思います。

そう、いつもだったらその手順で、このツールが出ます↓

「曲げ」を使うとこんな感じでいじれる。いつもだったら。

でも今はできません。

どれだけダブルクリックをしてもできません。

レイヤーから直接クリックしてもベクターをいじれません。

クリックの動きをお見せできないのが残念ですが、左のレイヤー構造から直接行ったとしても、ベクターの編集はできません。同じようにパディングとかもいじれません。

↓カーソルは見えませんが、該当レイヤーをものすごいダブルクリックしてます。でも、ビクともしません。

何故なら、このカードは今、コンポーネント母さんから生まれたインスタンス姉妹の内の一つのまま。

コンポーネント母さんから完全独立できていないのです。

テキスト内容変えたり角丸の度数を変えたり、など少しの個性を持つことは許してくれるのですが、骨格（オートレイアウト等）を変えることにお許しが出てないのです。

まあ当然です。それが自由に変えられてしまったら、コンポーネントの最大の利便性、一括変換が不可能になります。

「インスタンスの切り離し」で自由に変形・編集する手順

というわけで、コンポーネント母さんのオートレイアウト反映を切って、自分だけの個性を確立させましょう。

その手順はこちら。

まずは、自由に変えたい対象のカードをクリックして、右クリック。

「インスタンスの切り離し」を選択します。

それから白枠をクリックしていけば、パス編集ツールが使えます。
「曲げ」ツールを使ってシェイプを好きなようにいじりましょう。

真ん中のシェイプを他のカードにも起用したくなった場合。

先ほど加工した真ん中のカードを選択して右クリック→「コンポーネントを作成」をクリック。

右サイドバーの上の方に選択中のレイヤー名があり、その横の「v」をクリックするとプルダウンが出てきます。

先ほどシェイプをかけてコンポーネントを作成したカードを選択しましょう。

上のカードも真ん中と同じコンポーネントが適用されました！

まとめ：コンポーネントと上手に付き合おう

一括で修正できて便利なコンポーネントですが、「ここだけは自由にさせて！」という時は「インスタンスの切り離し」が救世主になります。

コンポーネント母さんのありがたみを感じつつ、時には思い切って独立させて、自由なデザインを楽しんでみてくださいね。

それでは、また次回の記事でお会いしましょう！

＜前の記事：Figmaコンポーネントとは？初心者が挫折を乗り越え「便利さ」を実感した話

＞次の記事