Figmaとはブラウザ上で簡単にデザインの作成、チームでの共同編集を行えるデザインツールです。
ワイヤーフレームやアプリのUIデザイン制作はもちろん、PowerPointの代わりとして資料作成を行うなど使用用途は幅広く、リアルタイムで複数人による共同編集が行えるなどの特徴があります。今回はFigmaの概要や基本機能について解説を行っていきます。
Fifmaとは？
Figmaとはブラウザ上で動作するデザインツールで、UIデザインやプロトタイプの制作、共同編集などを行うことができます。Webブラウザ上で直接デザイン作業ができるため、インストールや環境設定が不要で、どこでも利用することができます。またリアルタイムに複数人が同時にデザイン作業を行うことができ、変更履歴やコメント機能を使ったコミュニケーションができるため、チームでのデザイン制作やレビューがスムーズに行えます。さらにFigmaはデザイン制作に必要な機能をほぼすべて備えており、プラグインを活用することでより高度なデザイン制作も可能となっています。
無料版と有料版の違い
Figmaには永年無料で使用することができる「Starter」とチーム開発向けの「Professional」企業向けの「Organization」の3つのプランが存在します。
無料である「Starter」ではチーム内のプロジェクトを1つまでしか作れなかったり、保存できるファイル数も3つまでなど機能面でいくつかの制限が設けられており、個人使用や小規模開発向けのプランとなっています。「Professional」では上記の制限が解除され無制限で使用できるようになり、共有可能なチームライブラリを作成することができます。また、学生や教育関係者は認証されると「Professional」プランを無料で使用することができます。企業向けの「Organization」では権限付与を行なったり社外との共有ファイルにはパスワード設定を義務付けたりといった、より企業向けの機能が用意されています。
機能面で多少の制限はありますが、個人使用の場合は「Starter」プランでも十分な機能が備わっているため、最初は「Starter」プランの使用をおすすめします。
使用方法
Figmaはブラウザ上で動作するデザインツールのため、会員登録をするだけですぐに使用することができます。
また、Googleアカウントを使用することでこれらの作業を数分で済ませる事ができるため、Googleアカウントを使用するのがおすすめです。
1. 公式サイトにアクセス
公式サイトにアクセスを行い、「始める」を選択します。
2. アカウント作成
メールアドレスを使用し、アカウントを作成するかGoogleアカウントを使用してのログインするかを選べます。今回はGoogleアカウントを使用します。
3. アカウント情報入力
次に登録を行いたい「名前」と「職業」の入力を行い、「アカウントを作成」を選択します。
4. チーム作成
Figmaでは同時に編集を行うメンバーで「チーム」を作成し、その中に「プロジェクト」を立ち上げて「ファイル」を作成します。複数人で使用しない場合は飛ばしても大丈夫です。
5. チームメンバーの招待
作成したチームにメンバーを招待します。招待をしたい方のメールアドレスを入力し、次に進みます。
6. プラン選択
「Starter」と「Professional」の二択から選択します。 いくつかの制限がありますが、まずは「Starter」を選択しましょう。
7. FigmaかFigjamの選択
Figmaを開くかFigjamを開くかを聞かれるのでFigmaを選択します。
8. テンプレートの選択
使用するテンプレートを選びます。
9. 作成
これでデザインの作成を始めることができます。
日本語化
今までFigmaを日本語化する際はブラウザの拡張機能を入れる必要がありましたが、公式に日本語対応致しました。そのため設定を変更するだけで簡単に日本語に変更をすることができます。
1. ホーム
ホーム右上のユーザーアイコンを選択し、「Settings」を開きます。
2. Language
Language設定の「Change languages」を選択します。
3. 言語選択
「English」と「日本語」が選べるため、「日本語」を選択し保存します。
4. 日本語化完了
以上で日本語化が完了致します。
デスクトップアプリのインストール
Figmaにはブラウザ版とデスクトップ版、モバイルアプリ版があります。
機能面に違いはありませんが、ブラウザ版の場合本格的なデザインを行うとカクついてしまう可能性などがあります。そのため、本格的なデザインを行う場合はデスクトップ版を使用し、それ以外の用途ではブラウザ版を使用するなどの使い分けをおすすめします。
今回はMac（Ventura Ver13.2.1）へのインストール方法について解説を行います。
1. ホーム
ホーム右上のユーザーアイコンを選択し、「デスクトップアプリを入手」を選択します。
2. Figma.dmg
ダウンロードされた「Figma.dmg」を開き「Applications」へドラッグ&ドロップします。
3. ログイン
インストールが完了したらLaunchpadよりFigmaを起動しログインを行います。
画面構成
Figmaを活用していく上で必要となってくる各種ツールや画面について解説を行っていきます。
まずはFigmaで新規ファイルを作成すると以下の画面になります。Figmaのウィンドウは「ツールバー」「左サイドバー」「キャンバス」「右サイドバー」の4つのエリアで構成されています。
左サイドバー:レイヤー
左のサイドバーには「レイヤー」「アセット」「ページ」が表示されます。
レイヤーには配置をしているオブジェクトが一覧表示されます。試しに「iPhone14 Pro Max」のフレームを2つ配置してみます。。すると左サイドバーのレイヤーに配置を行ったオブジェクトが一覧で表示されます。
左サイドバー:アセット
アセットでは作成した「コンポーネント」が表示されます。
コンポーネントには構成要素や部品といった意味合いがあり、複数レイヤーを1つにまとめてコンポーネント化（部品化）することで複数のデザイン間で再利用することができます。コンポーネントを作成するには使用したいレイヤーを複数選択し、右クリックを行い「コンポーネントの作成」を選択するか「⌥⌘K」を押す事で作成することができます。
左サイドバー:ページ
ページにはファイル内のページが表示されます。
デフォルトでは折りたたまれていますが、クリックをすることで表示することができ、「＋」を選択することでページの追加を行えます。
キャンバス
画面の中央にはキャンバスが表示されます。
このキャンバスがデザイン画面となり、キャンバスにオブジェクトを配置していくことで作成を行います。
右サイドバー:デザイン
右のサイドバーには「デザイン」「プロトタイプ」「インスペクト」が表示されます。
デザインでは選択をしたオブジェクトの色や位置、線幅やエフェクトなどを調整できます。
右サイドバー:プロトタイプ
プロトタイプではユーザーの操作や行動を検証するためのフローを作成することができます。
これにより実際にページ遷移した際の動きなどを動的に確認することが可能です。
右サイドバー:インスペクト
インスペクトではデザインデータからCSSコードを参照したり画像の書き出しが行えます。
参照したいオブジェクトを選択することでCSSコードを参照できます。ただし、レスポンシブコーディングを行う場合このまま全てコピペをしてしまうと、ウィンドウ幅に合わせて伸縮しないなどの問題が出てくるため注意が必要です。
ツールバー
画面上部にあるツールバーにはデザインを作成するための様々なツールが配置されています。ツールの種類は以下になります。
| ツール名 | 機能説明 |
|---|---|
| メインメニュー | ファイルの操作や編集、エクスポート、共有など全般的な操作が可能 |
| 移動ツール | オブジェクトの選択、移動、拡大縮小、回転を行うための基本ツール |
| フレームツール | デザインのレイアウトやアートボードを作成・編集するためのツール |
| 図形ツール | 四角形、円形、星型などの基本図形を作成・編集するためのツール |
| 描画ツール | 自由に線や形を描くことができ、カスタム図形の作成に使用 |
| テキストツール | テキストを追加し、フォント、サイズ、カラーなどを編集できる |
| リソースツール | カラー、テキストスタイル、アイコン、画像などのアセット管理 |
| 手のひらツール | キャンバスをドラッグして移動するためのツール、ズームも可能 |
| コメントツール | デザインに対してコメントを追加し、チームとのコラボをサポート |
Figmaの使い方
画面構成や各種機能について理解ができたところで実際に簡単なワイヤーフレームの作成を行ってみましょう。
1. ファイルの作成
まずはファイルの作成を行っていきます。
ホーム画面中央にある「デザインファイルを新規作成」よりファイルを作成します。
2. フレームの作成
次にツールバーのフレームツールを選択し、右サイドバーに表示される「MacBookPro16」のテンプレートを選択します。
3. 図形ツール
図形ツールを使い大雑把に全体図を作っていきます。
4. 文字入れ
あとは挿入したい文字を配置して完成です。
5. 完成
「⌥⌘エンター」を押す事で実際に端末で表示した際のイメージを見る事ができます。
まとめ
Figmaとはブラウザ上で簡単にデザインの作成、チームでのリアルタイムな共同編集を行えるデザインツールです。
FigmaではUIデザインやプロトタイプの制作、共同編集などが行えます。また、リアルタイムに複数人が同時にデザイン作業を行うことができ、変更履歴やコメント機能を使ったコミュニケーションができるため、チームでのデザイン制作やレビューがスムーズに行えます。デザイン制作に必要なツールはほとんど搭載されており、正式に日本語対応もしたため、これからデザイン制作を行う初心者の方にも扱いやすいデザインツールと言えます。個人や小規模でのデザイン制作の場合、無料で使用出来るStarterプランでも十分な機能が使用できるため、まずはStarterプランを使用してみることをおすすめします。
【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの？」「正しい勉強法とは何なの？」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。
「フリーランスエンジニア」
近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。
「成功する人とそうでない人の違いは何か？」
私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている！！ここでの量産型エンジニアの定義は以下の通りである。
比較的簡単に学習可能なWebフレームワーク（WordPress, Rails）やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。
多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、
エンベーダー編集部
エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。 「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。
関連記事
2020.02.25
完全未経験からエンジニアを目指す爆速勉強法
USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
- キャリア・学習法
- エンジニア
2023.02.12
【SEO対策】GoogleサーチコンソールとGoogleアナリティクスの違いとは？ 登録から連携方法まで解説
今回はWebサイトの運営を行う上で必須なツールであるGoogleサーチコンソールとGoogleアナリティクスの登録、連携方法について解説を行います。
- WEB
- SEO
2023.02.07
REST APIとは？特徴やメリットをわかりやすく解説
REST APIを用いることで開発にかかる時間やコストの削減を行うことができ、価格を抑えたサービス提供を行えるだけでなく、共通の枠組みとすることで開発者は理解しやすく効率的な開発が行えます。
- WEB
2023.08.31
【徹底解説】ステータスコード3xxについて詳しく
こちらの記事では、HTTPステータスコード300系について解説します。
- WEB