こんにちは。なししです。 私は社内業務システムチームに所属するエンジニアですが、デザイナーがいないチームのため画面設計も担当する機会があります。
今まで手書きや、スプレッドシート、スライド等を使って画面のすり合わせを行っていましたが、具体的なイメージが湧いてこなく、プロトタイプを見て「イメージしていた画面と違うな‥」ということが発生していました。 その問題を解決するため、私たちのチームも1年ほど前からFigmaを導入しました！
ということで今回は私がFigmaを触り始めたときに作業効率が上がったなと感じるTipsを5つまとめてみました。
ショートカットキーの確認方法
まずは自分がよく使うものを覚えておくと作業効率上がるな〜って思うので、ショートカットキーの確認方法からです。
▷ Mac [⌃ control] + [⇧ shift] + /
▷ Windows [ctrl] + [shift] + /
で一覧を表示することができます。 色がついているものは自分が使ったことのあるものなので、コンプリート目指したいですね‥！
ナッジの変更
オブジェクトをカーソルキーで動かすとき何pxずつ動かすか（ナッジ）の設定を変更できます。
「Preference」 > 「Nudge amount...」を選択
もしくは
「Quick actions...」 > 「nu」と入力 > 「Nudge amount...」を選択
するとナッジの設定値が表示されます。
Small nudge：カーソルキーのみの移動 初期値 1
Big nudge：Shift + カーソルキーの移動 初期値 10
私たちのチームではピクセル数等、細かい部分についてFigmaとシステムを同じ値にはしていないので初期値でも問題ないですが、8の倍数で揃えてレイアウトを組んでいくと、余白等も楽に考えられるので私は「Big nudge」を8に設定しています。
オブジェクトの複製
オブジェクトの複製もぜひ覚えたいショートカットです。 特に、[⌥ option] + ドラッグ で複製したあと、[⌘ command] + Dで複製すると、移動距離を保持したまま複製してくれるので便利です。
▷ Mac [⌥ option] + ドラッグ OR [⌘ command] + D
▷ Windows [alt] + ドラッグ OR [ctrl] + D
スタイルの複製
オブジェクトのスタイルを複製して、他オブジェクトに適用することができます。
スタイルのコピー ▷ Mac [⌥ option] + [⌘ command] + C
▷ Windows [ctrl] + [alt] + C
スタイルの貼り付け ▷ Mac [⌥ option] + [⌘ command] + V
▷ Windows [ctrl] + [alt] + V
オートレイアウト
コンテンツの大きさ・長さによってフレームを可変にすることができたり、コンテンツを並べたり、並び順を変えたりすることができます。
オートレイアウトの追加
▷ Mac [⇧ shift] + A
▷ Windows [shift] + A
＜手順例＞ 1. テキストで任意の文字を入力 2. [⇧ shift] + A でオートレイアウトを追加 3. スタイルを調整
まとめ
以上が私が触りたてのときに作業効率が上がったTipsでした。 基本的なものばかりですが、Figma触りたての方々に少しでも役に立てれば幸いです！ まだまだ効率が上がる機能はたくさんあるかと思いますので、一緒に頑張っていきましょう！
＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／
