はじめに
私が働いている CastingONE では現在、機能開発の大小やその時の状況等によって、PdM やフロントエンドエンジニアが Figma のデザインファイルをいじりながら システムの UI を作っています。
専任のデザイナーチームがいるわけではないため、Figma の習熟度や活用方法において各々バラツキがある状況でした。
そこで、あるご縁をいただきまして、改めてプロのデザイナーさんから Figma の使い方勉強会をしてもらうことになりまして、勉強会を受けてきました！
結論からいうと、プロのデザイナー視点ですぐにでも使える実用的な部分を余すところなく教えてもらうことができ、非常に濃い勉強会になりました……。私はフロントエンドエンジニアの中でも比較的 Figma を操作する機会が多いのですが、勉強会の前と後で生産性跳ね上がりました。正直、もっと早く知りたかった！
Figma は他のデザインツールと比べ、非常にエンジニアが使い方を理解しやすく、かつ使いやすく、エンジニア ⇆ デザイナーでコミュニケーションのしやすいツールだと感じています。
そこで、勉強会で学んだことをベースに、私が Figma をめちゃくちゃエンジニアにおすすめしたい理由や、 その強力で有効的な使い方について、お伝えさせてください！
Figma は基本的に、Photoshop や Illustrator 等のゴリゴリテクニカルなデザインツールとは異なり、最初に見る方でもパワポと同じような感覚で直感的に使えます。そのため今回は基礎の基礎的な部分は省き、ある程度 Figma を触ったことはあるけれど、詳しいことは深掘りしてみたことがないくらいの方を想定しています。
Figma を少しでも利用したことがある方で、
- Figma を利用していい感じに効率よくデザインファイルを作れるようになりたい
- 社内で公開されている Figma のデザインファイルの見方を知りたい
- エンジニアフレンドリーなデザインファイルについて知りたい
こんな思いをお持ちの方は、ぜひ最後まで読んでみてくださいね。
Figma をエンジニアにおすすめする理由
私が Figma を、特にエンジニアに対して超絶おすすめしたいと思った理由は、先ほども色々と書きましたが、一番はエンジニアが機能や仕組みを理解しやすいツールである、ということです。それはなぜかというと、Figma のデザインファイルは私たちが日々書いているコードとめちゃくちゃ似ているからです。
HTML や CSS のイメージと似ている（それも激似）
こちらについては、実際にある程度整理された Figma のコンポーネントを見てみると、コーディングが得意な方であればすぐに理解できると思います。
試しに、フォームパーツっぽいコンポーネントの木構造のファイルを見てみましょう。
すぐに脳内で、HTML 構造に変換できますよね。
後述する Figma のフレームとオートレイアウト機能を組み合わせると、このような HTML 構造を想像しやすいデザインができます。
エンジニアがデザインファイルを書くとしても、渡されたデザインをコーディングするとしても、使いやすいですよね。
また、オートレイアウト機能の Fixed width・Hug contents・Fill container 等をうまく利用することで、flexbox そのままのレイアウトも自由に表現できます。
スタイルも非常に想像しやすいです。
flexbox が最もわかりやすくインパクトがあるのですが、他にも CSS でいえば border-radius, border, position fixed, padding などのスタイルを想像しながらデザインファイルを見たり作ったりすることができるはずです！
では、Figma を用いてどんなことが楽にできるのでしょうか？
コンポーネント設計がしやすくなる
色々とあるのですが、主に押したいのはこれです！
後述するバリアンツという機能を利用することで、コンポーネントにパターンを持たせることができます。
バリアンツをどう定義するかを考えるのは、ほとんどそのまま React や Vue.js においてコンポーネントの Props をどう渡すかを考えるのと同じ脳みそを使うと思ってます。
エンジニア同士でもデザイナー ⇆ エンジニア間でも、コンポーネント設計におけるコミュニケーションがスムーズになったり、漏れを発見しやすくなったりするでしょう。
覚えておきたい Figma の効果的な使い方
Figma の素晴らしさがわかってきたところで、覚えておくとちょっと Figma 玄人になれそう＆Figma のデザインファイル作成がより開発目線で爆速になる、3 つの概念についてお伝えしていきます。私自身は、勉強会で聞いた時には、聞いたことはあるけれど使い方があまりわからなそうなので放置していた機能から、全くの初耳だった機能まで、色々とありました。
実は勉強会を終えてから数週間が経っているのですが、教えてもらった機能を使いながら思ったことは「このへんがわかってこそ Figma の真髄を極め始めたといえるな…」と思うくらい、本当に大事な概念ばかりでした！
以下でお伝えする機能については、操作方法については Figma を少し触っただけでは理解しにくい部分がほとんどですが、普段からエンジニアをしていれば概要を理解するのは非常に簡単です（コーディングやコンポーネント設計で大事なことなので！）。
あとは実際にデザインファイルを触ってみて操作や見方に慣れることで、非常にスムーズに理解が進むはずです。
※ Figma の効果的な使い方については、細かい操作方法等は省き、概要程度にとどめています。詳しく気になる方は別途操作方法を調べてみてください。
フレーム（× グループ）とオートレイアウト
Figma ではデザインをまとめる機能として、グループ化とフレーム化という機能が存在します。
グループ化はパワポと同じような機能なので想像しやすいため、ついグループ化をしてしまいがちですが、圧倒的にフレームを利用するのが吉です！
（勉強会を開いていただいた先生は「グループ化は絶対に使わないこと！」と強いニュアンスでおっしゃってました）
グループとフレームは、要素をまとめるという意味では同じです。
しかし、グループは端的にいえば要素をまとめるだけにとどまります。それに対してフレームは、背景やボーダーを設定できたり、後述のオートレイアウトを利用して効率よくレイアウトを表現することができます。要素をまとめつつ、要素の 1 つ（divタグ）になり得るのが、フレームです。
フレームについて理解するべきことは、主に 2 つです。
-
divタグのような感覚で要素をラップしていく - フレーム化したものはオートレイアウト＆Fixed width・Hug contents・Fill container でレイアウト
先ほどのフォームパーツを見てみますが、以下がすべてフレームです！
めちゃくちゃ使います。ショートカットが option+command+G なんですけど、とにかくよく押します（笑）
オートレイアウトは、フレーム内にある要素の並び方を整理したり、各子要素のマージンを設定したり、フレーム外とのマージンを設定したり、要素に対する幅・高さの指定をしたり（Fixed width・Hug contents・Fill container）することができます。
また基本的に、フレームとオートレイアウトはセットで、現在でいえば私はフレーム化したものは必ずオートレイアウトする勢いで利用してます。
要素に対する幅・高さの指定を行う Fixed width・Hug contents・Fill container は、その違いや使いこなしが非常に難しいですが、これらを理解すると作業が劇的に効率よくなります。違いは以下の通りです。
- Fixed：指定した固定の幅・高さを維持する
- Hug：中の要素のコンテンツの幅・高さに合わせる
- Fill：外の要素に対して、幅・高さめいいっぱいにする
こんな感じです！理解はしやすいのですが、使う時に「Hug だっけ、Fill だっけ…」等迷いがちなので、オートレイアウトした要素の設定を見たり、実際に設定してみたりすることで、自ずと覚えられます。
コンポーネントとバリアンツ
コンポーネントは、フロントエンドにおける意味合いと同じく、再利用性を高めるするために利用することができます。
メインコンポーネントを作成し、そのメインコンポーネントをコピーすると、その要素はメインコンポーネントの性質を引き継いだインスタンスとなります。
メインコンポーネントを編集すると、そのコンポーネントの性質が各インスタンスに伝播してくれるため、コンポーネントの改修が楽になります。
グループ化したいい感じの要素を大量に複製したあと、「やっぱここを変えよう」と思った時に、その場所だけ何度も直しにかかるのは苦痛ですよね。
コンポーネントを利用することで、そのような手間を大幅に省くことができます。
コンポーネントには、メインコンポーネントの性質を引き継がなくする detach の機能も備わっているので、亜種として新しいコンポーネントを作り直すことも可能です。
このコンポーネント機能をベースに、さらにパワーアップさせてコンポーネント設計をしやすくしたのが、バリアンツです。
バリアンツはコンポーネント機能の一部です。
バリアンツを利用すると、作成したメインコンポーネントに対して状態のパターンを持つことができます。
たとえば web 上のボタン以下のような状態がありますよね。
- 色（青・緑・黄色）
- 大きさ
- 活性か非活性か
この状態についてbutton-color-blue, button-size-large, button-is-disableのようなコンポーネント名を付けて管理するとなると、結構大変です。バリアンツを利用することで、以下のようにコンポーネントにパターンをつくることができます！storybook 等に馴染みがあれば、すぐにピンとくると思います。
実際に作業する際に、このバリアンツがあると、非常に捗ります。
また、ここまでデザインファイルに定義がされていれば、コンポーネント設計における漏れや悩みも非常に少なくなるでしょう。
オートレイアウト同様、使うには非常にコツのいる機能ではあるのですが、……慣れたらすごいです！
（こちらは私もまだまだ試しながら勉強中です）
終わりに
デザインツールの Figma について、おすすめする理由と効果的な使い方を見てきました。
デザインツールはデザイナーが利用するものと思いがちですが、学べば学ぶほどエンジニアフレンドリーだなと思い、どんどん Figma にハマっていってしまいます。私の場合は、既にオートレイアウト機能が便利すぎて、もうオートレイアウトなしの生活には戻れません…。
ちなみに…勉強会は任意参加での開催でしたが、よく Figma を利用しているフロントエンドエンジニア・PdM に加え、デザインファイル作りたい願望を持ったバックエンドエンジニアの方々も参加し、ほぼ開発メンバー全員でわいわい話しながら行いました。
特に弊社の場合は複数名がガシャガシャとデザインファイルを操作しながら開発を進めているため、今後メンバーが Figma の理解を深めることにより、コミュニケーションやファイルの統一性も増していくのかなと、今からとても楽しみです！
Discussion