こんにちは、テルプロです！
「Figmaの基本的な使い方がわからない」とお悩みではないでしょうか？
本記事ではそんな悩みを解決していきます！
本記事を読むことで
- Figmaの基本的な使い方を短時間で確認できる
- 用語やよく使うショートカットを知ることができる
Figmaの基本的な使い方
Figmaとは
『Figma』は、UI/UXデザイン用の共同Webアプリケーションです。
Figmaの便利な点として、Webブラウザ上で利用できることが挙げられます。アカウントさえ取得していれば、オフィスと自宅で作業をスムーズに継続できます。
URLを共有すれば、1つのファイルを複数のメンバーで編集できるため、ディレクターやエンジニアなどの様々な役割の人とデータを共有しながらの作業が可能です。
Figmaは無料で利用できます。無料プランでは、共有できる人数や作成できるプロジェクトの数に制限がありますが、個人で利用する分には問題ないでしょう。
Figmaの基本的な用語
Figmaでデザインをする上で押さえておくべき「基本的な用語」は以下の通りです。
| 用語 | 説明 |
| 8 Point Grid SyStem | 8の倍数で一貫性のあるサイズ |
| 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入門の基本的な使い方」をご紹介しました。
今回ご紹介した用語やショートカットは、デザインをする上で最低限押さえておきたい基本的な知識になります。しっかりと押さえておきましょう。
UI/UXデザインの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。
▼以下では、口コミをもとに厳選した「UI/UXデザイン学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！
最後までご覧いただきありがとうございました。ではまた！
