2022年にAdobeがFigma（フィグマ）を買収、その後Adobeの実質的な競合アプリであるXDは単体アプリでの提供を終了した。その前には、統合開発環境であるAWS Amplify StudioがFigmaを正式にサポートすることにより、開発者はデザイン・フォーマットとしてFigmaを採用するようになった。現在プロトタイプツールとしては、Figmaがほぼ独占状態になったと言ってもいいだろう。実際Figma、sketch、Adobe XDなどの代表的なプロトタイプツール・アプリの使用率を見ると2022年にFigmaは9割近くを占めている。
https://uxtools.co/survey/2022/ui-design/#ui-design-yoy-graph
私がプロトタイプ・ツールというものを使いはじめた時は、ほぼsketchの独占状態だったが、私の制作環境とデザインの依頼を受けるアプリ開発会社の環境がほぼWindowsだったので、当時はPhotoshopまたはIllustratorで制作していた。sketchはMac専用なのと、FigmaやAdobe XDと異なり有料であったのが凋落の原因だと思っている。その後、チームを組まず一人でデザイン制作を行う範囲であれば無料で利用することができる、FigmaとAdobe XDを使い初めた。当然Windows版であるが、両アプリとも使用感に大きな違いはない。どちらを選ぶかはデザインの依頼者や納品形態次第だが、今後はFigmaの指定が増えるだろう。FigmaとAdobe XDどちらを導入すればよいか、また学習すれば良いか迷っているのであれば、使用率からFigmaの方が無難であると言える。
そんな訳でプロトタイプ・ツールとしてはもちろん、プロトタイプを必要としないWEBデザインや非デザイナーの人達にも、デザイン制作以外の分野で使用されるようになったFigma。普段PhotoshopやIllustratorなどのグラフィック・アプリを使用しているデザイナーにとって、Figmaの導入はそれほど難しくない。図形やテキストの扱い方はほぼ同じだからだ。
しかし図形を描いてテキストを入力するだけであれば簡単なのだが、誰もがつまずくのがプロトタイプツール・アプリ独特のコンポーネント、バリアント、オートレイアウト機能だろう。これらの機能を使わなくてもアプリのデザインはできるので必須のスキルというわけでもない。ただスマートフォン・アプリやWEBデザインを行う際には、同じ形のボタンで色違い、テキスト違い、カーソルを置いた場合（hover）や利用不可（disabled）のボタン色の違いなど多数のバリエーションを制作する必要がある。これらを効率的に制作する機能がコンポーネントやバリアント機能である。またWEBやスマートフォン・アプリでは1つのデザインでさまざまな画面サイズのデバイスに対応する必要があり、サイズを変更するたびに、コンテンツの整列のやり直しや、特定コンテンツの位置を固定しなければならない。これらに対応するのがオートレイアウトである。要するにこれらの機能を使えなくてもデザインはできるが、大幅に制作時間を短縮するために使うのがこれらのプロトタイプツールの独自機能だ。
Figmaの公式マニュアルやWEB検索をすれば多くの説明があるのだが、では実際のデザイン制作ではどのようにツールを使用するのかの体系的な説明は少ない。そこで2022年と2023年に発売された3冊のFigma本を読んでみて、その違いや書評というか感想みたいなものを書いてみた。この3冊のFigma本を新しく出版された順に紹介する。
Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜
もくじ
Chapter 1 Figmaを使う前に
Chapter 2 Figmaの基本
Chapter 3 UIデザインを作る
Chapter 4 プロトタイプを作る
Chapter 5 デベロッパハンドオフ
Chapter 6 Figmaを中心としたチーム全体でのコラボレーション
Chapter 1 Figmaを使う前に
アカウントの作成や無料・有料の各プランの説明、アプリ版とブラウザ版のちがいなど、Figmaを始めるための説明。
また現在PhotoshopやIllustratorを使用しているデザイナー向け、Adobe XDやSketchを使用しているデザイナー向け、ディレクターやプロダクトオーナーなどビジネス職向け、エンジニア向けなど各職ごとにFigmaを使用する上での利点の説明がありいかにFigmaを使うことが能率的かの説得方法が書いてある。これは3冊のうち本書のみ掲載されている。まあ今このシェア率でWEBサイトやスマートフォン・アプリのデザインをする上で、実質Figma以外の選択肢はないと思われるが。
Chapter 2 Figmaの基本
まず画面の各説明があり、その後横長のPowerPointで作成する様な、5ページの簡単なプレゼン資料を作りながら各ツールを学ぶ。通常は各ツールの説明をしてから、具体的にデザイン制作をしながら学ぶのだが、ここでは実践の中で学ぶ。個別に各ツールの説明がないので、あとから「あのツールの使い方を知りたい」ときなど、リファレンス的にツールの使い方を知りたい場合は、少し探すのが面倒かもしれない。
ここではテキストの入力や加工、画像やオブジェクトの描画、配置や加工を学ぶ。
Chapter 3 UIデザインを作る
UIデザインを学ぶ。ここではTwitterのような縦にスクロールするテキスト中心のSNSサイトのスマートフォン・アプリのデザインを制作する。この本のメインの部分である。
ここでは大元になるフレームのサイズとして「Android（大）」360✕800を選ぶ。グリッドの単位は8で、理由は8の倍数であり8✕45＝360と切のよい数字であるから。後述の「Figma UIデザイン」では、「iPhone11 Pro / X」375✕812を選択している。私もとくに指定がない限りiPhoneの375✕812サイズを選択することが多いが、横幅が375＝8✕46+7となり、7という端数がでる。端数がでると扱いにくい。そしてデザインの基本は「小さいものから作る」であるから、375よりも360を選択するほうが理にかなっている。次回スマートフォン・アプリのデザイン制作をする場合は、「Android（大）」360✕800を選択してみようと本書を読んで思った。
ここではオートレイアウトを使用したボタン、ヘッダー、フッターの作成。文字と色のスタイル作成。繰り返し使用するパーツのコンポーネントを作成しそのインスタンスを作り、さらにバリアントを作成。オブジェクトに制約を施すときの説明。ちなみに作例では、アイコンは既成のものを使用し、ペンツールで新たに描き起こすことはしない。ベクター・オブジェクトを作成するためのペンツールの説明はこの本にはない。
SNSサイトのデザインが完成した後、データの共有とコラボレーション機能の説明。
Chapter 4 プロトタイプを作る
Chapter 3で作ったSNSサイトにプロトタイプを適用する。
この本では他の2冊と異なり、デザイン完成後、プロトタイプを適用している。私の経験上はこのパターンが多い。本当は他の2冊のように、ワイヤーフレーム→プロトタイプ→デザインが望ましいが、プロトタイプよりも先にデザインを完成させることが多い。それはすでにデザイナーに発注する時点で、ワイヤーフレームは作られ、画面遷移は決定していることが多いからだ。
Chapter 5 デベロッパハンドオフ
WEBデザインやスマートフォンアプリ・デザインをFigmaのようなプロトタイプツールで行った場合、デベロッパハンドオフとは、コーダーやプログラマーなど実装者にデザイン・データを渡すことである。
閲覧者、編集者とそれぞれデータに対する権限があるが、その違いの説明。通常は共同でデザイン制作を行うのでなければ、作成者本人以外は閲覧者権限で十分。その閲覧者権限側からの操作方法や各プロパティを確認する方法の説明。
Chapter 6 Figmaを中心としたチーム全体でのコラボレーション
Chapter 5とは異なり編集者権限を使ったコラボレート方法、Figmaコミュニティーやプラグインの利用方法などの説明。
この本の特徴
「入門」と書名にあるように、IllustratorやPhotoshopなどのグラフィック・アプリに無縁な人からプロのデザイナーまで、Figmaを使ったことがない人を対象としている。「あとがき」でも著者は、入門書としての機能説明に重点を置いていると書いている。作例としては、3冊の中で唯一WEBでもアプリでもない「プレゼンテーション資料」を作成しながら学ぶ方法をとっている。図も大きく載っており説明も簡潔かつ十分なので学びやすい。ただ先述したように、ひととおり読み終わった後、あるツールの使い方を知りたい場合、ツール別に項目が分けられているわけではないので、そのような使い方をするのであれば少し不便かもしれない。
これからはじめるFigma Web・UIデザイン入門
もくじ
第1章 準備編 Figmaの準備と基本機能
第2章 実践編 Figmaで実践するWebデザイン制作体験
第3章 応用編 3つの作例から学ぶデザイン制作のながれ
第4章 活用編 チームでのFigma活用とペアデザイン
第1章 準備編
アカウントの作成や初期設定、またアプリ版のダウンロード方法の説明。
Figmaのデータ構造が説明されているが、この部分はきちんと理解しておきたい。「チーム」＞「プロジェクト」＞「ファイル」＞「ページ」＞「レイヤー」という階層構造になっている。とくに「チーム」-「プロジェクト」-「ファイル」辺りの関係は通常のグラフィック・アプリにはないので理解する必要がある。
そして画面や各ツールの使い方が、ツールごとに各機能が表組みで簡潔に説明してある。
プロトタイプツール・アプリを使う上で重要な、「コンポーネント／インスタンス／バリアント」「オートレイアウト」「スタイル」の説明。本書では、これら各機能を大きなイラストを使い説明していて、この部分に関しては3冊中もっとも分かりやすい。
最後にサムネイル（プレビュー画像）を制作しながら、各機能をマスターするという流れ。
第2章 実践編
デザイナーなどが自分の実績を紹介するための、ペラ（1ページ）のポートフォリオ用WEBサイトを制作しながらFigmaの学習をする。
まず色とテキストのスタイルを作成し登録した後、ワイヤーフレームの作成は行わず、WEBデザインを直接行う。コンポーネント機能を使いボタン作成。そのボタンを使用したグローバルナビゲーション、ファーストビュー（ヘッダー）、フッターとパーツごとに制作した後に、各パーツを統合しオートレイアウト機能を使いながらWEBサイトとしてまとめる。
第3章 応用編
「ホテル運営企業のコーポレートサイト」「インテリアECサイト」「料理レシピアプリ」の3つを制作しながらFigmaを学習する。
第2章はFigmaの機能中心の説明だったが、第3章はどちらかと言えば、Figmaを使用する以前の、WEBデザインやアプリデザインの説明から始まる。
各制作物は調査、サイトマップ、ワイヤーフレーム、デザインの順に概論が説明される。あくまで概論なので、WEBデザインやアプリ・デザインをさらに学習するには、他の書籍などで学ぶ必要がある。
「料理レシピアプリ」制作では、はじめてプロトタイプ制作の説明がされる。これ以前のWEBサイト制作事例では、リンクの設定方法などプロトタイプの説明はない。ここでは各UIパーツの制作やスタイル設定はなく、あらかめ用意されたダンロード可能なサンプル・ファイルを使用して学習する。ワイヤーフレームを制作し、リンクなどのプロトタイプの設定後プレビューする。
コンテンツをカルーセルで動作させる横スライドの方法、フッターの固定方法、「いいね」アイコンのタップ後の色替えに対するインタラクションの設定方法の説明。プロトタイプ設定後は、サンプルのデザインパーツを施し完成。
「料理レシピアプリ」の作例では、デザインよりもプロトタイプ設定の説明に重点が置かれている。
第4章 活用編
Figmaの強力な機能の1つに、ブラウザーで利用できる、チームでの制作やコミュニケーションのとりやすさなどがある。ここではバージョン管理の方法、ファイルの共有、コメントの共有、共同作業の方法などの説明がされている。
この本の特徴
WEBサイトデザインとアプリデザインの両方を実践の中で学ぶ形式で、プロトタイプツール・アプリを使い際もっとも重要な「コンポーネント／インスタンス／バリアント」「オートレイアウト」「スタイル」の説明が表組みを使うなどして、よくまとめられ一番分かりやすい。反面ページの使い分け方、ハンドオフ、ダークモードには触れていなかった。初心者向けに限定しているためかもしれない。
Figma UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ
もくじ
Chapter 1 基本的な操作
Chapter 2 生産性を上げる機能
Chapter 3 ワイヤーフレームを作成する
Chapter 4 プロトタイプを作成する
Chapter 5 詳細デザインを作成する
Chapter 6 デザインのハンドオフ
Chapter 7 ノンデザイナーのためのFigma
Chapter 1 基本的な操作
「Figmaをはじめる」から「チーム」＞「プロジェクト」＞「ファイル」＞「ページ」＞「レイヤー」の組織とファイルの構成、画面とツールの説明。他の2冊にはなかったベクターパスの操作方法を詳しく解説。Illustratorと扱い方はほぼ同じだが、ベクターネットワークと呼ばれる1点から放射状に伸びたポイントをつなぐFigma独特の機能の説明もある。
Chapter 2 生産性を上げる機能
「制約」「オートレイアウト」「コンポーネント」「バリアントとコンポーネントプロパティ」「スタイル」の説明をボタンを例に解説する。何度も言うようにFigmaを含むプロトタイプツール・アプリで一番重要な部分である。ただこの機能は元々文字による解説が難しいせいもあるが、本書では少し分かりにくい。
Chapter 3 ワイヤーフレームを作成する
本書での作成例はスマートフォン・アプリのみである。著者も触れているがアプリデザインもWEBサイトデザインも本質的に大きく異るものではないのでWEBデザインをする上でも本書の内容に問題はない。
ここからInstagramのような、画像主体SNSアプリのデザイン制作をしながらFigmaの学習をする。外部のUI Kit（Figmaコミュニティー）をコピーして各画面のワイヤーフレームを作成する。
ワイヤーフレームの中にアイコンを配置してゆくのだが、本書では既成アイコンを使用するのではなく、ベクターパスを使い独自に制作する。他の2冊にはない部分だ。
Chapter 4 プロトタイプを作成する
Chapeter 3で作成したワイヤーフレームにプロトタイプを設定する。単にリンクを張るのではなく、画面遷移時のインタラクションやアニメーションの説明もある。プロトタイプ設定時、Flowの使い分け方に関する説明が分かりやすかった。他2冊にはFlowの説明自体がなかった。
Chapter 5 詳細デザインを作成する
Chapter 4で作成したものにデザインを施してゆく。ここではFigmaのプラグインを使いUnsplashから画像を適切に取り込む方法の解説。これは分かりやすかった。
Chapeter 6 デザインのハンドオフ
すべてのデザインが完成したあと、プログラマーやディレクターなどにデザイン・データを適切に引き継ぐ。それがハンドオフだが、それに伴い色とテキストのスタイル登録、色に関してはダークモードの登録とバリアントによる切り替え方を解説する。複数の異なる画面サイズのデバイスを想定するのは当然で、プログラマーが画面サイズを変更する際にデザインが崩れないように「制約」や「オートレイアウト」を調整する。
「インタラクティブコンポーネント」の項では、バリアント機能を使いSNSでの「いいね」ボタンの特徴的なアニメーションの作り方を解説。
この章の内容は、他の2冊ではほぼ説明がないが、プロであればかなり役立つ知識である。逆に言えば、プロのデザイナーでなければ必要のない知識でもある。
Chapter 7 ノンデザイナーのためのFigma
エンジニアやディレクター、プロダクトマネージャーがデザイナーからFigmaデータを受け取った場合の操作方法の説明。各パーツの書き出しやFigmaデータを使った資料作成方法など。
この本の特徴
既に活躍しているプロ向けに一番近い。しかし難しい内容ではなく初心者に対しても十分に通用するが、初心者にハンドオフなどは必要ない知識かもしれない。デザイン、コンポーネント、スタイルの3つをそれぞれページに分ける方法、ダークモードをバリアントで制御する方法などの解説は本書独自で、それ以外も全体的に私が実践しているプロトタイプツールを使ったデザイン制作工程に一番近い。
総評
3冊ともこれからFigmaを学ぼうとする人にとっては有益な書籍である。各書に大きな差はない。どれか1冊読んで、足らない部分はWEB検索すれば十分だろう。あえて分けるのであれば、ノンデザイナー→プロデザイナーの順に、
- Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜
- これからはじめるFigma Web・UIデザイン入門
- Figma UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ
だろうか。冒頭に書いたようにFigmaを習得する場合一番大事なのは、コンポーネントやバリアントの使い方だ。これを使いこなすことにより作業効率が格段にアップする。またハンドオフにより、エンジニアにデザイナーの意図をより正確に伝えるという作業も今後重要になるだろう。
