こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。
私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。
- 多様性
- スピード
特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。
こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。
今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！
爆速のための3種の神器
- 秩序をつくる
- 変更に強くする
- 繰り返し作業は一瞬で
秩序をつくりデザイン作業と管理作業を分離し集中できる状態を保ち、 後からの変更にすぐ対応できるデザインデータをつくりアジャイルに伴走し、 繰り返す単純作業は一瞬で終わらす！ 以上の3つの神器でデザインを爆速化していきましょう！！
1. 秩序をつくる
ファイル構成とコンポーネント構成の最低限
これだけで多くの参考記事があると思うのですが、 ここで最も伝えたいことは「ほどよくやる」です。 作り込みすぎず、土台をつくるイメージです。
【ファイル構成】
ファイル設計は最低 3種類に分けることがおすすめです！
- トークン - 色や基本スタイル、アイコンなどを管理
- マスター - リリースされている最新データ
- プロジェクト - バックログ単位にページを追加しデザインするデータ
この3つに分けるだけで、関係者がデザインを索引しやすくなります。 日常的には、プロジェクトファイルを編集し、ある程度まとまったらマスター反映作業になるので、デザインタスクとデザインデータの管理タスクの混在がぐっとへります。 やることが整理されてデザインがとても楽になります。
【コンポーネント構成】
次にコンポーネントです。
おすすめは、基本のよくあるコンポーネントと、ページや機能単位の特殊なコンポーネントを明確に分けて管理することです！！
- Common Component
ボタン、テキストフォーム、タグ、チェックボックスなどの最初に用意する基本的なUIパーツ
- Specified Component
機能ごとにある程度要素がまとまる場合に適宜作成するコンポーネント
ここもファイル設計と同じで概念を明確に分けておくことで整理しやすく、作業効率があがります。
これらの方法は、ファイル分割してない方や、コンポーネントを整理してない方の、はじめの一歩としては丁度いいかもしれません！
2. 変更に強くする
オートレイアウトでしっかり組む
オートレイアウトとっても便利ですよね！すでに多くの方が使っていると思います！
gapやpaddingの値を数値で管理できたり、fill、fix、hugなどで大きさの振る舞いを制御できたり。
オートレイアウトを使っていると、デザインデータが後からの追加や削除、変更にとても強くなります。 アジャイルでの開発の現場では、関係者からヒアリングしながらのデザインや後からのデザイン調整が多いので、オートレイアウトを使いこなすだけでデザイン業務が一気に加速します。
3. 繰り返し作業は一瞬で
Figmaでは多くの値を一気に変更できます！ 「知らずに一つづつ変えていた」なんてことが起きると地獄です！ぜひ使っていきましょう！ よく使っているものを紹介します。
レイヤー名の一括変更 Rename Selection (⌘ + R)
テキストの一括検索&置き換え Find & Replace (⌘ + F)
※Replaceがバグってますね><
レイヤー 一括選択 Select Layers (plugin)
www.figma.com
使われているスタイルを一括確認&変更 Style Organizer (plugin)
www.figma.com 色やテキストなどのスタイルがあたっているか?、あたっていないものはどれか？一気に検索&選択してくれます。
サンプルデータの置き換え Content Reel (plugin)
www.figma.com
先程紹介した、「Select Layers」で特定のレイヤーを選択して「Content Reel」でデータを置き換えるは、めちゃくちゃよく使うプラグインの組み合わせなのでぜひ使ってみてください。
一度使うと病みつきになります。
まとめ
いかがでしたでしょうか? 日々の業務で使っている基本的な、でも知らないとスピードに物凄く差がつくFigma活用術の話でした! まだ試していないことがあったらぜひお試しください！
We are hiring!!
エムスリーには、デザイナー同士で知見を共有し学び会う場があり、今回の内容も、その場で先輩から学んだことです。！
他にも、アニメーション、空間ディレクション&サイン計画、イラスト、高速PDCA、UXリサーチ、などの多種多様な発表が毎週あり、 学びの広さも深さもあります。
そんな多様性とスピード志向をもったメンバーと医療の前進に向き合えるデザイナーを絶賛募集中です！ カジュアル面談お待ちしています！ jobs.m3.com
