UIデザイナーと協業する上で便利なFigmaの機能「メインコンポーネントへのリンク」

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

実案件において、UIデザイナーと協業してコンポーネントを実装する際、最近ではUIデザインツールとして Figma を使うことがよくあります。

今回は、その際に実装上で助けられた Figma の機能について書いてみたいと思います。

便利な機能「メインコンポーネントへのリンク」

実案件で Figma を使う際、エンジニア側ではページ単位のデザインからコンポーネントを作成し、ページに組み込んでいくという流れで作業をしています。

ページごとに実装していると、時にコンポーネントの全容が掴みづらく、このページにはどんなコンポーネントが存在していてどのコンポーネントが足りないのか、それらのコンポーネントはどんな状態を持つのかが分からなくなってしまうことがあったりします。

そんな時、ページ内のコンポーネントがメインコンポーネントにリンクされていると、コンポーネントを選択した時に右パネルの上に「Go to main component library」のボタンが表示されます。

コンポーネントを選択し、オレンジ色で囲んだ部分をクリックするとメインコンポーネントに遷移する

これを選択すると、Figma 上にある紐付けられたメインコンポーネントに飛んで確認することができます。

Title コンポーネントの持つ状態が確認できる

UIデザイナーの方がデザインライブラリを Figma 上に用意してくださっている場合、このように見たいコンポーネントの全容を確認することが出来ます。

例えばこの Title コンポーネントは h1, h2, h3 のパターンがあり、h2 には文字色が白と黒のパターンと複数行になるパターンがあることが分かります。

ページの方で使われているコンポーネントがどのパターンのものなのかが一目瞭然ですし、デザインライブラリだけにあってまだ未実装のパターンがあればそれを把握することも出来ます。

メインコンポーネントからコンポーネントの全容やどんな状態を持っているのかを確認することができるので、非常に効率的で助かっています。

仕組みを調べてみる

まだ Figma の機能についての理解が浅いので、これは具体的にどのような機能なのか Figma のドキュメントで調べてみました。

Guide to Components in Figma – Figma Help Center

仕組み的にはメインコンポーネントがまず存在し、それをインスタンスとしてページ内で再利用しているという理解をしました。

メインコンポーネントを変更するとインスタンス化されたコンポーネントにも変更が入るようです。

UIデザイナーとフロントエンドエンジニア双方にメリットがある機能だと感じました。

まとめ

今回はUIデザイナーと協業する上で助けられた機能について書いてみました。

Figma を使ってコンポーネントを実装する上ではデザイナーさんの細やかな工夫に助けられている部分が多々あり、エンジニア側でもより協業しやすいような工夫をしていきたいなと思います。

まだ Figma の機能についても深堀りをしていきたいと思っているので、また今回のような協業する上で便利だった機能についても書いていければと考えています。


投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。