こんにちは！アシスタントデザイナーのくぼです！
この記事は、Figma初心者の方に向けた記事となっております！Figmaの全体像を把握していただけるよう、Figmaの概要や各種ツールについて簡単にまとめています。
オートレイアウトやコンポーネント化といったテクニックの詳細には触れておりませんのでご注意ください。そちらについてはまた別途記事を書きたいと思います！
本記事がこれからFigmaを始める方のご参考になれば幸いです！
Figmaは最新のインターフェースデザインツール
Figmaは2016年9月に正式リリースされたリアルタイムにコラボレーションできるデザインツールとして大変人気のデザインツールです。世界のデザイン関係者約3,000人に聞いた「2022年に最も使いたいツール」のアンケートで1位を獲得したツールです。
最初インターフェースは全て英語でしたが、日本でのFigmaの人気の高まりから日本法人が設立しました！！！これにより公式で日本語訳も見られるので大変便利になりましたね。
Figmaが他のツールと大きく違うのは、OSやアプリケーションに依存せず共有できること、そして共同で同時に編集作業ができることです。
Figmaの概要
Figmaのプランやデザインファイルの構造、権限の違いなどFIgmaの概要についてご説明します。
Figmaには4つのプランがあります
Figmaには4つのプランがあります。アカウント作成時にプランを選択します。
スタータープランはプロジェクトやファイルの数に上限がありますが、使えるデザイン機能は有料プランと変わりません。コラボレーションやセキュリティの面で違いがありますので、詳しくは公式サイトをご確認ください！
Figmaのデザインファイルの構造
Figmaの一番大きな単位はチームです。チームの中にプロジェクトが存在していて、そのプロジェクト内にファイル、その中にページがあります。
例えば、無料のスタータープランは3つのファイル作成、3つのページ作成までといった制限があります。
また、チームとは別に「下書き」という作業スペースも存在します。これは、どのチームにも属さず自分だけが閲覧・編集できる作業スペースです。
Figmaには2つの編集権限があります
Figmaには、2つの編集権限「編集者」と「閲覧者」があります。「閲覧者」はデータの閲覧・コメント・エクスポートができ、「編集者」は閲覧者の機能に加えて、データを編集することが可能です。
また、プランは先ほど説明したチームごとに選択する必要があり、料金の発生やメンバー設定などはチームごとに管理します。
有料プランはチームの編集者の数が増えるごとに課金されますのでご注意ください。スタータープラン（無料）は一つのプロジェクトあたり3ファイルまで・1ファイルあたり3ページまでの制限がありますが、編集者が無制限です。閲覧者はどのプランでもどれだけ増えても料金は変わりません。（2023年7月現在）
詳しくはFigma公式サイトのチームの権限についてのページをお読みください！
Figmaにはブラウザ版とデスクトップアプリ版があります
ブラウザ版、デスクトップアプリ版、どちらも機能にほとんどの差はありませんので、ご自身の作業しやすい方を選ぶのが良いかと思います。
注意点として、ブラウザ版でローカルフォントを使用したい場合はフォントインストーラーが必要です。ただし、FigmaはデフォルトでGoogle Fontsにあるフォントを使用できるため、特別に使いたいローカルフォントがない場合は必要ないかと思います。
デスクトップアプリ、モバイルアプリ、フォントインストーラーのダウンロードはこちらからどうぞ！
公式ヘルプ（ページ）：Create and manage pages
アカウントを作成しましょう！
Figmaを使うためにはまずアカウントを作成する必要があります！まずはhttps://www.figma.com/ja/downloads/にアクセスしましょう。
Googleのアカウントで続行か、自身のアドレスとパスワードによるアカウント作成かどちらか選べます。
Figmaの画面構成とファイルの作り方
次に、画面構成と一緒にファイルの作り方をご説明します！
これはFigmaにログインすると表示される画面です。左のコントロールパネルに自分の所属しているチームが表示されます。右側のメイン画面にチーム内のプロジェクトが並んでいます。
右上の「＋プロジェクト」ボタンを押して新規でプロジェクトを作成しましょう。
プロジェクトを選択すると、そのプロジェク内のファイルが並ぶ画面に遷移します。「デザインファイルを新規作成」ボタンを推して、ファイルを作りましょう！
こちらの画面でデザイン制作を開始できます！
Figmaの各種ツールや機能紹介
それぞれのエリアでできることを簡単に解説します！
ツールバー
ツールバーでは基本的なツールの選択・共有設定・表示設定、モードの切り替えができます。
ツールバーは選択しているオブジェクトで表示されているアイコンが変わりますので、現在見えているツールバーはデフォルトです。
それぞれのツールの用途は以下です！
- メニュー：Figmaのアプリケーションメニューです。ファイルへ戻るや各種設定などの全般的なメニューが格納されています。
- 移動ツール：オブジェクトを選択、拡大縮小するツールです。編集者権限を持っていない場合はオブジェクトの選択はできません。
- リージョンツール：オブジェクトをグルーピングしたり、外枠となるフレームなどを作成するツールです。
- シェイプツール：長方形や円などの基本的な図形を作成するツールです。
- 描画ツール：ベクターのパスを描画するツールです。
- テキストツール：テキストを入力するツールです。
- リソースツール：コンポーネント・プラグイン・ウィジェットを検索したり使用したりするツールです。
- 手のひらツール：キャンパス内の画面を掴んで移動するツールです。
- コメントツール：キャンパス内の任意の場所にコメントを追加できるツールです。
- 通話：Figma上でコラボレーター(同ファイルを開いているメンバー)と通話することができます。
- アイコン：コラボレーターのアイコンが一覧で表示されます。
- 共有ボタン：コラボレーターを追加したり、共有リンクの取得などができます。
- 開発モード：Figma Config 2023で発表された開発モードです。現在ベータ版で誰でも利用可能ですが、2024年から有料化します。
- Figmaには「Design Mode」と「Dev Mode」の2つのモードがあります。「Design Mode」で作成したデザインデータのコードなど、実装で必要なデータを「Dev Mode」で確認します。
- プロトタイプの再生：ドキュメントにプロトタイピングが設定されている場合、再生が可能です。
- 表示オプション：キャンパスの拡大率や、グリットなどの表示/非表示を設定できます。
公式ヘルプ：Access design tools from the toolbar
キャンバス
画面中央がキャンバスで、図形やフレームなどいわゆる"デザイン成果物"がここに並びます。
背景色は右サイドバーの背景セクションから変更することができます。また、各ページで異なる背景色にすることも可能です。
キャンパスはかなり広いですが、無限ではありません。各軸のサイズは -65,000 から +65,000 までとなっています。
左サイドバー（ページとレイヤー）
画面左にあるサイドバーではページパネルとレイヤーパネルがあります。それぞれ分かれており、切り替えて見ることが可能です。
レイヤーパネルでは、画面内に配置されたページとページ内のオブジェクトが一覧で並びます。デフォルトでページは畳まれているため、クリックすることで展開できます。プラスアイコンでページを追加することも可能です。キャンバス内でオブジェクトを配置すると、左サイドバー、ページの下に配置されたオブジェクトが並びます。
アセットパネルにはファイル内にあるコンポーネントやスタイルなどが並びます。ここからコンポーネントを検索して画面内に配置することなどが可能です。
公式ヘルプ（ページ）：Create and manage pages
右サイドバー
画面右にあるサイドバーでは、デザインパネルとプロトタイプパネルがあります。こちらも左サイドバー同様、パネルを切り替えて操作します。
デザインパネルでは、オブジェクトを何も選択していない状態だとキャンバスの背景色の変更、変数の指定、スタイルの登録、書き出しなどを行うことができます。オブジェクトを選択していると、そのオブジェクトのサイズや色、エフェクトなどの設定ができます。
プロトタイプパネルでは、オブジェクトを何も選択していない状態だとプロトタイプで表示する画面のサイズの指定ができます。オブジェクトを選択していると、そのオブジェクトの遷移先やイベント発火時の動きなど、プレゼンテーションを実行した際の動きを設定することができます。
※以前まであったインスペクトパネルはFigma Config 2023で発表されたDev Modeで閲覧可能なため、右サイドバーからはなくなりました。
公式ヘルプ：Design, prototype, and inspect (right sidebar)
Figmaでデザインデータを作成する際によく使う操作
では、実際にデザインデータを作成しましょう！例としてスマホアプリのログイン画面を作成します。
ここでは使用する頻度の高い操作をいくつかピックアップして簡単に説明しています！
キャンバスにフレームを追加する
まずはキャンバスにフレームを作成します！ツールバー右から3番目のリージョンツールでフレームを作成しましょう。ショートカットキーは a です。
右サイドバーからフレームサイズを選ぶことができます。今回はフレーズサイズをiPhone 14 Proとしました。用途に合わせてサイズを選択 or カスタムで指定してください。
フレームにテキストを配置する
次に画面内に配置するタイトルです！テキストツールを使って画面内に文字を配置します。ショートカットキーは t です。
オートレイアウト機能を使って入力フォームUIを作る
次にログインの際に必要なメールアドレスとパスワードの入力フォームを作ります。
まず、テキストでタイトルと、入力フォーム用に文言を用意します。これは画面外に作成します。
そして、入力フォームとなるテキストを選択してオートレイアウトをかけます。ショートカットは shift + a です。オートレイアウトはフレームとコンポーネントに追加できるプロパティです。オートレイアウトでできる機能は多くありますが、ここでは入力フォーム用の領域の指定、外枠線を作るためにオートレイアウトをかけます。
また、オートレイアウトはデフォルトでFrame 1などの名前がつきますので、個別で名前をつけることも作成途中の段階でしっかりやっておきましょう！
オートレイアウトをかけたフォームに右サイドバーのパネルでサイズ変更、枠線つける、色の変更等を行いました。
サイズ変更、角丸などは右サイドバーのFrame下のパネルで変更します。その下のStrokeで枠線と色を指定します。
ここからさらに、タイトルと先ほど作成したフォームを選択してまたオートレイアウトをかけます。ここでは右サイドバーで2つの要素間の余白を指定しています。
ちなみに画面外に作成した理由は、作成した要素をこの後コンポーネント化するためです。元となる親コンポーネントは全ての子コンポーネントの変更を一括管理できるため、個別のページで管理する必要があるのです。
コンポーネントを作る
次にコンポーネントを作ってみましょう。コンポーネントとは複数のデザイン間で再利用できる要素です。コンポーネントを作成しておくと、複数の画面上で同一の部品を使用する際、元の親となるコンポーネントに手を加えるだけで全ての子コンポーネントに変更が反映されます。
先ほど完成した入力フォームをコンポーネント化します。ショーカットキーは option + command + k です。コンポーネント化されるとアイコンがつき、左サイドバーで表示されるレイヤー名が紫に色が変わります。
作成した親のコンポーネントをコピペする or 左サイドバーのアセットから画面に入力フォームを配置します。文言をメールアドレス用、パスワード用に変更して入力フォームは完成です！
ボタンも先ほど同様、テキスト配置→オートレイアウト→右サイドバーデザインパネルで振る舞いを指定→コンポーネント化→親コンポーネントをコピペして画面に配置の流れで作成します。
ログイン画面が完成しました！
ページを追加する
次にコンポーネント管理するために新たにページを作成します。
左サイドバーの＋アイコンからページを追加します。
デフォルトはPage2〜名前がつきます。今回はコンポーネント管理ページのため「Component」とします。
セクションを追加する
先ほど作成したコンポーネント管理ページにセクションを追加します。ショートカットキーは shift + s です。
セクションにはラベルが付いており、キャンバス上の要素をグルーピングしたり、エリア分けを明確にすることができたり、複数ある画面の中から実装可能な画面であることを示すことができます。コンポーネントをセクションでグルーピングすることで管理が楽になり、誰が見てもどこに何があるのかわかりやすいデータになります。
ちなみに、先ほどログイン画面を制作する際に使用した「フレーム」と、この「セクション」には明確な違いがあります。セクションはレイヤー構造のトップです。セクション内にフレームを含めてグルーピングすることはできますが、フレーム内にセクションを含めることはできません。
デフォルトではSection 1〜名前がつくので、適した名前に変更しましょう。
入力フォームとボタン用にそれぞれセクションを用意し、先ほどの親コンポーネントを配置し要素を整理しました。このようにページやセクションを使用し、管理しやすいFigmaデータを作成していきます。
コメントの追加
キャンバス上にコメントを追加することができます。ショートカットキーは c です。コメントツール時にキャンパスをクリックするとコメントを追加できます。フレーム上に追加した場合は、フレームを移動させた場合にもコメントも追尾されます。
コメントをクリックすると、返信、マーク、リンクのコピー、削除、完了、サイドにドッキングなどの操作ができます。ここで注意したいのが「削除」と「完了」の違いです。「完了」は非表示になりますが、後から右サイドバーのソートで表示にすることができます。削除してしまうと、もう見ることができなくなってしまいますので注意が必要です。
また、コメントツール時には右サイドバー上に全てのコメントが並ぶ、かつキーワードで検索することができます。表示/非表示などのソートもここで操作します。
リンクを共有する
ツールバーのシェアボタンから共有リンクをコピーすることができます。セクションやフレーム、オブジェクトなど、シェアしたい要素を選択した状態の共有リンクは、指定した要素を選択した状態でFigma画面を開いてくれます。Figma画面のここをみてほしい！といった際にはぜひご活用ください！
Figma Dev Modeの特徴
Figma Config 2023で発表され、注目されているのがDev Modeです。以前まであったインスペクトパネルは現在こちらのDev Modeで閲覧することが可能です。Dev Modeとはその名の通り、実装者がコードなどを確認するための実装者モードです。Dev Modeへ切り替えるショートカットキーは Shift + d です。
Dev Modeの画面構成とDesign Modeとの違い
こちらがDesign Modeの画面です。
こちらがDev Modeの画面です。切り替えはツールバーのトグルスイッチ、またはショートカットキーは Shift + d で切り替えます。
Dev Modeは実装に特化した画面のため、それぞれのパネルでできることがDesign Modeと異なります。
- ツールバー
- Design Mode：デザインをするための多くのツールが並ぶ。
- Dev Mode：移動ツールとコメントツールのみ。現在ベータ版のためフィードバックを送ることもできる。コラボレーション機能はDesign Modeと同じ。
- キャンバス
- Design Mode：キャンバス上でデザインデータを作成する。
- Dev Mode：キャンバスの移動と要素の選択、コメントができる。触ってもデザインデータが変わってしまうことがない。
- 左サイドバー
- Design Mode：レイヤーパネルとアセットパネルを切り替えることができる。レイヤーにはキャンバス上の全てのデザインデータが並ぶ。アセットではコンポーネントやスタイルの確認ができる。
- Dev Mode：開発対象にしている画面があれば、それがピックアップして表示される。
- 右サイドバー
- Design Mode：デザインパネルとプロトタイプパネルを切り替えることができる。細かなデザインの設定はここで行う。
- Dev Mode：インスペクトパネルとプラグインパネルを切り替えることができる。インスペクトパネルではコードの確認などを行い、プラグインパネルで外部のコミュニティと繋げて実装に活用することができる。
Dev Modeのメリット
- Dev Modeは触ってもデータが変わることはない
- UI要素をコードで見ることができる
- 開発に必要なデザインだけを参照することができる
- 画面単位でデザインの変更履歴をみられる
- コンポーネントのバリアントを確かめることができるプレイグラウンドがある
Dev Modeは触ってもデータが変わることはない
このDev Modeに切り替えると、画面内のオブジェクトなどを触っても数値が変わってしまったりすることはありません。なので安心して触ってもらえます。実装のためにデータを確認する際にデザインデータを壊してしまうのが怖いといった悩みも解消されますね。
UI要素をコードで見ることができる
実装に必要な要素を右サイドバーのCodeで確認することができます。デフォルトはcssですが変更可能です。
アップデート前のインスペクトパネルでは、余白や高さ、色などの情報を見ることができましたが、アップデート後にはコードも見られるようになりました！
開発に必要なデザインだけを参照することができる
直近の開発の対象の画面をセクションで囲い、「Ready for dev」マークをつけておくと、DevModeにしたときに対象の画面のみがピックアップされます。複数管理されている画面の中から開発対象の画面のみにマークがついているのは便利ですね！
対象のセクションを選択すると、セクション名の横に「Mark as ready for dev」アイコンが表示されます。そのアイコンをクリックすると「Ready for dev」になり、緑の塗りマークに変わります。
これをしておくと、「Ready for dev」セクション内のフレームがDev Modeで見た際に、左サイドバーにピックアップされます。
デザイナーがエンジニアに開発対象データを共有する際に設定しておくと非常に親切ですね。
画面単位で変更履歴を見られる
Dev Modeで右サイドバーのCompare changes を押すと、その画面の最新バージョン(右)と一つ前のバージョン(左)を確認することができます。
前回からどこが変更になったのがが明らかですね。
コンポーネントのバリアントを見られるプレイグラウンドがある
Dev Modeで右サイドバーのOpen in playground を開くとvariantを試しながらコンポーネントを確認できます。コンポーネントにテキストが入る場合には、テキストを差し替えて実際にどうなるのかを確認することもできます。
覚えておきたいショートカット(for Mac)
使用頻度の高いショートカット、便利なショートカットをいくつかピックアップしてご紹介します！その前に、Figmaはショートカットキーを一覧することができます。右サイドバー下のヘルプアイコンからキーボードショートカットを選択すると開くことができます。
使用したことのあるショートカットは水色の塗りになります。ここを見ながら試してみるのも面白いですよ！
使用頻度の高いショートカットキー
- フレームの追加：a
- セクションの追加：シフト + s
- 移動ツール： v
- テキストの追加：t
- コメントツール：c
- 四角形ツール：r
- 円形ツール：o
- オブジェクトの複製：Command + d
- オートレイアウト：Shift + a
- コンポーネント化： Option + Command + k
- 一つ前に戻す：Command + z
便利なショートカットキー
- プロパティのコピペ
- コピー： Option + Command + c
- ペースト： Option + Command + v
- フレームをPNGとしてコピー：Shift + Command + c
- 全体表示：Shift + 1
- 選択したオブジェクトを拡大表示：Shift + 2
- 均等配置（X軸 or Y軸どちらかが揃っている必要があります）：Control + Option + t
Figmaのアレコレ学ぶならプレイグラウンドがおすすめ
Figmaの操作を学ぶならプレイグラウンドをぜひやってみてください！説明と見本が用意されており、実際に触りながら操作を学ぶことができます！「Figma プレイグラウンド」で検索すると色々出てきますので見てみてください！
Figmaの基本操作、デザインモードで必要になる知識
Figma Variants Playground (Japanese 日本語)
Figma auto layout playground（Japanese 日本語版）
Figma Dev Modeで必要になる知識
Advanced prototyping(高度なプロトタイピング)
最後に
Figmaの全体像を把握していただけるよう、概要や各種機能などを簡単に説明しました。オートレイアウトの構造やコンポーネントでできる設定など機能の詳細については深く触れてはおりません。この辺はまだまだまだまだ奥が深いので、今後改めて記事を書きたいと思っていますので少々お待ちください！
Figmaはデザインツールとしての制作機能、チームで作業や確認が可能な共有機能、完成イメージが具体化するプロトタイプ機能を兼ね備えており、かつ無料プランもあるというとんでもなく便利なツールですので、せひこの機会に始めてみてはいかがでしょうか。
これからFigmaを始める方のご参考になれば幸いです。
最後まで読んでいただき、ありがとうございました！
41
