Figmaの基本的な使い方

デザインをするならぜひ一度試してもらいたいのがFigmaというデザインツール。無料で使えるプランもあるため、ちょっと気になっている、本格的にデザインを始めてみたいという方でもスムーズに使いこなせるように基本的な使い方を紹介していきます。

Figmaとは？

Figmaは、クラウドベース型のUI/デザインツールで、ブラウザだけで動作するのが大きな特徴です。Windows、Mac、Linux、モバイルなど、さまざまなデバイスで使えます。しかもオンラインでリアルタイムのデザイン作成やプロトタイプの検討が可能なので、チームで作業する場合にも最適です。

無料プランと有料プランの違いとは？

Figmaには、無料で利用できるプランと、より高度な機能が使える有料プランが用意されています。それぞれの特徴を知ることで、ニーズに合ったプランを選択する助けになります。

スターターチームプラン

• 料金: 無料
• 主な特徴:
  • 最大3つのコラボレーション用デザインファイル
  • 個人用ドラフトは無制限
  • 基本的なファイルインスペクション機能
• 対象: 個人や小規模なチーム、初めてFigmaを使用する方

プロフェッショナルチームプラン

• 料金: 月額￥2,250/編集者（年払いの場合20％割引）
• 主な特徴:
  • 無制限のFigmaファイル
  • チームライブラリの利用
  • 高度なプロトタイピングと開発モード
  • バージョン履歴の無制限保存
• 対象: 中規模以上のチームや、より高度なデザイン作業を行うチーム

ビジネスプラン

• 料金: 月額￥6,750/編集者、または￥3,750（開発モードのみ）
• 主な特徴:
  • 組織全体のライブラリ
  • デザインシステムアナリティクス
  • ブランチ機能とマージ機能
  • プライベートプラグイン
  • シングルサインオン（SSO）や管理機能の強化
• 対象: 大規模な企業や組織全体での導入を検討している場合

エンタープライズプラン

• 料金: 月額￥11,250/編集者、または￥5,250（開発モードのみ）
• 主な特徴:
  • 高度なデザインシステムのテーマ設定
  • REST APIでの変数同期
  • チーム専用のワークスペース
  • SCIMによるシート管理やアイドルセッションタイムアウト

アカウント作成

まずは、Figmaの公式サイト（https://www.figma.com/）にアクセスします。次に、「Sign up」をクリックし、以下の方法で登録を進めましょう。

• Googleアカウントで登録: 「Continue with Google」を選択し、Googleアカウント情報を入力します。
• メールアドレスで登録: 名前、メールアドレス、パスワードを入力して「Create account」をクリックします。

登録が完了すると、Figmaのダッシュボードが表示され、デザインの作成を始められる準備が整います。

新規ファイルを作成する ログイン後、「New File」をクリックして、新しいデザインファイルを作りましょう。キャンバスが開き、ここで実際にデザインを始めることができます。

Figmaでデザインを作る

①新規作成

デザインを作るときは右上の青いボタン「新規作成」ボタンを押して、デザインファイルを選択します。

②フレーム（アートボード）を作る

ファイルを作ったら、作りたいデザインのフレーム（大枠のようなもの）を作ります。

画面中央下のフレームボタン、もしくはショートカットキーでFを押すとフレームを作ることができます。

どんなサイズで作ったらいいかわからないという場合でも大丈夫です。

フレームのボタンをクリックすると右側に作りたいデザインのサイズが出てきます。

自分が作るデザインに合わせてフレームのサイズを選びましょう。

今回はスマートフォン向けのwebデザインをつくる想定で、フレームを選びます。

③テキストを打ってみる

フレームが選べたらテキストを打ってみましょう。テキストは、画面中央下の「T」テキストボタン、もしくはショートカットキーの「T」を押すことでテキストボックスが表示されます。

④シェイプを作ってみる

次にシェイプを作ってみます。シェイプとは、丸や四角、三角のことです。

フレームやテキストと同じように画面中央下の□マークを押してみましょう。

⑤色を変更してみる

色の変更は画面右のメニューから行うことができます。色を変えたいオブジェクト（テキストやシェイプ）をクリックして、右のメニューから色を変更しましょう。

「フレーム」「グループ」「オートレイアウト」を上手に使い分けるには？

Figmaにはデザイン要素を整理し、効率的にレイアウトを組むための便利な機能がいくつかあります。その中でも特に重要なのが「フレーム」「グループ」「オートレイアウト」の3つです。デザインを作るときにどれを使うべきか迷ったときに参考にしてください。

フレーム

フレームは、デザインを作るときのキャンバスのようなものです。AbobeのXDなどでいうアートボードに近い存在です。

使い方： Webサイトのページやアプリ画面の作成。

具体例：スマートフォンのデザインを作成する際、各画面をフレームで区切る。

特徴：レスポンシブデザインに最適、フレーム内の要素を管理しやすい。

このような特徴があるフレームですが、フレームの中にフレームを入れる（入れ子）ができる仕様になっています。

ではなぜ入れ子にできるのでしょうか？入れ子にできる理由とメリットをご紹介します。

フレームが入れ子にできる理由

Figmaでは、フレームは単なる四角い枠ではなく、レイヤー構造を持った特別なオブジェクトとして扱われています。そのため、フレームの中に別のフレームを配置し、親子関係を持たせることができます。これによって以下のようなメリットが生まれます。

① 親フレームが子フレームの動きを制御できる

たとえば、アプリの画面全体を1つのフレームで作成し、その中に「ヘッダー」「メインコンテンツ」「フッター」などを別のフレームとして配置すると、親フレームを動かすだけで、すべての要素が一緒に動くようになります。

② レスポンシブデザインに対応しやすい

フレームを入れ子にすることで、異なる画面サイズへの対応がスムーズになります。例えば、Webデザインの場合、親フレームをPC用、子フレームをスマホ用として設定することで、それぞれのデバイスに合わせたデザインを簡単に管理できます。

③ レイアウトの整理がしやすい

ボタンやアイコンなどのパーツごとにフレームを作成し、それらをまとめて1つの親フレームにすることで、デザインがスッキリ整理されます。チームでの共同作業でも要素を見つけやすくなるため、作業効率がアップします。

グループ

作ったオブジェクトをまとめて動かしたい、そんなときに便利なのがグループ機能です。

用途: 要素をまとめて整理する。

具体例: 複数のアイコンやボタンを1つのグループとして扱う。

特徴:・一括で移動・調整が可能。
・フレームよりも自由度が高いが、レスポンシブ対応には向かない。

オートレイアウト

オートレイアウトは一見するとグループと同じような機能に見えるかもしれません。

グループとの違いは、配置や間隔を自動的に調整するできるという点です。

グループの場合、配置や間隔は固定ですが、オートレイアウトは自動的に調整可能です。

用途: レイアウトが変化するデザインの作成。

具体例: ボタンのテキストが変わっても自動的にサイズ調整される。

特徴:・パディング、間隔を調整可能。

・自動的にレイアウトが整う。

使い分けのポイント

このように、それぞれの機能には異なる特性があります。適切に使い分けることで、より効率的なデザインが可能になります。

Figmaのメリット

①マルチデバイス対応

クラウドベースなので、どんなデバイスからでもアクセス可能です。チームでの作業がやりやすいですね。

②リアルタイムコラボレーション

複数人で同時にデザイン編集が可能で、チーム作業が効率化します。

③プロトタイピング機能

デザインからプロトタイプ作成まで一つのツールで完結するので、お客様にデザインを見せたいときにも便利！

④プラグインエコシステム

様々なプラグインを利用して、デザイン作業が楽になります。

⑤バージョン管理機能

いつでも過去のデザインに戻れるため、安心して作業できます。

Figmaのデメリット

①オフライン利用の制限

基本的にクラウドベースのツールであるため、インターネット環境が必要になります。

②高機能プランの価格

無料プランで利用できる機能には限界があり、大規模なチームや高度なデザインシステムを必要とする場合は、有料プランのコストがネックになることもあるでしょう。

③学習曲線

初心者にはシンプルに見えるが、プロトタイピングやチームライブラリなどの高度な機能を使いこなすには時間がかかる場合がります。

④ブラウザ性能依存

ブラウザベースのツールであるため、パフォーマンスはデバイスやネットワークの状態に影響を受けやすいです。

Figmaでデザインをするときの注意点

Figmaでデザイン作業を行う際には、いくつかのポイントに注意する必要があります。

①レイヤーの整理

複雑なデザインをするときには、レイヤーが多くなり編集がしづらくなってしまいます。

②グリッドシステムの活用

レイアウトの一貫性を保つために、グリッドシステムを設定し、それに基づいてデザインを作成するときれいなデザインを作ることができます。

③コンポーネントの利用

繰り返し使用する要素（ボタン、ナビゲーションバーなど）は、コンポーネント化して再利用可能にすることで作業効率を上げましょう。

④適切なファイルサイズ

複雑すぎるデザインや不要な要素を削減し、ファイルサイズを軽く保つことで、スムーズな操作を維持できます。

⑤フレームを伸ばす場合

デザインをしているとどんどんコンテンツが長くなってフレームを下に伸ばしたいときがあると思います。その時、位置に注意しましょう。位置が拡大縮小となっていると、オブジェクトの位置がずれてしまうことがあります。

Figmaでデザインをしてみよう！

Figmaの基本的な使い方を紹介しました。個人で使用する場合は無料プランでも十分な機能を使えますので一度使ってみてはいかがでしょうか？