エンジニアのための Figma 知識
エンジニアにデザインツールの知識・習熟は必要か？
しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。
という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。
ユースケースを考える
まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。
- デザインを元に実装する時
- デザインから何かを生成したい時(コードとか画像とか)
- 自分でちょこっとデザイン修正しちゃう
この辺りがあるかな〜と思います。それぞれに対してこういうこと知っておくといいぞ！というのをあげていきます。
デザインを元に実装する時
せっかくデザイナーが Auto Layout とかバッチリ組んでくれて Constraint やら何やらもしっかり作ってくれていても、エンジニアが意図を汲めなくて結果違うものが出来上がってしまうのはあまりにももったいない…！
のでバッチリ Figma のどこをどう見ればいいのか、またその際の生産性アップな Tips をいくつか紹介します。
超基本: スタイルを Inspect ペーンで見る
超基本的なところから解説しますが、まず大事なのが Inspect ペーンです。スタイルを見たい対象のレイヤーを選択して右から Inspect ペーンを選択すると、下の方にスタイリングの情報が見られます。
ここでは次のような情報を確認することができます
- 色
- タイポグラフィ
- border-radius
- shadow
- display:flex なレイアウト(Auto Layout が指定されている場合)
- padding
小ネタ: Cmd を押しながらクリックで最下層の要素を選択できる
最下層のテキストのスタイルを見たいのに Frame がたくさんネストしているものだと展開していくのが辛い…。そんなことがあるかもしれません。
▼ たくさんクリックして辛い思いをしている図
そんな時は Cmd を押しながら該当のレイヤーをクリックすれば大丈夫です👌
▼ ワンクリックで選択できて幸せな図
小ネタ2: レイヤー間を移動するショートカット
既に選択しているレイヤーの親要素を選択したい…しかしキーボードからは手を離したくない…そんなことがあるかもしれません。
そんな時はこちらのショートカットです。
- 子レイヤーを選択したい:
Enter - 親レイヤーを選択したい:
Shift+Enter - 兄弟レイヤーを選択したい: Tab(上に移動する場合は
Shift+Tab)
これらをマスターすればキーボードから手を離さずにシュウィンシュウィンレイヤー間を移動することができるでしょう。
小話: デザイナーにデザインの作り方にフィードバックできるようになる
上述したレイアウトの情報や padding などの値は Auto Layout が設定されていないと取得することができません。その他デザインの作りが微妙なことが原因でエンジニアが意図を読み取りづらくなることは往々にして発生します。
完璧なデザインなどあり得ないので、まずはコミュニケーションを取っていくのが大事なのですが、エンジニアの方からもデザインの作りに関してフィードバックできるようになっておくと、中長期的にお互いの生産性が高められるのではないかと思います。
このトピックに関しては昔スライドを作ってみたので良ければご参照ください。
Constraints を見る
「これは画面が横に広がった時に一緒に長くなるのかどうか」
そんな疑問を解決するためには Constraint を見ます。
例えばこんな感じに Constraints を left and right に指定すると "親の Frame が横に伸びたら左にも右にも固定するぜ！" ということを指定できます。
つまりこんな感じに伸びるということです。
正直デザイナーもここそんなにカチカチに設定するとこでもない気がするので、あくまで参考程度にという感じですが、ここを見るとレスポンシブな挙動がある程度分かる可能性があるということを覚えておくと良いでしょう。
レイヤー間のマージンを見る
要素を選択して Option を押しながらマージンの値を見たい要素へホバーすると値が見られます。非常に多用する必須ショートカットです！！無意識にできるようになりましょう。
Style を見る
色やタイポグラフィなどのいわゆるデザイントークンと呼ばれるものは、なるべく定義されたものしか使わず、野良スタイルが出ないようにするのが吉です。
なので実装とデザインで揃えたいものですが、そんな時に見るべきは Style の部分です。Figma では色やタイポグラフィなどを名前をつけて定義することができます。
Style は何も選択していない時に Design ペーンで表示されるのでそこから確認することができます。
また、現状 Figma では色とタイポグラフィ、エフェクト(影とか)にしか Style を定義できないのですが、他の border-radius やデザイントークンも定義したい！という場合は Figma Tokens というプラグインの活用がオススメです。
こちらでは様々なプロパティに対して Style が定義できる他、JSON が吐き出せるので開発にも役立つことでしょう。
画像を書き出す
画像はレイヤーを選択すると Design ペーンの下の方にある Export から書き出すことができます。
書き出す際には倍率と PNG/JPG/SVG のフォーマットをどれにするかを選択することができます。
TinyImage プラグインを使う
「書き出す時に minify も一緒にしてくれたら便利なんだけどなぁ」
そんなあなたにはこれ！ TinyImage というプラグインです。
書き出す時に一緒に minify もしてくれます。
また、こちらの嬉しいところは WebP に変換してくれる機能もあるところです。
(Figma の Export は WebP 対応していない)
小ネタ: クイックアクションでキーボードからプラグインを実行
プラグインは「右クリック -> Plugins -> 使いたいプラグインを選ぶ」というフローで起動するのですが、ちょっとクリック数が多いのと、インストールしたプラグインが増えてくると探すのも手間です。
そんな時はクイックアクションという機能を使いましょう。これは Cmd + / で起動することができます。立ち上がったらプラグイン名で検索して Enter でプラグインを実行できます。
プラグインが増えてくるとこれなしでは生きられません。ぜひご活用ください。
更なる小ネタ: 前回実行したプラグインを実行する
Cmd + Option + P で前回実行したプラグインを実行できます。
「俺は毎回同じプラグインしか実行しないぜ！」という人はこれが最速の実行手段なので使ってみてください。
Copy as PNG
これは開発時というよりは Slack とかにペッと貼る時に重宝するのですが、画像として書き出したいレイヤーを選択して Cmd + Shift + C を押すと、そのレイヤーが画像化されたものがクリップボードに保存されます。
あとは Cmd + V で貼り付けてやるだけです。かなりよく使うのでぜひ覚えてみてください。
Component/Variants を見る
昨今のフロントエンドでは UI をコンポーネントとして分解して開発することが一般的になっていると思われます。Figma でも Component を作る機能があり、また、Component のバリエーションを表現できる Variants という機能もあります。
これがエンジニア目線で何が嬉しいかと言うと、一つにコンポーネントにどんなバリエーションがあるかが一目で把握しやすいことです。
また、Interactive Components という Variants 内でのプロトタイプでの遷移を指定できる機能があるのですが、もしこれがしっかり指定されている場合は状態遷移のルールを把握することができます。
また余談ですが、この Variants の Figma 上でどんなプロパティを持つかは実装のものに近づけた方がいいかなーと思っており、理由としてはデザインと実装間でプロパティが同じだと、デザインを新しく作ったり修正した時に、実装の変更難易度が高くなる可能性を減らせるからです。
なので、実装面での考え方に、より精通しているエンジニアも一緒に Variants の設計に加われるといいと思います。
デザインから何かを生成したい時(コードとか画像とか)
Figma で作ったものから何かを人力で書き出すのが辛い、ということはたくさんあると思います。
例えば「デザインから見た目の部分のコーディングを生成したい」というのはみんなが夢見ることでしょう。実際 Figma の Community を見ると数多のデザインからコードを生成する系のプラグインが公開されています。
また、最近よく見るな〜と感じるのがアイコンを React コンポーネントに吐き出したりとかするものです。
▼ 最近観測した事例
そんなデザインをゴニョゴニョして何かを生成したい！というユースケースに役立つのが Figma API と Figma プラグイン です。
この記事では具体の API の詳細まではお伝えしませんが、それぞれどんなことができるかの概要を解説しようとおもいます。
何か不満があった時に「そう言えば Figma API とかあったな…あれ使えばいけるのでは？」と想起できるようになることをゴールにします。
Figma API
Figma API ではざっくり次のようなことができます。
- プロジェクトの情報の読み込み(GETのみ)
- ファイルの情報の読み込み(GETのみ)
- コメントの読み込み、書き込み、削除
コメント以外は基本 read-only みたいですが、Figma のファイルのある箇所に変更があったらゴニョゴニョして他のどこかに成果物を push! みたいなパイプラインを構築する時に役立つことでしょう。
また、API にリクエストを飛ばすにあたって認証をする必要があるのですが、Access Token を発行してそれを詰めるやり方と、OAuth で Figma ログインをして secret を手に入れる二通りのやり方があります。
前者のトークン発行するユースケースの方が多いのかな〜という肌感ですが、Figma ログインしたアプリケーションなんかを作ることは十分に可能というのは知っておいても良いでしょう。
Figma プラグイン
プラグインでは Figma のページ内の要素にアクセスできてなんやかんやすることができます。
APIとの違いで言うと
- 書き込みもできる
- 何かしらのファイルを開いている時にユーザ手動でしか実行できない
あたりでしょうか。
あとは Community や(Organization プランの場合は)チームに publish することができるとか。
また、 Figma プラグインの実行環境は figma のノードにアクセスできる部分と(sandbox)、UIを持つ部分(iframe)が messaging でやり取りしながら動く形になっています。
そして後者の UI スレッドの部分は割とやりたい放題できまして、外部にリクエストを飛ばすことも可能ですし、何かしらのサービスにログインさせてトークンを保存しておくこともできますし、先ほど紹介した TinyImage のようにファイルを保存することだってできます。簡易な Web サービスが作れるくらいに捉えておくとできることが想像しやすいかもしれません。
よりどんなことができるかのイメージを膨らませるにはやはり色々触れてみるのが一番です。「Figma プラグイン オススメ」とかで検索すれば山のように記事も出てくると思うので、ぜひ色々お試しください！
▼ プラグインのドキュメント
自分でちょこっとデザイン修正しちゃう
実装していてあるあるなのが、ちょっと足りていない状態があったりする時に「一々デザイナーにお願いして待ちが発生するのめんどくさいな〜」と感じることです。
そんな時は…自分でデザインしちゃいましょう！
という訳でそんな時に役立つ Tips を紹介してみようと思ったのですが、もはや普通のデザイン用途の Figma の使い方になるので自分が初心者な時に役立ったものを紹介していきます。
▼ 公式 Figma チャンネル
これの Tutorial シリーズを全部見ておけば大体の使い方を把握できます。
▼ ノンデザイナーズデザインブック
デザインを魔法のように感じる人が「デザインって意外とロジックの積み重ねでできているんだな〜」という感覚が掴めるきっかけになる本です。
デザイナーがどうやって意思決定しているのかを理解する始めの一歩として読んでおくといいと思います。
他にも色々良質なリソースはあるのですが誰の目から見ても鉄板なのは上記かなと思うので、まずは上記あたりから始めて、あとは職場のデザイナーに教えを請うて上達していきましょう。
デザインシステムを作ろう
もはや Figma の話から脱線するのですが、デザインシステムができてくると、この「自分でちょこっとデザイン修正しちゃう」というユースケースが "誰でも" "高品質で" できるようになっていきます。
デザインシステムを作るとデザインの民主化が実現できます。例えば、漏れているデザイン対象がある時に「これはこういう文脈で使われるから、こういうコンポーネントを使う」のようなデザインの判断が統一され、誰でも品質を損なわずにデザインできるようになります。
もちろん全ての要求をカバーできるものではなく、運用して改善していくものですが、中長期的にデザインにまつわるプロセスの品質向上 + 速度アップに寄与することは間違いありません。
そしてこのデザインシステムは実装に反映されなければ意味はなく、きっとあなたのようなデザイン意識の高いエンジニアの力が必要になることでしょう。
おわりに
Figma はデザインツールとして覇権を握りつつあるツールでシェアは益々広がっていくものだと予想されます。
エンジニアでもデザインツールに習熟しておくと役に立つ機会というのは思いの外たくさんあります。ぜひこの記事をきっかけによりディープに Figma を触ってみようかな、という気持ちになっていただけたならこの上なく幸いでございます。
それでは、良い Figma ライフを💜
Discussion