TOOL

Figmaの基本的な使い方!初心者向けに用語やショートカットを解説

こんにちは、アプリ開発者のテルです!

「Figmaの基本的な使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. Figmaの基本的な使い方を短時間で確認できる
  2. 用語やよく使うショートカットを知ることができる

Figmaの基本的な使い方

Figmaとは

Figma』は、UI/UXデザイン用の共同Webアプリケーションです。

Figmaの便利な点として、Webブラウザ上で利用できることが挙げられます。アカウントさえ取得していれば、オフィスと自宅で作業をスムーズに継続できます。

URLを共有すれば、1つのファイルを複数のメンバーで編集できるため、ディレクターやエンジニアなどの様々な役割の人とデータを共有しながらの作業が可能です。

Figmaは無料で利用できます。無料プランでは、共有できる人数や作成できるプロジェクトの数に制限がありますが、個人で利用する分には問題ないでしょう。

Figmaの基本的な用語

Figmaでデザインをする上で押さえておくべき「基本的な用語」は以下の通りです。

用語説明
8 Point Grid SyStem8の倍数で一貫性のあるサイズ
Component繰り返し使用するデザインをテンプレート化
Constraintオブジェクトの位置や可変幅に制約を加える
Auto Layoutオブジェクトのレイアウト調整を行う
Plugin便利なサービスをFigma上で利用する
Effect陰影やぼかしを加えてリッチなUIに
Text Styleテキストを管理する
Color Style色を管理する
Team Libraryスタイルやコンポーネントを管理する

Figmaの基本的なショートカット

Figmaでデザインをする上で押さえておくべき「基本的な用語」は以下の通りです。

ショートカット説明
移動ツール(V)オブジェクトを選択したり移動する際に使用。
拡大・縮小ツール(K)オブジェクトの拡大縮小を行うツール。テキストの拡大縮小にも使える。
フレーム(F)フレーム(枠組み)を作成するツール。各種デバイスサイズのテンプレートも用意されている。レイアウトの用途にも使用。
長方形ツール(R)長方形を作成するツール。Shiftで正方形を描ける。
直線ツール(L)直線を作成するツール。Shiftで垂直に描ける。
楕円ツール(O)楕円を作成するツール。Shiftで正円を描ける。
ペンツール(P)独特なシェイプを作成できる。
テキストツール(T)テキストを入力するツール。クリック挿入で自動幅、ドラッグ操作で固定幅のテキストエリアを作成。
手のひらツール(H)キャンバスを移動する際に使用するツール。スペースキーで一時的な利用が可能。
コメントツール(C)キャンバス状にコメントを残せるツール。チャット形式でのやり取りが可能。メモとしても利用できる。

まとめ

今回は「Figma入門の基本的な使い方」をご紹介しました。

今回ご紹介した用語やショートカットは、デザインをする上で最低限押さえておきたい基本的な知識になります。しっかりと押さえておきましょう。

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

Flutter関連の書籍を出版しました!