もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Post on:2022年12月23日
sponsors
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。
Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。
本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。
本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウンロードできるので、至れり尽くせりの一冊です。
Kindle版も発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は7章構成で、1-2はFigmaのインストールから使い方・機能までのリファレンス的な内容、3-6はワイヤーフレームやプロトタイプや詳細デザインを作成する実践的な内容、最後の7章はデベロッパーやプロダクトマネージャー向けとなっています。
Figmaをこれから始める人は、Figma 日本語版から無料で始められます。要登録ですが、Googleアカウントにも対応しているので、簡単に登録できます。
Figmaが始めての人は、第1章から目を通しておくとよいでしょう。とは言え、Figmaのインターフェイスは分かりやすいので、戸惑うことはないと思います。
Figmaを使用している人は、確認の意味を含めて第2章から。Figmaならではの便利な機能やテクニックが分かります。
解説は、UI要素やコンポーネントを使用して解説されているので、分かりやすいと思います。
第3章からがいよいよメインです。8ptのグリッドシステムを使用して、ワイヤーフレームをFigmaで作成します。
操作手順はステップごとにていねいに解説されており、素材や完成ファイルはサポートサイトからダウンロードできるので、戸惑うことはないでしょう。
第4章はインタラクションや画面遷移を確認できるプロトタイプの作成。
Figmaでは、トリガー（タップやドラッグなど）やアクション（トリガーに対する動作）を簡単に設定できます。プロトタイプを作成することで、クライアントからフィードバックを得ることができ、デザインや実装の手戻りを最小限に抑えることができます。
第5章は、Figmaでデザインの詳細を作成していきます。Figmaの標準機能だけでなく、便利なプラグインもたくさん紹介されているので、要チェックです。
第6章は、デベロッパーにデザインを渡す工程（ハンドオフ）です。Figmaではカラーやタイポグラフィの管理も簡単なので、デザインの保守性も高められます。
Figmaではステータスも管理できます。ローディング時・空白時・エラー時・通常時などのUIスタックも簡単に作成できます。
作成したワイヤーフレーム・プロトタイプ・詳細デザイン・スタイルガイド・UIキットは、サポートサイトからダウンロードできます。
Figmaはデザイナーが使用するだけではありません。デベロッパーやプロダクトマネージャーが知っておきたいFigmaの使い方もていねいに解説されています。
Figma for UIデザインの目次
Figma for UIデザインの目次
Figma for UIデザインの目次
Figma for UIデザインの目次
UIデザインのツールは2022年現在、Figmaが一強といえる時代です（参考: 2022年のUIデザインツールのまとめ）。Figmaは日本語化され、魅力的なプラグインも数多くあり、さらにAdobeとのタッグでこれまで以上に来年も活躍するツールになると予想されます。
これからFigmaを学ぶ人にも、Figmaをすでに使用していてさらにスキルアップしたい人に、手元において学ぶのにぴったりの本だと思います。
献本の御礼
最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
