ノンデザイナーが知っていると便利なFigmaの使い方

こんにちは、デザイナーのあきねんです。

今回は、Figmaの使い方についてです。中でもエンジニアなど、全くFigmaを使ったことのない方がファイルを渡された際に役立つTipsを厳選してご紹介します。

デザイナーの方も、Figmaファイルを共有する際にこの記事も併せてシェアしておけば、意思疎通がスムーズになるかと思います。

0. 基本操作

Figmaの基本操作は画面左上にまとまっており、UIを選択する際には「Move」を使います。(Vキーでも切り替え可能)

画面左にはレイヤー構造が表示されており、そちらをクリックしても同様に要素を選択できます。

(画質が劣化しましたが雰囲気だけ伝わればと)

質問などコメントを入れたいときは、吹き出しアイコンを選択すると、画面上にコメントを置くことができます(Cキーでも切り替え可能)。

1. 目的の要素を選択する方法

レイヤーをダブルクリックし続ければ下層の要素まで選択できますが、Commandキーを押しながら当該箇所をクリックすると、一発で最下層の要素を選択できます👌

画面右側に、選択した要素のサイズや色が表示されます。

2. 要素間のmarginを見る方法

要素を選択した状態でOptionキーを押すと、他の要素との距離が赤線で表示されます。これで毎回「ここのmargin教えて下さい!」と確認する必要が減ります🙌

3. SVGやPNGで画像を書き出す方法

実装時「アイコンをどこから取ってきているのか分からない」「画面内にある素材がほしいのに、デザイナーが出社していない…」といった事態に直面しても大丈夫。

任意の要素を選択して、右下の「Export」から好きな形式・解像度で書き出すことが可能です。

…ただ、画像素材は解像度などの問題もあるので、デザイナーがいるのであれば確認していただいたほうが安心かと思います。

まとめ

いかがでしょうか。Figmaに慣れない方の参考になれば幸いです。

今回は以上です。最後までお読みいただき、ありがとうございました!