Webデザインのスキルを身につけて、Webデザイナーとして就職・転職したいと思っているあなた。Webデザインの基礎知識はあるものの、実際にWebデザインを制作したことがなく、Figmaの使い方がわからないとお悩みではありませんか？ 本記事では、Webデザイン初心者でもFigmaについて理解できるように、基本情報と使用方法を丁寧に解説します。
Figmaとは？
Figmaとはブラウザ上で利用できるUIデザインやワイヤーフレームの作成に便利なデザインツールです。米国サンフランシスコ発のFigma, Inc.が「全ての人がデザインを利用できるようにする」という企業理念に基づいて開発され全世界で使用されています。
WebサイトやアプリなどのUI/UXデザインに特化しており、誰でも簡単に使える直感的な操作性と、リアルタイムで共同編集できるコラボレーション機能が特徴です。
Figmaのメリット
Figmaの優れた機能を、具体的に解説します。
- アカウントを作るだけで無料で使える
- 複数の編集者と同時に作業
- インターネットに繋ぐだけ！動作が軽い
- 自動保存で楽々作業
- ダウンロードしなくてもGoogle Fontsが使用できる
アカウントを作るだけで無料で使える
Figmaは、アカウントを作るだけで無料で使えるデザインツールです。
これは、Figmaが「誰もがデザインを利用できるようにする」というビジョンに基づいて開発されているためです。
Figmaの無料プランでは、以下の機能が利用できます。
- スケッチ機能
- レイアウト機能
- プロトタイプ機能
- コラボレーション機能
これらは、WebデザインやアプリデザインなどのUI/UXデザインに必要な基本的な機能です。
そのため、Figmaの無料プランで基本的なデザインをすることができます。
複数の編集者と同時に作業
Figmaの最大の強みは、ブラウザ上で複数人で同時にデザインを編集できるという点です。この機能により、チームワークの向上とデザインの質の向上を実現できます。
Figmaのコラボレーション機能は、チームでのデザイン作業を円滑に進める上で、欠かせない機能です。
インターネットに繋ぐだけ！動作が軽い
一般的なアプリの場合アプリをインストールしておかないと作業ができませんが、Figmaはブラウザでインターネットが繋がっていれば利用可能なため、スムーズに作業できます。
自動保存で楽々作業
Figmaは、一定間隔ごとに自動的にデータを保存します。
そのため、作業中にパソコンが突然シャットダウンしたり、誤ってデータを消去したりしても、作業中のデータを失うリスクが低くなります。
自動保存機能は、Figmaを使う上で、欠かせない機能です。
Figmaを活用して、作業の効率化と安心感を向上させましょう。
ダウンロードしなくてもGoogle Fontsが使用できる
Figmaでは、Google Fontsのフォントは、ダウンロードしなくても使用できます。
そのため、フォントファイルをダウンロードしてインストールする手間がかかりません。
Google Fontsには、日本語フォントも豊富に揃っています。
そのため、日本語のデザインでも、高品質なフォントを使用できます。
Figmaのデメリット
上記のようなメリットがある反面、デメリットもあります。
- 自動保存のため操作のヒストリーがない
- イラストが全て編集可能な状態で組み込まれる
- ガイド線が固定できない
- パーツごとの書き出しが面倒
- アートボードの高さを変えるとシェイプがついてきて崩れることがある
自動保存のため操作のヒストリーがない
Figmaは、自動保存機能により常に最新の状態が保存されます。そのため、一つずつの作業をさかのぼることができるPhotoshopのようなヒストリー機能はありません。
デザインを変更した際に元に戻したい場合は、手動で保存してバージョンを管理する必要があります。
そのため、デザインを変更する際には、必ず「この時の状態に後で戻すかもしれない」というタイミングで保存し、バージョンに名前をつけておくようにしましょう。
イラストが編集可能な状態で組み込まれる
Figmaでは、イラストを組み込む際に、イラストが全て編集可能な状態で組み込むことができます。色替えが必要になった時には非常に便利な機能です。
これは、Figmaの特徴的な機能の1つであり、Webデザインの柔軟性と拡張性を高めるのに役立つメリットとも言えますが、基本的にイラストを編集する必要がない場合はレイヤーが複雑化したり、データも重くなってしまいます。
ガイド線が固定できない
ガイド線は、デザインのレイアウトや配置を整えるために使用される機能です。
Figmaではそのガイド線を固定できないため、意図しないタイミングでガイド線がずれてしまった場合、デザイン全体が崩れる可能性があります。
そのため、Figmaでデザインを作成する際は細心の注意を払って作業する必要があります。
パーツごとの書き出しが面倒
Figmaでパーツを書き出すのは、Photoshopに比べて少し手間がかかります。
Photoshopでは、レイヤー名に名前を設定すれば、拡張子が違ってもまとめて書き出しすることが可能です。
一方、Figmaでは、エクスポートメニューから書き出すことができますが、書き出したいレイヤーをすべて選択しておく必要があります。
また、拡張子が違うレイヤーは一緒に書き出すことができないため、すべてをまとめて書き出すことはできません。
アートボードの高さを変えるとシェイプがついてきて崩れることがある
Figmaでアートボードの高さを変えると、シェイプがずれてしまうことがあります。
これは、シェイプの「制約」が「上下左右中央」になっているためです。
画像やテキストは「左上位置」になっており、シェイプの初期設定は「上下左右中央」になっていると考えられます。
シェイプがずれないようにするには、「制約」を「左上位置」に設定しましょう。
シェイプを配置した後は、アートボードの高さを変更する前に、シェイプがずれていないか確認するようにしましょう。
先に変更しておかないと、アートボードの高さを変更した際にずれていることに気づかずデザインが崩れてしまうことがあるので注意が必要です。
Figmaの基本的な使い方
上記でご紹介したメリットとデメリットを踏まえて、次はFigmaの基本的な使い方を説明いたします。
アカウントを作成する
Figmaを使用する際は、アカウント登録が必須になります。アカウントの登録方法を説明いたします。
1.Figmaの公式ホームページにアクセス
2.「サインアップ」を選択する
すると、下記のようなポップアップがでます。ここでGoogleアカウントでログイン、もしくはメールアドレスからアカウントを新規作成しましょう。
3.ログインする
ログインして下記のような画面になれば成功です。
日本語化する
1.登録した名前の箇所（左上）をクリックし「settings」をクリック
2.「language」をクリックして「日本語」を選択「save」をクリックすると日本語表示に変更されます
フレームを作成する
「＋デザインファイル」をクリックしてファイルを作成します。
ファイルが作成できたら、❶「井」フレームをクリック❷作成したいフレームサイズを選択❸フレームが作成される。
このフレーム内にデザインを作成していきます。
デザインを作成する
次に、フレームにそって実際にデザインを作成していきます。
Figmaの使い方は至ってシンプルで、左上のツールバーで図形や線、テキストなどを挿入し、右側にあるプロパティのパネルで見た目を変更していく、というものです。
左側にあるレイヤーパネルで、レイヤーの順番を調整することもできます。
出力と共有について
Figma上で作成したものは、出力して自身のパソコンの中に保存することができます。
出力方法
- 出力したいフレームを選択
- プロパティパネル下部にある「エクスポート」の＋で開く
- 出力したい画像形式を選択し、エクスポートをクリック
- 保存されます
Figma上で作成したものは簡単に共有できます。共有して閲覧することはもちろん、共同で編集することも可能となります。
共有方法
Figmaのアカウントを持っている人に共有する場合
- 水色のボタン「共有」をクリック
- 「閲覧のみ」「編集可」のどちらかの権限を選択します
- 共有したい相手のメールアドレスを入力して「招待」を押します
Figmaのアカウントを持っていない人と共有する場合
- 水色のボタン「共有」をクリック
- 「Copy Link」ボタンをクリックして、共有URLをコピーします。
- 共有URLをメールやチャットなどで相手に送信します。
コメントをつける
Figmaの共同編集では、ユーザー同士でコメントを付けて、意見やフィードバックを伝えることができます。
コメントするには、ツールバーの「コメント」ボタンをクリックし、コメントしたい箇所をクリックします。
コメントには、ユーザーのアイコンとコメント内容が表示され、コメントに対して返信することも可能です。コメントは、右側のコメント欄にスレッドとして残ります
おすすめプラグイン紹介
Figmaにはさまざまなプラグインがあります。その中で、便利なプラグインを5個紹介します。ぜひ参考にして活用してください。
Unsplash
Figmaでデザインをする際に、Unsplashプラグインを利用すると、Webサイトを切り替えずに画像を検索して挿入することができます。
Unsplashプラグインは、商用利用可能な画像を多数提供しているため、デザインに必要な画像を探す際に便利です。また、ダミー画像を挿入したい場合にも使用できます。
Remove BG
Figmaのプラグイン「Remove BG」は、画像の背景を自動で切り抜いてくれる機能です。Figmaの編集画面から、画像をドラッグ＆ドロップするだけで、背景が切り抜かれた画像を作成することができます。
Iconify
Figmaのプラグイン「Iconify」は、100以上のアイコンセット、10万個以上のアイコンをFigmaに挿入できるプラグインです。Material Design Icons、FontAwesome、Twitter Emojiなどの人気のアイコンセットを利用でき、デザインに必要なアイコンを簡単に見つけることができます。
Better Font Picker
Figmaのプラグイン「Better Font Picker」は、フォントの選択を簡単にするプラグインです。Figmaのデフォルトのフォント選択では、フォント名しか表示されないため、実際の文字の形を確認することができません。Better Font Pickerでは、フォントを適用した状態でプレビューを表示するため、フォントを選ぶ際に役立ちます。
LottieFiles
Figmaのプラグイン「LottieFiles」は、LottieアニメーションをFigmaに挿入できるプラグインです。Lottieは、Adobe After Effectsで作成したアニメーションを、Webサイトやアプリで表示できる軽量なアニメーションファイル形式です。
LottieFilesでは、Lottieアニメーションのライブラリを公開しており、Figmaの編集画面から、簡単にアニメーションを挿入することができます。また、Lottieアニメーションをカスタマイズすることも可能です。
他のデザインツールとの違い
Figmaは、UIデザインツールとして人気を集めていますが、他にも多くのツールが存在します。それぞれのツールには、特徴やメリット・デメリットが異なるため、比較検討した上で選択することが大切です。
AdobeXD
Adobe XDは、Adobe製のUIデザインツールです。Figmaと同様、基本的な機能は充実しており、操作性と汎用性の高さから根強い人気があります。また、機能制限がありますが無料でも利用できるため、気軽に始めることができます。
Adobe XDは、Figmaと同様にリアルタイムでの共同編集機能が備わっています。また、Adobe XDで作成したデータを、Adobe PhotoshopやAdobe Illustratorでそのまま編集することも可能です。さらに、Windows・Mac共に対応しており、UIデザインよりもプロトタイピングツールとしての機能が優れていると言われています。
Adobe Photoshop
Adobe Photoshopは、画像編集ソフトです。画像の編集や加工、テキストの追加や装飾など、幅広い機能を搭載しています。そのため、UIデザインやワイヤーフレーム構築にも活用できますが、本来の目的は画像編集です。
Adobe PhotoshopでWebデザインを行うことも可能ですが、編集データが増えるにつれてファイルサイズが大きくなるため、負荷がかかります。
一方、FigmaはUIデザインツールです。画像の編集や加工機能は搭載されていないため、Adobe Photoshopのような高度な画像編集はできません。しかし、ヒストリー機能が搭載されていないため、編集画面は常に軽く保つことができます。
Adobe Illustrator
Adobe Illustratorは、ベクターイメージを編集・加工できるソフトウェアです。DTP業界や印刷業界で広く利用されており、ロゴやイラスト、図面などの制作に用いられます。
Adobe Illustratorは、UIデザインやワイヤーフレーム構築にも活用できますが、Figmaなどの専用ツールと比べると、操作が複雑で習得に時間がかかります。また、UIデザインやワイヤーフレーム構築に必要な機能がすべて搭載されているわけではありません。
そのため、UIデザインやワイヤーフレーム構築に特化したFigmaを使用する方が、効率的に作業を進めることができます。
まとめ
以上、Figmaについてお伝えしました。今回の紹介記事ではFigma導入から簡単な操作方法の説明、おすすめのプラグインや他のデザインツールとの違いなど解説しましたが、これらは全て導入にすぎません。実際に触ってみて理解を深めていくのが一番です。
Webデザイン制作を効率化したい方、デザインに詳しくない方にもおすすめのUIデザインツール「Figma」をぜひお試しください。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
