Figmaでデザインする時に作業効率がアップする便利なテクニックのまとめ
Post on:2021年10月19日
sponsors
私の周りでも、Figmaを使用する人がだいぶ増えてきました。
Figmaでデザインする時に役立つ、便利なテクニックを紹介します。Figmaでの日常的な作業から、デザインシステムや巨大なデザインファイルを扱う場合に作業効率がアップします。
9 Figma Design System Tips.
by Marc Andrew
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. 一括でカラーを変更する場合は、選択色を使用する
- 2. この便利なショートカットで、レイヤーを整理できます
- 3. テキストのスタイルを見つけるには、検索を使用する
- 4. カラースタイルをすばやくナビゲートするには、リストにする
- 5. レイヤーをすばやくナビゲートするには、ショートカットを使用する
- 6. コンポーネントの交換は、このショートカットが便利
- 7. Auto Layoutのコンポーネントを瞬時にサイズ変更する
- 8. Auto Layoutを使用する際のテキスト配置の混乱を避ける
- 9. コンポーネントのサイズが正しく変更されていませんか？スペースを確認しましたか？
- 終わりに
はじめに
この記事では、Figmaでのデザインワークフローをスピードアップするのに役立つ方法をいくつか紹介します。
これらのテクニックのほとんどは、デザインシステムや巨大なデザインファイルを扱う場合に理想的ですが、Figmaでの日常的な作業にも適しています。
すでによく知っているものもあるかもしれませんが、知らなかった宝物を見つけることができるかもしれません。それでは、始めましょう！
Figmaの使い方に関しては、以前の記事もご覧ください。
1. 一括でカラーを変更する場合は、選択色を使用する
大規模なコンポーネントを使用していて、カラーをすばやく変更する必要がある場合、個別の要素をクリックして一つずつカラーを変更するのは時間の無駄です。
選択色パネル（Selection colors）を使用して、これらのカラーを一括で変更することができます。
選択色パネル（Selection colors）で、カラーを一括変更
2. この便利なショートカットで、レイヤーを整理できます
今まで私のレイヤーパネルは、カオスのような状態でした。グループごとや要素ごとに開いたままにしておくと、レイヤーパネルでアイテムを見つけるのが難しくなっていました。
alt+Lのキーボードショートカットを使用すると、すべてのレイヤーを折りたたむことができ、パネルを整頓して作業に集中することができます。
alt+Lで、すべてのレイヤーを折りたたむことができる
3. テキストのスタイルを見つけるには、検索を使用する
テキストのスタイルを変更する際、必要なものを見つけるためにオプションを際限なくスクロールする必要はありません。検索を使用します。
膨大なリストの中から適切なオプションを探すよりも、「Headline 2」や「H2」と検索した方が早いです。
また、「Headline 37」のように、検索フィールドに完全なスタイル名を入力する必要はありません。「H 37」の入力だけで検索できます。
簡単なキーワードで検索して、より早くデザインを完成させましょう。
テキストのスタイルを見つけるには、検索すると楽
4. カラースタイルをすばやくナビゲートするには、リストにする
前述したように、大規模なデザインシステムを扱う場合、カラースタイルやテキストスタイルなどはできるだけ早くナビゲートすることが有益です。
インスペクタで（グリッドではなく）リスト表示に切り替えると、色見本だけではなくラベルも表示されるので、カラースタイルを簡単に確認することができます。
デフォルトはグリッド表示なので、リストに変更する
5. レイヤーをすばやくナビゲートするには、ショートカットを使用する
私は過去に、レイヤーパネルの多数のグループや親コンテナをスクロールしたりクリックしたりして、関連する要素を探していました。時間を節約して、マウスを使用しないようにしましょう。
キーボードのtabとenterを使用して、レイヤーパネルの要素を素早く掘り下げて、探しているものをすばやく見つけることができます。
さらに、shiftを押しながらこれらののキーを使用すると、レイヤーグループや親コンテナの中をさかのぼって移動できます。
レイヤーを探す時は、ショートカットが便利
6. コンポーネントの交換は、このショートカットが便利
このテクニックは、デザインの異なるリビジョンで作業する際に便利で、プロジェクトでアイコンを切り替える際に最も効果的です。
例えば、アセットパネルからアイコンを選択し、alt+cmdを押しながらデザイン上にアイコンをドラッグすると、既存のアイコンの周りに紫色のボーダーが表示され、あっという間にアイコンを交換できます。
ショートカットを使うと、コンポーネントを交換するのが簡単
7. Auto Layoutのコンポーネントを瞬時にサイズ変更する
メインコンポーネントで作業する際、必要ではない要素はレイヤーパネルの目アイコンで非表示にできます。
この便利なアイコンは、コンポーネントのサイズを変更し、それに合わせて調整することで、あなたの要求にぴったりのコンポーネントを作成することができます。
Auto-Layoutのコンポーネントを瞬時にサイズ変更
8. Auto Layoutを使用する際のテキスト配置の混乱を避ける
Auto Layoutを使用したコンポーネントを使用する際、ユーザーが混乱するのは、テキスト要素がコンポーネント内の他の要素と同じように整列されないことです。
もう心配ありません。
テキスト要素を使用する際に、テキストの配置設定を他の要素と同じにすると、テキストが他の要素と整列して配置されるようになります。
要素に合わせて、配置設定を変更
9. コンポーネントのサイズが正しく変更されていませんか？スペースを確認しましたか？
Auto Layoutを使用したコンポーネントは、手動でサイズを変更しようとすると、視覚的に奇妙な現象が発生することがあります。
例えば、チップコンポーネントのようなシンプルものを使用して、ラベルを変更するために入力すると、すべてが完全に展開されます。しかし、リサイズのハンドルを握ろうとすると、なかなかうまくいかないことがあります。
大丈夫です。
Auto Layoutの設定で、スペースを「Packed」から「Space between」に変更してください。
「Space between」に変更
終わりに
ワークフローを向上させるために役立つテクニックをこの記事で見つけていただければ幸いです。
Figmaは非常に多くの価値があり、時間を節約できるショートカットを備えた優れたツールであり、あなたもきっと多くの発見をできると確信しています。
私のデザインシステムCabana for FigmaとCabana for Sketchを使用して、魅力的なUIを作成できることをご存知でしょうか。スペシャルオファーです。コード「CABANA35」を使用すると、35％オフになります。間もなく終了します。
sponsors
