UIデザイナーと協業する上で便利なFigmaの機能「メインコンポーネントへのリンク」
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
実案件において、UIデザイナーと協業してコンポーネントを実装する際、最近ではUIデザインツールとして Figma を使うことがよくあります。
今回は、その際に実装上で助けられた Figma の機能について書いてみたいと思います。
便利な機能「メインコンポーネントへのリンク」
実案件で Figma を使う際、エンジニア側ではページ単位のデザインからコンポーネントを作成し、ページに組み込んでいくという流れで作業をしています。
ページごとに実装していると、時にコンポーネントの全容が掴みづらく、このページにはどんなコンポーネントが存在していてどのコンポーネントが足りないのか、それらのコンポーネントはどんな状態を持つのかが分からなくなってしまうことがあったりします。
そんな時、ページ内のコンポーネントがメインコンポーネントにリンクされていると、コンポーネントを選択した時に右パネルの上に「Go to main component library」のボタンが表示されます。
これを選択すると、Figma 上にある紐付けられたメインコンポーネントに飛んで確認することができます。
UIデザイナーの方がデザインライブラリを Figma 上に用意してくださっている場合、このように見たいコンポーネントの全容を確認することが出来ます。
例えばこの Title コンポーネントは h1, h2, h3 のパターンがあり、h2 には文字色が白と黒のパターンと複数行になるパターンがあることが分かります。
ページの方で使われているコンポーネントがどのパターンのものなのかが一目瞭然ですし、デザインライブラリだけにあってまだ未実装のパターンがあればそれを把握することも出来ます。
メインコンポーネントからコンポーネントの全容やどんな状態を持っているのかを確認することができるので、非常に効率的で助かっています。
仕組みを調べてみる
まだ Figma の機能についての理解が浅いので、これは具体的にどのような機能なのか Figma のドキュメントで調べてみました。
Guide to Components in Figma – Figma Help Center
仕組み的にはメインコンポーネントがまず存在し、それをインスタンスとしてページ内で再利用しているという理解をしました。
メインコンポーネントを変更するとインスタンス化されたコンポーネントにも変更が入るようです。
UIデザイナーとフロントエンドエンジニア双方にメリットがある機能だと感じました。
まとめ
今回はUIデザイナーと協業する上で助けられた機能について書いてみました。
Figma を使ってコンポーネントを実装する上ではデザイナーさんの細やかな工夫に助けられている部分が多々あり、エンジニア側でもより協業しやすいような工夫をしていきたいなと思います。
まだ Figma の機能についても深堀りをしていきたいと思っているので、また今回のような協業する上で便利だった機能についても書いていければと考えています。
