Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。
ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。
この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。
- 1. Figmaを使う前準備
- 2. Figmaの基本的な使い方について
- 3. 背景デザインの作成
- 4. グリッドレイアウトの追加
- 5. 基本ツールでロゴの作成
- 6. ナビメニューの作成
- 7. ヒーローセクションの作成
- 8. 3カラムレイアウトの作成
- 9. プロトタイプ機能の使い方
- 10. Figmaの使い方はアップデート継続中
Figmaを使う前準備
今回作成したデザインがこちら。Figmaのさまざまな機能をできるだけ利用しながらデザインしていきます。Figmaって何?というひとは、こちらの記事を参考にどうぞ。
Figmaの基本的な使い方について
まずはFigma公式サイトに進み、利用アカウントを作成しましょう。無料登録できます、右上の「Sign Up」をクリック。
メールアドレスを入力、またはGoogleアカウントでサインアップ完了。有料プランもありますが、個人で作業するぶんには無料でも十分使えます。
ログインした状態がこちら。作成中のプロジェクトが一覧で並んでいます。
はじめてのFigma、画面上部にある「New Design File」より、新規デザインを作成しましょう。
ツールバーのFigmaアイコンより、「ファイル」>「新規作成」でも新しいデザインをはじめることができます。
新規ファイルを開いた状態がこちら。
カンバスのみが表示され、どうはじめていいのか分かりづらいですが、Figmaの画面構成を詳しく理解するために、デザインを追加できるフレームの作成から開始します。
上部に表示されたツールバーより、フレーム（F）を選択すると、右側にプロパティパネルと呼ばれるタブに、スマホやタブレット、デスクトップなどさまざまな画面サイズが表示されています。
ここでは、デスクトップ向けウェブサイトをデモとして制作するので、「デスクトップ」を指定。
すると左側のパネルに「Desktop」というフレームが作成されました。
画面上部には、ツールバーが用意されています。デザインをはじめるときは、まずはここから。
各ツールの横に表示された下矢印をクリックすると、隠れていた他のツールが表示されます。ショートカットキーでの操作を覚えると、よりストレスなく作業できますよ。
さらにツールバーの右側には、作成したデザインをオンラインで共有し、閲覧またはリアルタイムでの共同編集も可能なURLリンクも発行できる機能も。（後ほど詳しく。）
背景デザインの作成
まずは、カンバスにデザインを追加してみましょう。
デザインの基本となる「長方形」ツールで四角を描いてみます。Shiftを押しながらドラッグすると、正方形を描くことができます。
さらにプロパティパネルの「塗り」より色を追加、変更できます。
右側のプロパティパネルは、デザインの役割ごと３つのタブに分けられています。また、選択しているツールによっても表示される項目が変化します。
長方形ツールは、単色で塗りつぶすだけでなく、画像を背景に利用することも可能。
ここでは、デスクトップ全面のフルスクリーン画像をデザインしてみましょう。ツールボックスより「長方形ツールR」を選択したら、フレーム全体を覆うようにセレクト。
画像は、手軽に素材を追加できるプラグインを使います。
そのまま右クリックで「プラグイン」>「プラグインを探す」に進み、Unsplashを追加。
自分の好みに応じてFigmaプラグインをインスールすることで、より自分にあった機能を追加できるのも、Figmaが人気の理由のひとつ。
Communityでは、プラグインの他に制作の時短アイテムやUIコンポーネントなど、さまざまな素材をダウンロードできます。
インストールしたプラグインを開き、今回のデザインのテーマとなる「Tropical Jungle（熱帯ジャングル）」を入力し、表示された写真からお好みの一枚をクリック。たったこれだけで、長方形を画像で塗りつぶすことができます。
ウェブサイト全体をデザインするので、フレームをドラッグしてカンバスの広さを調整しておきましょう。
フレームを選択した状態で、プロパティパネルより「塗り」をクリック。カラーピッカーをつかって画像から色を抽出、フレームの背景カラーとしました。
Figmaでは、背景のカンバス色もプロジェクトに合わせて手軽に変更できます。なにも選択していない状態で、カンバスをクリック。
再度プロパティパネルより、背景色を変更すれば完了です。ここでは、やや濃いみどり色に設定しました。
グリッドレイアウトの追加
「プロパティ」パネルではこの他にも、便利なさまざまなツールがあり、Webデザイン制作に欠かせない「グリッドレイアウト」もラクラク追加できます。
「レイアウトグリッド」の＋アイコンをクリックし、「列: 12 色: #ffffff 透明度: 5%」、「マージン幅: 120px」、「ガター溝: 20px」とします。お好みで色や透明度は調整してください。これでウェブデザインの基本的な12カラムグリッドに。
グリッドレイアウトは、Shift+Option/Alt+4で表示・非表示を切り替えできます。
Command/Ctrl + Rで、ものさし機能を表示・非表示にも。
ここでは、グリッドの始点と終点に分かりやすく、ものさしを引いています。
フロントエンドデベロッパーにとっても、レイアウトを把握しやすくなり便利です。デザインの基本原則を押さえておくことで、より柔軟なレイアウトが可能になります。
基本ツールでロゴを作成しよう
お手持ちのロゴや無料ダウンロードできるダミーロゴでも構いませんが、Figmaの使い方ガイドということで、ここでは描画の基本となるシェイプツールとマスク機能をつかった、シンプルなロゴを作成してみましょう。
まずは、お好みの文字テキストを入力します。ここでは、「書体: Quicksand」をつかい、トロピカルな南の島を連想させる Tropicania としました。
右側のプロパティパネルより、フォントやサイズなど文字テキストの変更、設定を行うことができます。
簡単なロゴの完成イメージとしては、南国を連想させる波のようなデザイン。できるだけFigmaの各ツールを実際に利用し、Fimgaに慣れていきます。
まずは、「楕円形ツールO」を選択し、Shift+Option/Altを押しながらドラッグすることで、クリックした点を中心に円を描くことができます。
次に「ペンツールP」をえらび、Shiftを押しながら中心でクリックすると、45度を保ったカーブ曲線を描くことができる有効テクニック。
右に向かってもう一度Shiftを押しながらドラッグすれば、波のようなウェーブ型に仕上がります。
あとは、パスがつながるようにざっくり切り抜いてもらって構いません。
ここポイント。左側のレイヤーパネルで、ペンツールで描いたベクター図形を円形レイヤーの下に配置。ツールバー中央にある、「マスクを作成」ボタンをクリックすることで、2つのレイヤーが重なった部分のみが表示、他はマスクされ非表示の状態に。
もちろんここでも、右側のプロパティパネルよりベクター図形の塗りや線、エフェクトなどの追加、設定を行うことができます。
コンポーネントの作成
Shiftを押しながら、ロゴと文字レイヤーを同時に選択したら、ツールバーより「コンポーネントを作成」をクリック。
むらさき色のボーダー線で囲まれていれば、はじめてのコンポーネントの完成です。
普段からよく利用する機能のひとつのため、ショートカットOption/Alt+Command/Ctrl+Kは覚えておきたいところ。
ロゴやナビメニュー、フッター、ヘッダー、ボタンなど、複数ページで何度も利用する要素は、コンポーネント可しておくのがベター。
後から色などを変更したいときも、元となるマスターコンポーネントを変更すれば、コンポーネントのコピー、別名「インスタンス」を一括でまとめて自動変換できるのが特長。
たとえば、20ページ以上あるウェブサイトのロゴの色を変えたいというときこそ、コンポーネントが威力を発揮します。
コンポーネントの追加は、マスターコンポーネントをコピー（Command/Ctrl+DまたはOption/Altを押しながらドラッグ）または、左パネルの「アセット」タブより直接カンバスにドラッグしてもOK。
マスターコンポーネントの色を変更すると、すべてのインスタンスも自動で変更できます。
インスタンスは、カラーやテキスト、画像、サイズなどを上書きでき、マスターコンポーネントに影響されず、デザインの変更や調整ができるのも嬉しいポイントです。
ナビメニューの作成
次にナビゲーションメニューを作成していきます。
文字テキストTで「ホーム」と入力し、移動ツールVで配置を動かしみると、整列しやすいサポートガイドの役割をもつ赤ラインが表示されます、うまく活用したい便利機能。
文字テキストの階層を考えて、ロゴより若干小さめの太字の文字サイズをチョイス。
文字レイヤーをコピーしたら、等間隔に並べていきます。動かすたびに間などを細かく赤字で表示、Figmaの便利サポート機能。
ここでもテキストの階層を考え、選択されていないメニューは細字にし、わずかな変化をもたせます。では、ナビメニューをホバーしているときはどうでしょう。
このように、ひとつの要素のさまざまな状態をまとめて管理、変更できるのがコンポーネント Variantsです。
コンポーネント Variantsの作成
まずは基本となる通常時のナビメニューをコンポーネント化します。
右プロパティパネルに、Variantsという項目が表示されるので、+アイコンで追加。すると、むらさき色のドットラインで囲まれ、要素も２つに増えています。
ここではメニューの状態に応じて、選択中はテキストを太字に、通常時は細字に。
Variantsパネル右上のアイコンをクリックし、「新規プロパティを作成（Add New Property）」を選択し、プロパティ名を「太字」とし、それぞれの状態を「TrueまたはFalse」で設定。
これで太字の切り替えをトグルボタンで行うことができるようになりました。
さらにナビメニューのホバー時など、異なる状態を追加することも可能です。
ここでは新規プロパティ「ホバー」を作成し、こちらも「TrueまたはFalse」で条件を分けてみます。
作成したコンポーネントVariantsを利用するときは、左側「アセット」タブよりドラッグで配置できます。
また、右プロパティパネルでは、太字とホバー状態をトグルでOn/Offできるようになっていますね。
オートレイアウトについて
続けてナビメニュー用リンクを選び、プロパティパネルより「オートレイアウト」をクリック。
オートレイアウトは、選択したコンテンツに応じて自動で余白スペースや配置を調整してくれる、レイアウトの調整に欠かせない便利ツールです。
縦や横にクリックひとつで並べたり、余白スペースもスライドを使って自由に調整できます。
また、他の要素を追加すると、自動で他の要素との配置を調整。オートレイアウト内での移動もラクラクです。
スタイルの作成
ナビメニューの右側には、他よりも目立たせたいコンテンツ、CTA（コール・トゥ・アクション）を追加します。
他のメニューリンクに比べ、少しだけ文字サイズを大きくし、明るいみどり色をアクセントカラーとします。
同時に、カラースタイルとして保存しておけば、サイト全体で同じ色を使うことができ、色の変更もカラースタイルのみ行えば、サイト全体に自動で適用されるメリットも。
配色えらびに悩んだときは、美しい色を自動で提案してくれる配色ツールをぜひ活用してみましょう。
スタイルはこの他にも、テキスト設定やエフェクトなどでも活用できます。
プロパティパネル上で、４つのドットがついたアイコンを探してみてください。どれもスタイルとして保存しておくことが可能です。
ここでは、フォントサイズや文字の太さなどを調整した「テキストスタイル」を保存しておきます。
CTAコンテンツをより目立たせるために、矢印を追加します。
ツールバーより「矢印」ツールShift+Lで、お好みの長さの矢印を描いてみましょう。
矢印の太さや配色の変更、エフェクトの追加はプロパティパネルよりどうぞ。
ここでは、前ステップで作成したカラースタイル「メインカラー」を利用することで、瞬時に配色を決めることができました。
完成したナビメニューをまとめてコンポーネント化しておきます。
作成したコンポーネントは、プロジェクトが大きくになるにつれて、どこにあるのか場所がわからなくなることがよくあります。あらかじめコンポーネント専用ページを作成しておくと良いでしょう。
作成したナビメニュー用コンポーネントを配置した様子。こまかい要素の整列はプロパティパネルより行うと、より手早く配置できます。
ヒーローセクションの作成
ウェブサイトを開いたときにまず表示される、ヒーローセクションをデザインしていきます。
もっとも目立たせたいキャッチーワードやスローガンを、72ptの大きなサイズで入力。
他のテキスト要素とのコントラストがはっきりし、文字と画像をうまく組み合わせることができました。
デザインに合わせて、画像の位置やサイズを調整したいときは、プロパティパネルより「塗り」>「画像」をクリックしたら、モード「切り抜き」に。
あとはマウスで自由に位置を変更し、画像が見えている範囲も少しだけ小さく変更。
グラスモーフィズム、ぼかしスタイルの作成
すりガラスを通して覗いたようなぼかしが特長の「グラスモーフィズム」エフェクト。
近年人気のデザイントレンドのひとつで、Figmaを使えば、この人気スタイルも簡単に表現できます。
長方形ツールRで適当な大きさにシェイプを描いたら、プロパティパネルより「塗り」の「不透明度: 40%」に下げ、半透明に。
さらに「エフェクト」を追加し、「背景のぼかし」を選択。アイコンをクリックすると、ぼかし具合をスライダーで調整できます。
長方形シェイプの角に表示される○を内側にドラッグすることで、丸みのあるデザインに仕上げることができます。
作成したグラスモーフィズム・パネルに、架空のツアー内容を表示していきます。
このときも、各ツアー情報ごとにコンポーネント化しておくことで、レイアウトを崩さずにコンテンツの上書きを行うことができます。
ここまでに利用したツールで、サイトに切り返しをつけ、同系色でまとめたモノトーンデザインに。
サイト内でもっとも目立たせたい要素「ツアー予約」CTAボタンを、矢印つきで画面中央に配置しました。
よりデザイン性を高める巨大文字を、不透明度を下げ、背景に透過するように配置します。
ここでのポイントは、テキストレイヤーの「塗り」の「不透明度」を思いっきり下げ、あくまでもデザイン装飾として利用しています。
3カラムレイアウトの作成
デモコンテンツとして、3カラムのカード型レイアウトを作成します。
グリッドレイアウトを参考に、長方形ツールRでお好みの図形サイズを描いたら、画像便利プラグイン Unsplash で目的の画像を検索。
ここでは’Hawaii Green’で検索。気に入った写真が見つかったらクリックするだけ。
つづけてツアー名と説明も追加していきます。
ここでは、画像とテキストをまとめてコンポーネント化。コピーしたインスタンスを横に展開し、写真と文字を変更して完成です。
オートレイアウト機能を活用すれば、グリッドレイアウトを意識したコンテンツ幅の調整が可能となります。
プロトタイプ機能の使い方
ここからは、ボタンやナビメニューのクリック、ページ遷移などを行うプロトタイプを、作成したデザインを元に追加していきます。
まずは、ヒーローセクションのツアー情報にホバーエフェクトを追加してみましょう。ホバーしたときに、左側から白いライン線が表示されるのを想定中。
ツアー情報をまとめたコンポーネントを選択し、Variantsを作成。長方形ツールで白ラインシェイプを作成したら、左側にずらしてレイヤーの「パススルー」を「0%」とし、非表示にします。
プロパティパネルを「プロトタイプ」タブに切り替え、通常時からホバー時に向かって矢印を追加。
このときにインタラクションの詳細は、マウスが重なっている状態「オーバー中」をえらび、「アニメーション」には「スマートアニメート」を選択。
同じ手順で、画面中央のCTAボタンもプロトタイプを追加してみました。マウスをホバーすることで、背景色が白色になり、文字と矢印が白から黒へ変化するようにしています。
ツールバー右側にある、青色の再生ボタンをクリックすると、プロトタイプを実際に確認できます。
別ウィンドウが開き、なめらかな動きが心地よいプロトタイプを短時間で作成することができました。
Lottie Animationの追加
さらにプロトタイプを使いこなすために、いくつかの機能も試してみます。
CTAボタンをクリックしたら表示される、ローディングアニメーション付のコンテンツボックスの作成です。
最終的にページ遷移アニメーションを再現するため、フレームツールFで適当なサイズの長方形を描いたら、右クリックで「プラグイン」>あらかじめダンロードしておいた「LottieFiles」を選択。
「Loading」で検索し、使いたいアニメーションを見つけたら「Convert to GIF」をクリック。
これでLottieアニメーションをGIFに自動変換し、Figmaに追加することができます。ファイルサイズによって変換時間は異なるので、気長に待ちましょう。
このときに、アニメーションを追加する長方形ツールの色に合わせて、Backgrond Colorの項目も変更しておくと統一感が出ますよ。
GIFアニメーションへの変換が完了したら、Add to Figmaというボタンが表示されるのでクリック。
これで無事にLottieアニメーションをFigmaで活用することができました。
ウェブサイトでの軽量なアニメーション表示という選択肢として人気の高いLottieアニメーションを、制作でシームレスに活用できるようになりました。
プロパティパネルより「プロトタイプ」タブに切り替え、CTAボタンから作成したアニメーション付ボックスを、矢印で結びましょう。
インタラクションの詳細は。「オーバーレイ」とするのを忘れずに。また、「外部クリック時に閉じる」とし、アニメーションには美しい動きの「スマートアニメート」、下から出現するような「ムーブアップ」スタイルに。
プロトタイプのできあがりはこちら。
平面的なプロトタイプではなく、リンクやボタンなどの動きなどを実際に取り入れることで、直感的でわかりやすいデザインとなります。
ただしこのままでは、ローディングアニメーションが回りっぱなしなので、フレームを複製コピーし、 適当なコンテンツを追加しました。
「プロトタイプ」タブに切り替え、２つのフレームを矢印でつなぎます。
ローディングアニメーションの後にコンテンツを表示したいので、インタラクションの詳細は「遅延」、「1500ms」。これで「1.5秒遅れてコンテンツが表示」されるように。
なめらかな動きに重要な「スマートアニメート」は、独自にカスタマイズも可能です。ここでは、少しだけ飛び跳ねたようなエフェクトを表現しています。
さらにナビメニューのリンクをクリックし、実際に他のページに移動してもよいでしょう。
ベースとなる「ホーム」フレームをコピーし、「お問合わせ」に変更。Figmaの良い点は、手軽なデザイン変更も挙げられます。
ホーム画面のナビメニューより「お問合わせ」ページに、「プロトタイプ」タブで矢印をつなぎます。
インタラクションの詳細を設定することで、画面遷移はもちろん、マウスクリックやホバーなど、あらゆる状態を表現できるのもプロトタイプ機能の魅力と言えるでしょう。
最後に「お問合わせ」ページのメニューリンク「ホーム」より、フレーム「ホーム」に矢印をつなげるのもお忘れなく。どちらのページからでも移動できるようになります。
完成したプロトタイプがこちら。
設定したすべての要素に、見事なアニメーションエフェクトやコンテンツ移動などが追加されています。
Figmaの使い方はアップデート継続中
いかがでしたでしょう。最後は駆け足での各機能の紹介となってしまいましたが、Figmaの基本的な使い方をまとめた完全ガイドを紹介しました。
まだまだ紹介が不十分な部分も多いため、機能の追加などアップデートを継続していきます。
また他の現役デザイナーが実践中のFigma活用術も参考にしてみると良いでしょう。
「早く知っておけば」と思ってしまう、目からウロコなFigmaの小技テクニックも活用してみましょう。
プラグインを活用して自分仕様のFigmaにしたり、無料のUIテンプレートを活用すれば、より快適な作業につながりますよ。
では、ハッピーなFigmaライフをたのしんで。
