『作って学ぶFigma入門』の紹介記事です。
2025年発売の書籍です。

この本の内容を実践したレポートも付属しています。
ゲームのプレイ日記のように、軽い気持ちで読み進めてもらえると嬉しいです。

◎どんな本？

Figmaの基本動作を、実践形式で身に付けられる本です。
実際に作り上げていくスタイルなのでとても楽しく学べます。
DLのサンプルデータも付属しているので、自分で素材を用意する事なく学ぶ事が出来ます。

ただ「こうしてください」を繰り返すだけでなく、理屈もちゃんと教えてくれます。
そのため、この本の知識を応用しやすいです。
スクリーンショットも多数使われており、とても見やすいです。

最低限の理屈を分かりやすく簡潔に教えてくれて、実際に手を動かして作る楽しさも体験出来る良書です。
まさに理性と感性のバランスが非常に良いとも言えます。
Figmaを全く知らない人の1冊目として、全力でオススメ出来る書籍。

ショートカットも多々使いますが都度解説してくれるので、本に従っているだけで自然と覚えられる仕組みです。
いちいち「このショートカットは何だっけ？」と調べ直す必要が無いです。かゆいところに手が届く親切さ。

最新版とUIのデザインが少し違う部分もありますが、特に躓く要素は無かったと思います。

◎何が出来るようになる？

こんな感じのWebサイトのデザインが作れます。

私はこの本の知識を応用して、「凡シュール」サイトのデザインを考えました。

◎Figmaとは？

Figmaについても簡単に解説します。

Webデザインをはじめ、ゲームのUI/UXやプレゼン資料など、様々なデザインのアイデアを考えるのに役立つツールです。
いわばラフ→下書きに変えてくれる存在。

サイトの導線なども考える事が出来ます。
非常に便利。操作も直感的。

ちょっと触るくらいなら無料で出来ます。
作ったデザインをHTML・CSS形式にするにはまた別の技術が必要です。
この本では、そこまでは踏み込んで書かれていません。

今現在Webデザイナーやプログラマーが仕事用で使うツール、という印象が強いFigmaですが、個人的にはちょっと遊びで触るのにも非常に楽しめるツールだと思います。
無料だし。
PCがあれば誰でも出来るのも魅力。

デジタル積み木のような感覚です。
マインクラフトで建築物を作るのが好きな人とかは結構ハマりそうだなと思います。
架空のサイトを考えてデザインしてみたりしても面白いかもしれませんね。
デザイン沼へようこそ。

デザインを細かく作ってからコーディングも勉強→自作サイトを作るもいいですし、コーディング部分を依頼してしまってもいいのかもしれませんね。

Figmaはノーコードでサイト制作するStudioというツールとも密接に連携しています。

そのためFigmaで気軽にサイトデザインを作ってみて、Studioで実際のサイトにしていくなんて事も出来ます。
軽い気持ちで遊びとしてやっても楽しめますし、思わぬ副業に繋がる可能性もあります。

◎実践レポート

本の流れを追いつつ、私が実際にどのように取り組んだかのレポートです。
具体的にどうやったら出来るか？についてまで書いてしまうと本の価値を毀損する事になってしまいます。
そのため、あくまでも「こうするためのやり方が載っている」「私はこうやった」という記述に終始しています。

実際どうやるか知りたい方は、ぜひ本を購入して読んでみてください。

◎LESSON1　Figmaの概要とレッスンの準備

Figmaの準備とアカウント登録方法。
アカウント登録してブラウザで動かすFigmaですが、デスクトップアプリも存在します。
そのダウンロード方法が細かく書かれています。
きちんとWin/Mac両対応の説明で丁寧。

◎LESSON2　スマートフォンのWebデザイン

ここから早速実践です。
初期画面の配置などの解説に始まり、iPhoneサイズのフレーム作成、レイアウトグリッドやガイドラインの作成などを具体的に教えてくれます。
画像の拡大縮小表示のショートカットも丁寧に記載されています。

ヘッダー部分作成セクションでは、画像とテキストの基本操作についても触れています。
画像配置で出てくる画像データは全てサンプルファイルに入っています。
自分で用意する必要が無いのは嬉しいですね。ありがたい。

新規ファイル作成の項目について補足しておきます。
本では「下書き」と「プロジェクト」で選択する必要があると書かれていますが、最新版ではUIが少し変わったようで、新規ファイルはデフォルトで下書きになるようになっています。
そのため特に選択する必要はないみたいです。

レイアウトグリッドを設定した状態です。
画像の4本の水色の線がそれです。
オブジェクトを設置する時の目印になります。
いわばガイド線ですね。

Figma、クラウドで自動保存されるのはとても便利だなと思いました。
万が一クラッシュしても「保存してなかったからデータ吹き飛んだ！」みたいな事態にならなくて済むのは助かります。

いよいよ画像配置です。
「01　画像の配置」内にあるドラッグでサイズを変える部分で少し手間取りました。
本に書いてある方法ではなく、右のレイアウトパネルから直接数値を入れて調節しました。

トップページの画像が配置出来ました。

先に置いていた長方形の中に画像を配置する方法です。
画像の配置のショートカットを使ったところ、私のPCではNotionのショートカットが優先されてしまうようなので、ショートカットなしでやりました。

テキストの入力ですが、文字入れの操作感はPhotoshopやイラストソフトと変わりません。
直感的で分かりやすいです。
サイト名が出来ました。ちょっとだけそれっぽくなってきましたね。

トップの画像内のテキストを作成。
一気に雰囲気が出てきました。

自転車の商品説明欄っぽくなってきました。
操作方法の説明も分かりやすいし、こうやってそれっぽい物が出来ていくのはテンション上がりますね。

ヘッダーアイコンを作るという細かい作業なのでガイドオン。
この機能使ってトップページでドット絵みたいな事も出来るんじゃないか？と思ったりもしました。
実際のサイトでも反映出来るかは難しいですが、やってみる価値はありそうです。

ハンバーガーメニュー作成。
確かにハンバーガーに見えなくもないなって思う。

ここで「フレーム化」という概念も登場しますが、いわゆるPhotoshopなどの「レイヤーフォルダ」のような位置付けでしょうか。

サイト名の横に表示するアイコン作成。
自転車サイトなので自転車のアイコンです。

ちょっとずつ自転車の形を作っていきます。
単純な図形の組み合わせでやっていくので、絵心が無い人でも安心です。
少し細かい作業ですが、段階を追って丁寧に説明してくれているので、本の通りにやっていれば出来るはずです。

アイコンなど、複数の要素を組み合わせてオブジェクトを作ったら即フレーム化。
これが鉄則な気がします。
そしてフレーム化したら即名前をつける。
じゃないとわけわかんない事になりそうです。
デジタルイラストとかでもレイヤー名がぐちゃぐちゃになる、あるあるですよね。

プラグインを使った虫眼鏡アイコン作成。
Iconifyプラグインの使い方も丁寧に解説してくれています。
本の指示に従ってたら出来ました。検索アイコン。

◎LESSON3　スクロールするスマートフォン画面

オートレイアウトを使ったトップページ作りの工程です。
このオートレイアウト機能、Figmaの真骨頂とも言えるものです。

結構ややこしいんですが、オートレイアウトの段階できちんと設定しておくと、後々サイト実装する時に意図しないレイアウト崩れが起きる可能性が減ります。
レイアウト崩れはWebデザインにおける最難関ですからね…。

コンポーネントという概念についても詳しく解説されています。
これもオートレイアウトと並んで、Figmaにおいてとても大事で便利な機能ですね。

とはいえ、私も最初はよく分からないながら指示に従ってやっていました。
最初は難しく考えずに本の指示に従っていればいい感じに出来ます。

オートレイアウトとコンポーネント機能を駆使してページを作った後は、iOS用の既存コンポーネントを導入し、ページ遷移の設定をします。

ヘッダー部分が出来ると一気にサイトっぽくなります。
テンション上がる。

ボタン作成。

ここでもオートレイアウト機能を使います。
とはいえ指示に従っていれば躓く事は無いはず。

オートレイアウト機能を駆使してカード型デザインを作っていきます。
ここも本の指示に従っていれば難なく出来るはずです。
商品画像のカード型デザインが出来ました。テンション上がります。

カードにドロップシャドウをつけて、よりデザイン性が高くなりました。

前のレッスンで作ったヘッダーをコンポーネント化していきます。
これによって使い回し出来るようになる。超便利です。

カード型デザインもコンポーネント化していきます。
コンポーネントからのインスタンス作成で楽々。

各インスタンスに画像とテキストデータを流し込み、一気に商品一覧っぽくなりました。
カードのデザインを変更したい場合は、コンポーネントのデザインを変えれば、4つのインスタンス全てのデザインが変わります。
便利！楽しい！

複数のレイヤー名の一括変更方法みたいな、細かい操作も丁寧に教えてくれてます。

iOSコンポーネントを利用して、iPhoneのステータスバーを設置していきます。
既存アセットから引っ張ってくる方法を詳細に解説してくれているので、難なく出来ました。

次はホームインジケータ配置。iPhoneの下画面のあれです。

プレビュー再生しました。
この時点でめちゃくちゃ楽しいです。
実機で動かすとどういう感じになるのか分かりやすい。
ありがたいし楽しい機能ですね。

◎LESSON4　ページ遷移するカード型ページ

特定の場所をタップしたらページ移動するよう設定する方法です。
これによってますますWebサイトっぽくなります。

まずはそのために今まで設定したテキスト設定、エフェクト、グリッドなどをスタイルに登録していきます。
スタイル登録する事によって即呼び出し可能になるので、これまた便利機能です。
ここも本の指示に従っていれば特に躓く事なく進められました。

次にカラーのバリアブルを作っていきます。
これはイラストソフトで言うカラーセットのようなものです。
つまり、これまた便利機能です。

こういった便利機能がたくさん備わっているのがFigmaのいいところですね。
その機能を分かりやすく説明してくれるこの本も、とてもいい本です。

スタイルとバリアブルを設定したら、次はページ遷移の設定をしていきます。
本では「Sports Bike」という新しいページを作り、既存のページと紐づけていく具体的な方法を紹介しています。

バリアブルの画面はこんな感じ。直感的で見やすいです。

バリアブルの中の色の数値を変更すると、そのバリアブルが使われているオブジェクトの色が一括で変更されます。
コンポーネントの考え方に近いです。めちゃくちゃ便利。

「Sports Bike」ページです。
プラグインを使ってフリー画像のサムネイルを設置する方法で設定していきます。

「Sports Bike」ページ用のカード型デザイン作成。

さっき設定したスタイルを適用した状態です。
一発でスタイルを適用出来るのでとても楽ですね。時短になる。

「Bike Info」を作っている様子。
Webデザインの難関、グリッドデザインもオートレイアウトで楽々設定出来るのはありがたいです。

商品ページを作りました。
はみ出た画像を枠内に合わせる時は、カスタムパネルで「自動調整」を選ぶとちゃんと合うはずです。
本の記述とUIが変わってた部分なので補足です。

マウスホバー時に色を変えるため、ボタンをコンポーネント化しました。

ページ遷移のインタラクション設定です。
「このオブジェクトをクリックしたらこのページに飛ぶ」という設定ですね。
どことどこが繋がっているか、直感的に分かりやすくなっています。

動作確認したところ。
私がやった時は、最初サイトアイコン（自転車アイコン）をクリックしても反応しなかったです。
よく見たらサイト名全体のフレームではなく、サイト名のテキストの部分でインタラクション設定していました。

そういう凡ミスには気を付けたいところ。

カードをクリックしたら新しいウィンドウでオーバーレイ表示されるよう設定します。

テキストも追加しました。

閉じるボタンをつけました。
ちゃんとクリックしたらオーバーレイが閉じる設定もする。

プレビュー再生した状態です。
ちゃんとオーバーレイで表示され、閉じるボタンも機能しました。

◎LESSON5　ハンバーガーメニューとカルーセル

ハンバーガーメニューをクリックするとオーバーレイでメニューが出てくる設定をします。
次にトップ画像が切り替わるカルーセルの作成をします。

まずメニューの画面を作っていきます。シンプルなものです。

インタラクション設定したところ。
ちゃんとプレビュー画面でメニューが表示されました。

カルーセル作成。
本の指示に従いながら、スライドショー形式になるよう設定します。

プレビューで確認。ちゃんとスライドショー形式になりました。

カルーセルの下のインジケータを作っていきます。

次に時間ごとで切り替わるようインタラクション設定。
本ではアニメーションの部分を「リニア」にすると書かれていましたが、実際のFigmaでは「線形」という名称に変わっていました。

プレビューで確認。
ちゃんとトップ画像の下にインジケータが表示されています。

◎LESSON6　レスポンシブなWebデザイン

これまでスマホ画面でページを作ってきましたが、デスクトップ対応の画面を作っていきます。
レスポンシブデザインは結構ややこしいですが、この本の流れに沿えば特に難所はなく進められました。

まずデスクトップ用画面を新しく作っていきます。

デスクトップサイズでグリッドデザインになるようにします。
オートレイアウト機能を駆使。

本の指示に従っていたら拍子抜けするくらいあっさり出来ました。

デスクトップはハンバーガーメニューでメニュー画面を呼び出すのではなく、ナビゲーションメニューとして直接表示する形になります。
そのためデスクトップでのみハンバーガーメニューを削除する事になるのですが…。
なんかプロパティでめちゃくちゃ簡単に出来ました。Figmaすげえ。

デスクトップ用のナビゲーションメニュー作りです。
画像の場面でナビゲーションメニューのフレームをヘッダーのコンポーネントにきちんと含まれるようにドラッグします。

私が最初にやった時はここが上手く出来ておらず、後の工程でバリアブル作成が出てこなくなって少しだけ詰まりました。
上手くいかないと思ったらレイヤー構成を確認してみて下さい。

本に従って設定した結果、モバイル版でヘッダーのナビゲーションメニュー非表示、デスクトップ版でナビゲーションメニュー表示になりました。

◎LESSON7　インタラクティブなUIパーツ

検索ウィンドウの設定です。

少し難しいけど「全然無理！」という感じでもないです。

検索窓のパラパラアニメーション設定です。

プレビューするとちゃんとアニメーションになってます。

次は検索窓用のチェックボックス設定です。

ちゃんと検索窓っぽくなりました。

あとは閉じる動作するための設定です。

無事設定出来ました。検索窓の完成。
本のレッスン内容は以上になります。

◎最後に

ひととおりやった感想です。
冒頭の感想の繰り返しになりますが、特に大きく詰まる事もなく見やすく丁寧な説明でとてもいい本でした。

実際に手を動かしながら楽しく学ぶ事が出来ました。
Figmaの素晴らしさも堪能出来ました。

Figmaを軽く触ってみたい人でも楽しく学べる本なので、是非読んで実践してみてほしいです。