これからはじめる Figma Web ・ UI デザイン入門(コレカラハジメルフィグマ ウェブユーアイデザインニュウモン)

■ Figma とは
Figma (フィグマ) は、デザインプロセスのすべての人をつなぎ、チームがより良いデジタルプロダクトをより速く提供できるようにするためのデザインコラボレーションツールです。
『すべての人がデザインを利用できるようにする』というビジョンのもと、 2012 年にアメリカのサンフランシスコで誕生しました。現在は世界中で多くのユーザーに支持され、日本でもユーザー数が伸びています。
シンプルな操作性や軽快な動作、強力な共同編集をはじめとした特徴をもつ Figma は、 Web サイトやアプリケーションをデザインするデザイナーだけでなく、さまざまな職種のメンバーとコラボレーションすることで、プロジェクトや制作フローの改善においても活躍してくれます。世界中の人々が利用し、アップデートが活発なツールでもあるため、ぜひ一度 Figma を使ってその魅力に触れてみてください。

■本書の特徴
・日本語化対応
2022 年 7 月 29 日にリリースされた日本語化に対応しました!操作画面および解説も日本語化に対応しているため、これから Figma をはじめる人も安心です。

・ 4 つの作例で学べる
ポートフォリオサイト、コーポレートサイト、 EC サイト、レシピアプリ、 4 つの作例を本書では収録しています。それぞれの作例のデータもダウンロードできるようにしています。ハンズオンで自分の手を動かしながら Figma の操作方法を学べます。

・デザイン制作のながれがつかめる
4 つの作例を通じて、 Figma を使ったデザイン制作のながれをつかめます。それぞれの作例に求められる調査や情報整理、フレームの用意やスタイル、プロトタイプの作成方法もご紹介します。
第 1 章 準備編 Figma の準備と基本機能
1-1 アカウント作成と初期設定
1-2 ファイルブラウザ
1-3 Figma のチーム・プロジェクト・ファイル
1-4 インターフェイス
1-5 デザインタブの各パネルの使い方
1-6 コンポーネント・オートレイアウト・スタイル
1-7 30 分でできるサムネイル制作
1-8 Figma コミュニティ
1-9 Figma 公式リソース

第 2 章 実践編 Figma で実践する Web デザイン制作体験
2-1 ポートフォリオサイトのデザイン作成
2-2 ファイルの準備
2-3 色スタイルの作成
2-4 テキストスタイルの登録
2-5 ボタンのコンポーネントの作成
2-6 グローバルナビゲーションの作成
2-7 フレームの作成
2-8 ファーストビューの作成
2-9 Service (サービス) セクションの作成
2-10 Works (制作実績) セクションの作成
2-11 About (私について) セクションの作成
2-12 フッターの作成
2-13 ページ全体の余白を調整する

第 3 章 応用編 3 つの作例から学ぶデザイン制作のながれ
3-1 3 つの作例概要
3-2 コーポレートサイト
3-3 インテリア EC サイト
3-4 レシピアプリ

第 4 章 活用編 チームでの Figma 活用とペアデザイン
4-1 チーム制作に向いている Figma の特徴
4-2 チームで利用できる Figma の 5 つの便利な機能
4-3 Figma を使ったペアデザイン
4-4 職種を越えたコラボレーション
4-5 便利なツール連携

デザインツールの選択肢が Figma に収束しつつある中で、「触ってみたいが何から始めればいいか分からない」という人のために書かれた一冊です。本書はアカウント作成から始まり、フレーム、コンポーネント、オートレイアウト、プロトタイピングと段階を踏んで操作を覚えていく構成で、手を動かしながら読み進めることを前提にしています。

対象はデザイナー志望者だけではありません。エンジニアやディレクターが「デザインファイルを読み解きたい」「簡単なモックを自分で作りたい」と考えたときの最初のステップとしても使えます。 Figma はブラウザで動作するためインストール不要で、本書の手順に従えばすぐに実践に入れる敷居の低さがあります。

一方で、デザインの理論 (配色、タイポグラフィ、情報設計) を深く扱う本ではなく、あくまでツール操作に重心が置かれています。 Figma の基本機能を一通り使えるようになった先に、 UI デザインの原則を学ぶ別の書籍が必要になるでしょう。道具の使い方を確実に押さえるための入口として、過不足のない構成です。