はじめに
Figma（フィグマ）は、クラウドベースで利用できるデザインツールで、デザイン初心者からプロフェッショナルまで幅広い層に支持されています。
Webデザインの学習中の方や、これから始めてみようと考えている方の中には、「Figmaも触ってみたい！」という方も多いのではないでしょうか。
そこで本記事では、Figma未経験の方やデザインツール初心者でも安心して始められるように、基本操作を丁寧にご紹介します。
Figmaの基礎機能をしっかりと身につけて、魅力的なデザインを作り上げるための第一歩を一緒に踏み出してみましょう！
Figmaをはじめる
１.アカウントの作成とファイルブラウザ画面の把握
Figmaを使い始めるには、まず公式サイトからアカウントを作成する必要があります。
アカウント登録の際は、無料の「Starter」プランを選択しておけば、勝手に有料プランに切り替わったり、料金が発生することはありませんのでご安心ください。
アカウントの作成が完了したら、次にFigmaの「ファイルブラウザ画面」を確認しましょう。
この画面は、いわばFigmaのホーム画面やダッシュボードにあたる部分で、以下のような情報が確認できます：
-
自分が作成したファイルの一覧
-
参加しているチームやプロジェクト
-
最近開いたファイル
Figmaのデスクトップアプリをインストールした場合、最初にログイン画面が表示されます。
-
アカウントをすでにお持ちの方は、「log in with browser（ブラウザでログイン）」を選んでサインイン。
-
まだアカウントがない方は、ログイン画面下の「Create one（アカウントを作成）」から登録を行いましょう。
２.新規ファイルの作成とFigmaのデザイン画面の構成を知ろう
Figmaで新しいデザインを始めるには、「デザインファイル」ボタンから新規ファイルを作成します。
作成直後のファイル名は「無題」となっているため、早めにわかりやすい名前に変更しておくことをおすすめします。後からファイルを探すときに便利です。
新しいデザインファイルを開くと、デザイン作業を行う操作画面が表示されます。
この画面には以下のようなエリアがあり、それぞれの役割を理解することで、より効率的に作業が進められます：
-
メインキャンバス：デザインを実際に配置・編集するスペース
-
レイヤーパネル：使用している要素や構造を一覧で確認できる
-
ツールバー：図形の作成やテキスト挿入など、基本操作を行うツールが並ぶ
最初からすべての機能を覚える必要はありませんが、画面の構成や基本ツールの位置だけでも把握しておくと作業がグッとスムーズになります。
Figmaの基本操作を試してみよう！
Figmaを使い始めたら、まずは基本的な操作を実際に試してみることが大切です。ページの作成、図形やテキストの追加、画像の挿入など、よく使う機能に慣れることで、デザイン作業をよりスムーズに進められるようになります。
Figmaでは以下のような機能が使用できます。
◾️ページとフレームを追加する
Figmaでのデザイン作成には、「ページ」と「フレーム」の概念を理解することが重要です。
-
ページ：プロジェクト全体をまとめる単位。新規ファイルには自動で「Page1」が作成されます。
-
フレーム：デザインを実際に作成するキャンバスエリア。PhotoshopやIllustratorで言う「アートボード」に相当します。
フレームは初期状態では表示されていないため、まずはフレームを作成して作業を始めましょう。
◾️図形（シェイプ）の描画と編集
次に、長方形・円・線などの基本的な図形を描いてみましょう。これらはボタンや背景、アイコンのベースとして活用できます。
最初はシンプルな図形でOKです。塗りや線の色、太さなどの設定にも慣れておきましょう。
◾️シェイプの結合・切り抜き
Figmaでは、複数の図形を結合したり切り抜いたりすることで、オリジナルのアイコンやロゴを簡単に作成できます。
イラストが得意でなくても、パーツの組み合わせで見栄えの良いデザインが実現できます。
◾️テキストの追加とスタイル設定
テキストツールを使えば、見出しやボタンラベル、本文などを簡単に追加できます。
フォント、サイズ、色、行間なども自由に調整可能。スタイルを保存して再利用することもできるので、作業効率もアップします。
◾️要素のコピー＆ペースト
デザイン中、同じ要素を複製したいときはコピー＆ペーストを活用しましょう。
ショートカットキー（Ctrl/Cmd + C、Ctrl/Cmd + V）で直感的に操作できます。
「ここに貼り付け」や「マルチ貼り付け」など、便利な貼付け機能も用意されています。
◾️レイヤー管理とグループ化
Figmaでは、各要素が「レイヤー」として管理されます。
関連する要素はグループ化することで、レイアウトが整理され、編集もしやすくなります。
複雑なデザインでもスッキリと構造化できる大切な機能です。
◾️配置・整列・回転・位置調整
正確な配置のために、整列ツールや位置調整機能を使いましょう。
要素を均等に揃えたり、バランスよく配置したりすることで、デザイン全体の完成度がアップします。
回転や微調整も簡単に行えます。
◾️画像の挿入
写真やイラストなどの画像素材を挿入する方法もとてもシンプルです。
パソコンのフォルダからドラッグ＆ドロップするだけで、キャンバスに配置できます。
◾️画像のトリミングとマスク
画像の一部だけを表示したいときは、「マスク機能」を活用しましょう。
特定のエリアを切り抜いて見せることができ、デザインにより洗練された印象を加えることができます。
◾️デザインのエクスポート（PNG・SVGなど）
完成したデザインは、PNGやSVGなどの形式でエクスポート可能です。
ファイル全体を画像化する方法と、個別の要素を素材として書き出す方法があります。
それぞれの違いや手順は、公式ガイドなどでチェックしてみると良いでしょう。
ファイル共有と共同作業におけるアドバイス
Figmaでは、デザインファイルを簡単に共有し、リアルタイムで他のユーザーと共同作業を行うことができます。共有リンクを発行するだけでファイルを他のユーザーに簡単に共有できます。
共有時には、閲覧専用・編集可能などのアクセス権限を細かく設定できるため、チームメンバーやクライアントとのやりとりもスムーズに行えます。
また、共同作業において重要なポイントを以下に挙げていきます。
◾️レイヤーを整理する
Figmaでは、各オブジェクトがレイヤーとして自動的に管理されています。
要素が増えてくると作業が煩雑になるため、適切な命名やグループ化を行って整理しておくことがとても大切です。
ファイルが整理されていないと、作業効率が落ちるだけでなく、他のメンバーが扱いにくく感じたり、プロジェクト全体の印象にも影響を与えることがあります。
見やすく整ったファイル管理を意識しましょう。
◾️コメント機能でフィードバックをもらう
Figmaにはコメント機能があり、デザインの特定箇所に対して直接コメントを残すことが可能です。
この機能を使えば、チーム内での意見交換や修正依頼がしやすくなり、スピーディーなフィードバックループを構築できます。
特に非デザイナーのメンバーやクライアントとも直感的にやりとりができるため、プロジェクトの進行がスムーズになります。
プロトタイプ機能の基本を理解する
Figmaのプロトタイプ機能では、作成したデザインにインタラクション（動き）を設定することができます。
たとえば、あるボタンをクリックすると別の画面へ遷移する、というようなアプリやWebサイトの実際の動作を再現できます。
ただし、プロトタイプ機能はプロジェクトの内容や目的によって活用の頻度が変わることもあります。細かく作り込み始めると作業量が多くなるため、最初は基本の動作から試してみるのがおすすめです。
終わりに
ここまで、Figma初心者の方がまず押さえておきたい基礎スキルをご紹介してきました。
これらのスキルを身につけることで、頭の中にあるアイデアやイメージを効率よくカタチにすることができるようになります。
さらに、Figmaの基本を理解しておけば、チームでの共同作業やプロジェクトへの参加にもスムーズに対応できるレベルに到達できます！
Figmaは学べば学ぶほど便利さを実感できるツールです。ぜひ、今回紹介したスキルを活用して、あなたのデザインスキルを一歩ずつ高めていってください。