Figmaであとからコンポーネントを作りまくるときのコツ
Figmaでコンポーネント作るマン、hassyです。
業務でしばしば「ほとんどコンポーネントがないファイル」にコンポーネントを作りまくって置き換える、ということをやってきたので、ざっと心得的なものをメモっておきます。
正直そんなコツのいる話でもないですが、初めてこの作業を長大で膨大なファイル相手にやろうとすると心が挫けそうになるだろうな…と思い、少しでも道筋が開けて見えることを目指して書いてみることにしました。
スピード優先で作られたデザインファイルを落ち着いて整理するとき、引き継いだファイルを自分好みにカスタマイズするときなどに参考になれば👍
では順番に行きます。
0. これから作るデザインデータの基準・ゴールと進め方を決めておく
これが必要なファイルと必要でないファイルがあると思いますが、もしも前任者がいない・デザインの基準やルールが設定されていない、たとえば「マージンや文字サイズを何px基準にするか」が明確でないファイルの場合はまずそこを明確にしておきましょう。
あとはゴールと進め方です。コンポーネント化は手段なので多くの場合この作業をしている方々は「デザインを最新の状態に保ちたい」とか「運用しやすくしたい」みたいな目的が別にありますよね。
ゴールを明確に定める、例えば「デザインを最新の状態に保ちたい」のであればすべてをコンポーネント化しなくていいかもしれなかったり、「運用しやすくしたい」のであればデータを整理したりチームでの運用共通認識を作るだけで済むかもしれません。
現状を調査して本当に欲しいものは何か？を見極められると良いですね。
コンポーネント化して綺麗なデータにするのはまずそのゴールにたどり着くのも（場合によっては）険しい道のりですし、その後保守されなくなるとまた振り出しに戻ってしまうので、いつ・どこまでの状態を達成し・それをどう保つか、みたいなのもフワ〜とでも考えておくと良さそうです。
1. テキストと色のスタイルを把握する
もしも上記でゴールを設定した結果、コンポーネントをつくることになった場合、最初にやった方がいいのは「テキストと色のスタイルを（おおよそ）把握しておくこと」です。
どちらもコンポーネントの基礎になる要素なので、できればコンポーネントを作る上で最初から設定できていると良いですし、把握の結果色のブレなどが発生していることがわかれば作業の難易度の参考になります。
（たとえば同じ色の見た目をしていても片方が不透明度で調整・もう片方がコードで指定、みたいな事例があったりしてそういうのを修正していくのは結構時間がかかりました…）
これらを把握する際に役立つプラグインが「Style Organizer」です。非常に有名なプラグインですが、ページで使われているカラーとテキストをスキャンし、スタイルが当たっているか・どんなものがあるかを調査できます。
これを使って把握、できるのであればStyleもすべて用意してコンポーネント化に挑んでいきましょう。
ちなみにそもそも大前提として「Figmaにしたいデータが実際に公開されているWebページにしかない…」みたいな場合は以下のプラグインとかでまるっと持ってきてしまうのも楽です。
2. 作っていくパーツの見当をつける
コンポーネント化の順番の話です。もちろんとりあえずやってみる！でも全然良いですが、意識すべきポイントは2点ありそうです。
よく変更が入る・今デザインや開発をしているページから着手する
小さいパーツから作っていく
まずは1ですが、最も身近なページのデザインから着手してみましょう。これは単純に効率化の効果を感じやすいのと、それらによってモチベーションが持続しやすいためです。
コンポーネントは作ってしまいさえすれば後から変更もいくらでもできますし、とりあえず始めてみましょう。
2はそれらを着手していく中でどこから手をつけていくか？という話です。ここでいう"小さいパーツ"とは
ボタン
リンク
タグ
のような、他のコンポーネントに包括される可能性の高い最小サイズのコンポーネントのことです。Atomic DesignのAtomのイメージですね。
とりあえずこの辺から作っていけば包括するコンポーネントを作るときに楽になるので、完璧でない状態でも用意しておくと吉です。
1と2を意識し、「身近なページの中で発見した小さいパーツを作りつつそれらを包括したコンポーネントを作り、置き換えていく」というのがおすすめの進め方です。
3. ひたすらに、置き換える
もう前項でほぼ終わっていますが、あとはひたすら置き換えていくだけです。が、基本的には長期戦になるつもりでやると良い・全部置き換えきれなくても大丈夫、ということを伝えたいです。
今までいくつかのプロダクトのデザインファイルデータを置き換えてきましたが、その全てを置き換えきれたファイルは1個くらいで、それ以外のファイルは一部しかコンポーネントにできていません。しかし実際置き換えた分はちゃんと便利になっていますし、そもそも全て置き換える必要も正直ないかもしれないです。
※これは弊社が複数のプロダクトにそれぞれ違った形で関わる機会がある会社だからであり、1つのプロダクトに複数人で注力する事業会社の方の場合はこれに限らない気はしますが…
また保守方法の例として、弊社では月に一回Figmaのデータを整理する日があり、その日は30分〜1時間ほどみんながそれぞれ自分が担当しているプロダクトのファイルを使いやすいように整理することになっています。
業務中にこれらをやろうとしてもなかなか時間がとれなかったり…というのはあるあるなので、それだけのために時間を儲けるのは結構有効かもしれません。弊社での実施事例はまた別でnoteを書こうかと思います。
👣 👣 👣
以上、非常に当たり前のことしか書かれていないnoteでした。内容は平々凡々ですが、すべてのコンポーネント化に追われるデザイナーへの応援の気持ちはいっぱいです！参考の一助にでもなれば幸いです。
この記事も含まれている「カケルデザインマガジン」は、私たち Da Vinci Studio のデザイン部がどんなメンバーで構成されているのかを知ってもらおう。と考えて運営しているマガジンです。日々の発見や考え、気づきなどを肩肘張らず発信しています。ぜひチェックしてみてください！
そして私たち Da Vinci Studio ではこんな気付きをメンバーで持ち寄って、ワイワイ話しながらチームの知見を増やしています。デザイナー、エンジニアともに積極採用中なので、どうぞよろしくお願いします！
この記事が気に入ったらサポートをしてみませんか？