この記事の概要
Figmaのデータ管理で、以下のような場面をときどき見ます。
- プロダクトAを作っていて、同じファイルにデザイントークンとコンポーネントを定義していた
- プロダクトBも作ることになり
- デザイントークンは同じものを使いたい
- プロダクトAのコンポーネントとプロダクトBのコンポーネントは全然別物
- プロダクトAのファイルをプロダクトBにインポートすると、不要なコンポーネントがたくさん読み込まれてしまう
- デザイントークンとコンポーネントのファイルを分けて管理したい
before, afterを簡単に図示するとこうです。
before↓
after↓
すべてのFigmaデータを再設定し直すのは大変すぎるので、多少は楽になる方法を記事にしました。
準備：すべてのコンポーネントにバリアントを設定する
シンプルなコンポーネントであれば、バリアントが設定されていないものもあると思います。
ただ、コピー＆ペーストで移行できるようにするためバリアントを設定します。
なぜかというと、以下のような挙動の違いがあるからです。
| バリアントなし | バリアントあり | |
|---|---|---|
| コンポーネントそのものを複製した際 | インスタンスが生成される | 別のコンポーネントとして複製される |
そう、バリアントを設定しておけば、新規ファイルにコピー＆ペースト（またはカット＆ペースト）するだけで済みます。
新規ファイルを作り、コンポーネントを移動させる
先ほどのセクションでネタバレしてしまっていますが、1つのファイルに定義されているデザイントークンとコンポーネントを分離したい場合、次の2パターンが考えられます。
- 新規ファイルを作り、デザイントークンを移す（既存ファイルにコンポーネントが残る）
- 新規ファイルを作り、コンポーネントを移す（既存ファイルにデザイントークンが残る）
このとき、デザイントークンを移すのは大変です。
最近のアップデートでコレクションをまたいでバリアブルをコピー＆ペーストできるようになりましたが、私が試した限りでは、ファイルをまたいでのコピー＆ペーストはできないようです。
しかし、コンポーネントのコピー＆ペーストならできます。
数が多いとそれなりに大変かとは思いますが、すべてのバリアブルを登録し直して、再度適用するよりはマシかと思います。
コンポーネントが入れ子になっているときでも、コピー＆ペーストでちゃんとリンクが生きていました。
既存ファイルを綺麗にする
もともと登録していたコンポーネントをすべて削除し、再度パブリッシュしましょう。
これで完了です。