初心者からちゃんとしたプロになる Figma 基礎入門

Figma を使うなら、最初に読む本! Web サイト & アプリのデザインがわかる。

『初心者からちゃんとしたプロになる Figma 基礎入門』 (相原典佳 ほか 著、エムディエヌコーポレーション、2023 年 5 月刊) は、インターフェイスデザインツールの Figma について、基本操作から制作現場での活用までを全 7 章で解説した本です。共著者は沖 良矢、倉又美樹、岡部千幸です。版元は、これから Figma の学習を始める人と、Adobe XD と合わせて Figma も本格的に使ってみたい人を読者に挙げ、デザイナー、ディレクター、エンジニアのほか、制作職以外で Figma を使う場面のある人にも役立つ内容と案内しています。国立国会図書館の書誌では、書名に「読む & 作りながら学ぶ!」が添えられています。発売元はインプレスです。

ブラウザーで動く共同編集のツール

Figma は、ブラウザーやデスクトップアプリで動き、デザインのファイルをクラウドに置いて複数の人が同時に編集できるインターフェイスデザインのツールです。色や文字のスタイルと、使い回す部品であるコンポーネントを定める仕組みは、UI の部品と規則を体系化する デザインシステム に当たります。版元の紹介文は、Figma はさまざまな職種のメンバーと「協業」しながらチームでデザインを作り上げる過程で真価を発揮するツールだと述べています。

Lesson1 から Lesson7 までの構成と扱う機能

版元の紹介文は、前半で Figma の特徴と基礎知識、画面構成を学んだあとプロトタイピング機能とコミュニケーション機能を解説し、後半は実践パートとして Web サイトとモバイルアプリの UI をデザインすると区分しています。目次では、Lesson1「Figma の基本とワークフロー」で画面、デザインに使うツール、画像の扱い、プラグインと Figma コミュニティを扱い、Lesson2「デザインするための機能」でスタイル機能、コンポーネント機能、オートレイアウト機能、デザインシステムへと進みます。Lesson3「Figma のプロトタイピング機能」では画面同士をつないで動きを試すプロトタイプを作り、Lesson4「コミュニケーションのための機能」ではファイルの共有、共同編集、コメント、インスペクト、ライブラリ、チームの管理を取り上げます。Lesson5「Web サイトをデザインする」は、ファイルの準備から「ホーム」のページ、下層ページ、スマートフォン版のデザイン、プロトタイプの活用までを一続きで扱います。Lesson6「モバイルアプリをデザインする」は、手描きラフを用意してデザインデータの土台を作り、扉画面、名前とメールアドレス入力画面、認証番号入力画面とパスワード入力画面を順に作ったうえで、画面とコンポーネントのパターンを作ります。最後の Lesson7「外部のデザインツールとの連携」は、Adobe のデザインツールとの連携と、Sketch からの移行を扱います。

2025 年 11 月の改訂 2 版

目次に配色やタイポグラフィの理論を扱う章はありません。Web デザインの本の選び方は Web デザイン本ガイド にまとめています。本書は 2023 年 5 月刊の初版で、版元は 2025 年 11 月に同じ著者 4 名による改訂 2 版を出しています。改訂 2 版の案内には、バリアブルと、新機能が追加されたオートレイアウトの解説を加えて内容の多くを刷新し、全 6 章構成にしたとあり、初版の目次にはバリアブルの項目はありません。初版は、Figma の画面の見方から Web サイトとモバイルアプリの UI の制作、Adobe のツールや Sketch との連携までを全 7 章に収めています。