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

2020-04-25
2020-04-26

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

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

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

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

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

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

Profile

フルスタック気味のフリーランスプログラマー。

どちらかと言うと得意はインフラ構築とサーバーサイドプログラミングですが、フロントエンドもぼちぼちやっています。

最近の興味範囲はWordPress、AWS、サーバーレス、UIデザイン。

愛車はセロー。カメラはペンタックス。旅好きです。横浜在住。