Figmaを閲覧するのに覚えておきたい操作

最近デザインの共有にFigmaが使われることが増えてるので、デザイナーさんからURLを渡された時にちゃんと見られるように。

多くのデザイナーがターミナルの黒い画面にアレルギーを示すように、プログラマーはデザインツールにアレルギーを持っていることがままあり、正直自分もその傾向がある。
ので、最初FigmaのURLをシェアされて開いたときの何も分からない感たらなかった。

全部の画面デザインが並んでるけどこんな小さくてどうしたら・・・あ、拡大じゃな。
拡大はなんとなくできたけど位置を動かすには・・・上下スクロールはできるけど横スクロールができないし、みたいな。

ただ操作を調べてみるとAdobe系のソフトと共通なとこあるしそんなに難しくはなかった。

• 選択
  • V で選択ツール
• 移動
  • H でハンドツール
  • 選択ツールを使っているときにスペースキーを押しながらドラッグ
  • ホイールで上下にスクロール
  • Shift 押しながらホイールで左右にスクロール
• 拡大/縮小
  • Ctrl 押しながらホイール
  • Shift + で拡大、Shift – で縮小
  • Ctrl 0 で原寸（100%）表示
  • Ctrl 1 で全体表示
• 選択した要素と他の要素のマージンの確認
  • 要素を選択して Alt を押しながら他の要素をマウスオーバー
  • Codeモードで要素を選択して他の要素をマウスオーバー

これくらい覚えておけば困りはしないだろう。