個人的Figma仕草
僕がFigmaを仕事で使うときにやってる仕草を4つ紹介します。何かの参考になれば嬉しいです。
コメントコンポーネントを作る
僕はUtilコンポーネント（デザインには関係ない便利ツールコンポーネント）をよく作るんですが、その中でもコメントコンポーネントは非常に使い勝手が良く便利でした。
実装時の注意事項や補足事項などをこれに書いて付箋のようにデザインに貼っ付けて運用しています。
Frame外に直書きすると見にくいし、何が何に対応しているのかわからないのでこれをつくりました。
注：デザインレビューやデザインに関する議論はFigmaのコメント機能やSlackなどを使っています。
古いデザインもなるべく消さない
リリースされなかった検討案や古くなったデザインはarchives pageに退避させるようにしていて、基本的には消去しません。
僕はJIRAのようなチケット管理ツールにFigmaのURLを埋め込んで運用することが多いのですが、オブジェクトを消してしまうとチケットに埋め込んだデザインが見れなくなり後から振り返ることが難しくなってしまいます。
しかしpageを移動してもURLFrameのURLは変わらないので問題なくデザインを確認できます。
また検討案を残しておくことでどういった議論があったか思い出せますし、改めて見返すことで何か別の発見があるかもしれません。
できる限りAuto Layoutにする
デフォルトがAuto Layoutで、そうでないものは全て例外だと考えています。Auto LayoutがやりやすいようにFigmaの構造を考えたりします。
これを徹底することで「オブジェクトを移動したのでFrameを調整する」ことが少なくなるので非常に作業効率が向上します。
もしチーム内にAuto Layoutがめんどくさいとか難しいって言う人がいたらみんなで優しく厳しく徹底的に鍛えてあげましょう。
Variantsは5つまで
Variantsは非常に便利な機能なんですが、これにこだわりすぎると本質的でない部分に多くの時間を費やしてしまう危険性があります。
そのため僕はVariantsは基本的に5つ以内に絞って設定しています。
そのコンポーネントが受け取るPropsのうちFigma上で表現するとみんなに利益がありそうなやつから設定します。
例えばボタンコンポーネントの場合は次のようなVariantsを設定します。（あくまで一例）
- 大きさ（例：S、M、L）
- 種類（例：default、outlined、dashed、link）
- 意味（例：primary、danger）
- 状態（例：hovered、disabled、focused）
- アイコンの有無
Propsがその他にもある場合は次のような対応をします。
- 別コンポーネントとして定義する（例：アイコンボタン）
- コンポーネント化せずサンプルを置いておく（例：ローディング）
- テキストで補足する
Discussion