Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaでデザインを作る際、例えばサイトの設計をしている場合、ワイヤーをどんどん作っていって、いざ形が決まったのでコンポーネント化（ライブラリ化）しようと思ったら後戻りがえらいことになっている！！

ちゃんと最初から設計して、最小限のコンポーネントを整理してから始めればこんなことにはならないかもしれませんが、プロジェクトやUIを考える際に適時適切なデザインで作り直しちゃうとこういう問題がよくでてきます。

例えば、

この画像のように、結構項目が多いものをコンポーネント化せず作ってしまった場合、コンポーネントに置き換えるのがめちゃくちゃめんどくさい、、

※コンポーネントにすればチェックボックスをON,OFF切り替えて表示が簡単にできるけど、コンポーネント化してなかったらこういう切り替えができない

一括でうまくコンポーネント化されてないFrame(オブジェクト)を、コンポーネント化されたものに置き換えれないものか、、

という悩みを一発解決してくれるのが、このプラグイン

Master

Figma - Master | Create, attach, clone and move components in a couple of clicks without losing overrides! 🔥 → Lea...

1. まずはプラグインをインストールします

2. 何のコンポーネントを置き換えたいのかを選択します

3. Plugin > Master > Pick Target Component を押すと、コンポーネントが設定されます

4. 次に何のオブジェクトを、設定したコンポーネントに置き換えたいのかを選択

5. 置き換えたいオブジェクトを全部選択した状態で、Plugin > Master > Link Objects to Target Component を押すと、一括でコンポーネントに置き換わります

手作業だとかなりの時間を浪費してしまうこの作業が一発で完結！

I want to say appreciate for plugins Developer!!

ただし、フリーで使えるのは最初の何回かだけのようなので、常時使いたい方は有料版になるようです。

株式会社BrewusではFigmaを利用した開発を行なっています。この記事は業務中に発生した課題解決の内容を記載しています。