Figmaの実践的な使い方がこれでよく分かる！ UIコンポーネントの作り方にフォーカスされた解説書 -Figmaで作るUIデザインアイデア集

※本ページは、アフィリエイト広告を利用しています。

UIデザインでもっとも使われているツールは何か、と言えばFigmaと答える人が多いと思います。Figmaは、Webサイトやスマホアプリの制作において欠かせないといっても過言ではないデザインツールです。

そんなFigmaをもっと使いこなしたい、UIデザインをする際のアイデアや実践的なテクニックを解説した解説書を紹介します。デザインシステムをベースにしているので、しっかりとした知識を学ぶことができます。

本書はデジハリなどの講師である相原氏、現役UIデザイナーである岡部氏、二人による共著です。Figmaの解説書も最近では増えてきましたが、本書はFigmaで特にUIコンポーネントの作り方にフォーカスされた解説書です。

Kindle版も発売されています！

• Figmaで作るUIデザインアイデア集 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は6章構成、Figmaの基本操作をさらりと学んだ後は、ファウンデーション（ベースとなる要素集）、コンポーネントを作成し、アプリを作成しながらFigmaの実践的な使い方を学びます。

第1章は「Figmaの基本操作」デザインのサイズを定義するフレーム、要素の配置をコントロールするオートレイアウト、色や数値を変数で定義するバイアブルなど実践で使用する基本操作を学びます。

基本操作といっても、実際にUIコンポーネントを作る上で欠かせないものなので、しっかりと読んでおきましょう。

第2章はファウンデーションの作り方。ファウンデーションとはUIのベースとなる要素集で、命名規則やカラーやタイポグラフィや余白やシャドウなどをFigma上で定義したものです。

たとえば、余白は8pxを基本とし、0, 4, 8, 16, 24, 32, 40, 60を用意します。このように定義しておくことで、一貫性のあるUIをデザインすることができます。

Figmaで余白を用意する場合は、余白の値に「数値バリアブル」を使うと便利です。オートレイアウトの余白の値にバリアブルを適用し、見出しやボタンなどの同じ使い方をするときには同じ余白を簡単に適用できます。

第3章はいよいよ、UIコンポーネントを作成します。

この章がページ数が一番多く、たとえばボタンの解説ページは14ページに渡ります。基本となるボタンの形をデザインするところから、アイコンの配置、バリアントの作成、さまざまなバリエーションのボタンをデザインします。

第3章ではボタンをはじめ、フォーム、ヘッダ、タブ、ナビゲーションバー、パンくずリスト、アコーディオン、リスト、カード、モーダルなど、21種類のコンポーネントを作る方法が詳しく解説されています。

第4章はここまでに作成したファウンデーションとコンポーネントで、アプリの画面をデザインします。アプリは架空のピザ配達アプリで、ログイン画面や会員情報画面、ピザの一覧画面、詳細画面、カート画面、注文画面など一通りが揃っています。

手順としてはファウンデーションで定義した色や数値をエイリアスとしてバリアブルに登録し、作成したコンポーネントを使用します。ここらへんも実際にどのような手順でおこなうのか、具体的なやり方など、詳しくていねいに解説されています。

最後の第6章は、デザインシステムについて。デザインシステムの構築方法から運用まで、効率的なデザインプロセスを実現するための仕組みを学べます。

Figmaで作るUIデザインアイデア集の目次

Figmaで作るUIデザインアイデア集の目次

Figmaで作るUIデザインアイデア集の目次

Figmaのここまで実践的な使い方を詳しく解説した解説書は、初めてではないでしょうか。スタイルガイドの作成をはじめ、各コンポーネントのデザイン、それらを使ってアプリを作成するまでの手順がよく分かります。一連としてだけでなく、特定のUIコンポーネントの作り方に悩んだときにも役立つ一冊です。

献本の御礼

最後に、献本いただいたインプレスの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス