Figma(フィグマ)について知りたい人のために、おすすめの本などを紹介します。
「Figma」とは、Webブラウザ上で使えるデザインツールです。UI/UXデザインやプロトタイプ作成をリアルタイムで共同編集でき、デザイナーとエンジニアの連携をスムーズにします。チーム開発に強いのが特徴です。
まずはじめに、Figmaがわかる本のおすすめ5選を紹介します。
もっと探したい人のために、注目の新刊、ロングセラー本など(目次を参照)を紹介します。
あなたは、次のどれに当てはまりますか?
- UI/UXデザイナー: アプリやWebサイトのインターフェース設計、ユーザー体験の構築を専門的に学びたい
- Webデザイナー: 従来の制作ツールからFigmaへ移行し、Webデザインの効率化を図りたい
- フロントエンドエンジニア: デザインの仕様確認や、CSSの書き出し、開発へのスムーズな連携(ハンドオフ)を学びたい
- プロダクトマネージャー(PM): サービスの要件定義やワイヤーフレームを自ら作成し、チームに共有したい
- デザイン学習者・学生: 将来クリエイティブな職種に就くために、業界標準のツールを基礎から習得したい
- グラフィックデザイナー: 印刷媒体からWeb・デジタル領域へ仕事の幅を広げ、インタラクティブな要素を学びたい
- デザインシステム構築担当者: 大規模プロジェクトで共通のコンポーネントやスタイルを管理・運用する方法を知りたい
- マーケター: SNS用のバナーや広告、簡単なプレゼン資料を内製して、制作スピードを上げたい
- フリーランスのクリエイター: クライアントとリアルタイムで進捗を共有し、修正のやり取りを効率化したい
- ビジネスパーソン(非デザイナー): ホワイトボード機能(FigJam)を活用して、アイデア出しや思考の整理、チームでのワークショップを行いたい
あなたの興味関心にあった本をみつけて、読んで学んでみましょう!
最大70%OFF 12/25まで
Kindle本 クリスマスセール
今すぐチェック
紙書籍 冬の読書応援まとめ買いキャンペーン
・2〜4冊…2%還元
・5〜9冊…5%還元
・10冊以上…12%還元
詳しく見る 1月15日まで
おすすめ5選)Figmaの本
Figmaがわかる本のおすすめ5選を紹介します。
作って学ぶFigma入門[完全版] ステップ・バイ・ステップで身につくWeb/UIデザインの基本
書籍情報
かならず作れる!
amazon.co.jp書籍情報より引用
ハンズオン形式で学べるFigmaの入門教科書です。
Figmaを使ったWeb/UIデザインをマスターするには、実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は、解説の通りに操作を進めることでFigmaの基本をマスターできる、初学者必携の入門書です。解説に使用している作例データは画像を含めてダウンロードできるので、(1)実務に即したデザインを(2)実際の流れに沿って制作し(3)完成させることができます!
オートレイアウト、コンポーネント、スタイル、バリアブルといったFigma特有の機能はもちろんのこと、最新のWebサイトに必須のハンバーガーメニュー、カルーセル、レスポンシブ対応など、現場で今すぐ活用できるスキルをこれ1冊に詰め込みました。Figmaの最新UIにも対応した、Figma入門の決定版です。
評判・口コミ
Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り
書籍情報
UIデザイナーとして一歩先に行くために
本書はFigmaを使ったデザインシステムの構築方法が学べるチュートリアルです。「デザインシステムとは何か」から始まり、実践を通して「どのように作るのか」を学べます。具体的な作例を用いて段階的に構築していくので、「デザインシステムに興味があるけど何から始めてよいかわからない」といった方や、Figmaの初歩的な操作方法を理解している方のステップアップとしても最適です。「デザインシステムはまだ必要ない」という方でも、本書で解説する機能を使いこなせば、既存のデザインプロセスを改善できるはずです。
●本書の目的
amazon.co.jp書籍情報より引用
1.プロダクト開発全体を効率化し、エンドユーザーへの価値提供に集中する大規模なプロダクトで素早く改善サイクルを回す
2.デザインの一貫性、拡張性、保守性を向上させる
3.開発チームのコラボレーションを強化する
評判・口コミ、著者ポスト
Figma for UIデザイン[日本語版対応] アプリ開発のためのデザイン、プロトタイプ、ハンドオフ
書籍情報
基本を知るための「リファレンス編」と現場のスキルを学べる「プラクティス編」が一冊に!
amazon.co.jp書籍情報より引用
【本書はFigma日本語版に対応しています】
本書は、Figmaを使ってUIデザインをゼロから学べる本です。
「写真投稿アプリ」を題材に、実際のワークフローに沿ってアプリのデザインを作成します。
UIデザインの基礎知識はもちろん、Figmaならではの効率的なテクニックやエンジニアとのコミュニケーションを円滑にする方法など、リアルな現場の情報を織り交ぜながら初学者の方が最初の一歩を踏み出せる構成になっています。
また、プロトタイピング、プラグイン、アニメーションなどにも踏み込んで解説しており、Figmaを使ったことのある人にも活用いただける一冊です。
評判・口コミ
Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン
書籍情報
▼コンポーネントの作成から実装まですべて学べる
amazon.co.jp書籍情報より引用
前半ではFigmaの基本操作を学びます。UIコンポーネントとスタイルを集めた本書オリジナルのUIキット「Stockpile UI(ストックパイルユーアイ)」を元に、UIデザインで必須のコンポーネントやアイコンについて、その機能や目的を学びながらデザインしていきます。後半では本書オリジナルアプリに実装することで、一連の制作の流れを体験できる内容になっています。「いろいろなサンプルを一気に見たい」「とにかく早く実務に生かしたい」人に役立ちます。
▼オリジナルのサンプルファイル付き
Chapter 1で利用する練習用のファイルと、本書オリジナルのUIキット「Stockpile UI」のデータをサンプルファイルとして使用することができます。
著者ポスト、評判・口コミ
FigmaではじめるUXデザイン入門 アイデア発想から実践まで、デジタルプロダクト制作のためのワークブック
書籍情報
Web からアプリまで、さまざまなデジタルプロダクト制作の現場で実践されているU I・サービス設計のプロセスをワークブック形式で徹底解説!
amazon.co.jp書籍情報より引用
本書は、UX デザインの基本的な考え方から実践までを、手を動かしながら一歩ずつ学べるワークブックです。これからUX デザインを学びはじめる学生や、実務で取り組むデザイナー、そしてプロダクト開発にかかわる企画・技術職の方など、ユーザー体験と向き合う立場にある多様な読者を想定しています。
UI の見た目を整えるだけではなく、課題の発見とアイデア発想、情報設計からUI デザインまでの一連の流れを、Figmaというデザインツールを用いて体験できるよう座学とワークをバランス良く組み込んだ以下の章で構成しています。
著者ポスト
注目の新刊)Figmaの本
Figmaがわかる本の注目の新刊を、4冊、紹介します。
デザインからサイト構築まで FigmaだけでWeb制作
書籍情報
●Webデザイナーの必須ツール「Figma」解説書の決定版!
amazon.co.jp書籍情報より引用
●デザイン初学者はもちろん、デザイナー以外でも理解できる!
●最新機能「Figma Sites」の実践活用までカバー!
●プロジェクト型の学習構成で作りながら覚えられる!
Figma(フィグマ)は近年、多くのデザイナーや企業に選ばれているデザインツールです。Webサイトやアプリのデザインを効率良く制作できるだけでなく、検討や改善、プレゼンなどを含む一連の作業を効果的に進めることができます。クラウドベースなので共同作業にも向いていて、Webデザインなどにおける必須のツールになりつつあります。
さらに2025年には、デザインしたWebサイトをそのまま公開する新機能「Figma Sites」を搭載し、HTMLなどのコーディングの知識がなくても、Webサイトを制作・公開できるようになりました。
本書は、そんなFigmaの基本的な操作方法はもちろん、Figma Sitesなどの最新機能の活用法や、「使いやすく訴求力のあるデザイン」に必要なUI/UXの考え方まで、これからのFigma 活用を体系的に学べる1冊です。
執筆は、現役のデザイン講師として活躍する著者陣。現場で培った実践的な知識をもとに、初心者にも理解しやすく体系的に解説しています。
つくって学べる はじめてのFigmaデザイン
書籍情報
作って覚える、だから続く!
短期間でFigmaスキルが身につく、実践型ドリル集。Web&UIデザインを題材に、Figmaを効率よく学びたい人のための「作って覚える」実践ドリル形式の入門書です。
Figma特有の、難しいと感じやすい機能はステップアップとして後半で扱い、まずは"完成まで作れる"体験からはじめましょう。完成ファイル、サンプルサイト、便利なショートカットキー一覧などのダウンロード特典もあります。
amazon.co.jp書籍情報より引用
初心者からちゃんとしたプロになる Figma基礎入門 改訂2版
書籍情報
読む&作りながら、Figmaでデザインする「楽しさ」を知る!
amazon.co.jp書籍情報より引用
デザインツール「Figma」の基本的な使い方から実践的な活用ノウハウまでを解説した本の改訂版。
「初心者からちゃんとしたプロになる」シリーズは、制作現場で「一人前のプロ」として活躍するための知識や技術を提供するものです。
本書は、WebやUIのデザイナー、ディレクター、エンジニア、これらの職種を志望する方々など、Figmaを使う多くの方に最適な内容になっています。
改訂にあたって、「バリアブル」や新機能が追加された「オートレイアウト」の解説を加えるなど、内容の多くを刷新しました。
全6章構成で、Lesson1・2では、基礎的な知識や画面の見方を習得していただきます。
Lesson3では、アプリやWebサイトを試作できるプロトタイピング機能を紹介しています。
Lesson4では、作成したデータを共有し、コラボレーションして制作や開発を行うための知識を伝えます。
Lesson5~6では、それぞれアプリデザインとWebデザインを制作するノウハウを学びます。
本書を土台にして、個人やチームでのデザインワークに活用するとともに、Figmaでデザインする「楽しさ」を体感してください!
Figmaではじめるデザインコラボレーション
書籍情報
Figmaについて一歩先の活用方法を知ろう!
デザイナーだけでなく、エンジニアや非デザイン部門を含めたチーム全体でFigmaを活用し、効率的かつ創造的なコラボレーションを実現するための実践的な知識とテクニックを紹介! Figmaについて一歩先の活用を知りたい方におすすめの一冊です。
amazon.co.jp書籍情報より引用
ロングセラー)Figmaの本
Figmaわかる本のロングセラーを、5冊、紹介します。
これからはじめるFigma Web・UIデザイン入門
書籍情報
Figmaでのデザイン制作のながれを学べる1冊!
amazon.co.jp書籍情報より引用
■本書の特徴
・日本語化対応
操作画面および解説も日本語化に対応しているため、これからFigmaをはじめる人も安心です。
・4つの作例で学べる
ポートフォリオサイト、コーポレートサイト、ECサイト、レシピアプリ、4つの作例を本書では収録しています。
・デザイン制作のながれがつかめる
それぞれの作例に求められる調査や情報整理、フレームの用意やスタイル、プロトタイプの作成方法もご紹介します。
はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門
書籍情報
Figmaでできることを学ぼう!
本書はブラウザベースのデザインツール「Figma」の操作方法と、Figmaで実際にデザインを作成して成果物を完成させる方法を解説した書籍です。
基本的な機能を解説した「基礎編」と、実際にFigmaでのデザイン制作の手順が分かる「実践編」の2編で構成しています。
基礎編でFigmaの使い方をしっかり学んでから、実践編で具体的な成果物の作成まで学べます。実践編で紹介している事例は以下の通りです。
amazon.co.jp書籍情報より引用
・Webサイト(LP)
・UIデザイン
・Instagram広告
・YouTubeのサムネイル
・プレゼン資料
・名刺
デザインの学校 これからはじめるFigmaの本
書籍情報
Figmaの使い方がよくわかります!
Figma(フィグマ)はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。
amazon.co.jp書籍情報より引用
ノンデザイナーのためのFigma入門
書籍情報
エンジニアやPMなど、デザイナーじゃない人のためのFigma入門。エンジニアリングに興味があるデザイナーにもお薦め。
amazon.co.jp書籍情報より引用
Figmaデザイン入門 UIデザイン、プロトタイピングからチームメンバーとの連携まで
書籍情報
現場で使えるFigmaの活用術をこれ1冊に!
amazon.co.jp書籍情報より引用
話題の「Figma」を短期間で使いこなす!
リモートワークのような働き方が普及するとともに、チームメンバーとのコミュニケーションの重要性は増しています。そんな中で注目を集めているのが、Webブラウザ上で動くインターフェースデザインツール「Figma」です。
「オンライン上でチームメンバーが集まり、同じデータを見ながら意見を出し合って、その場でデザインをアップデートできた」
「URLを共有してホワイトボードとして使用することで、オンラインでの活発な議論につながった」
Figmaはオンライン上でリアルタイムに共同編集ができるため、このようなチームメンバーとのコラボレーションが実現します。データはブラウザ上で確認できるので、動作環境を選びません。特定のソフトウェアをインストールしていないメンバーが閲覧できないという心配もありません。デザイナー向けの豊富な機能はもちろん、デザイナー以外のメンバーがデザインに関わるときに便利なプロトタイピングやバージョン管理、コードの出力など、さまざまな機能が備わっています。
本書は、注目のFigmaの入門書です。デザインはもちろん、その前段階であるWebページの設計図やサイトマップの作成、コーディングの準備、要件定義といった場面で活用する方法を解説し、オンラインホワイトボードのような便利な機能も紹介します。使用頻度の高い機能を優先的に解説し、難しい機能や細かいオプションはできるだけ省略していますので、初心者の方でも気軽にFigmaを学ぶことができます。
Figmaによくある質問と回答
Figmaについて、初心者からよくある質問と回答を5つ紹介します。
Figmaとはどのようなツールですか?他のデザインソフトとの違いは?
回答: Figmaは、WebサイトやアプリのUI(ユーザーインターフェース)をデザインするためのツールです。最大の特徴は「ブラウザ上で動作する」ことと「リアルタイム共同編集」ができる点です。Googleドキュメントのように、複数の人が同時に一つのデザインファイルを編集・閲覧できるため、チームでの作業に非常に適しています。
デザイン初心者ですが、無料で使えますか?
回答: はい、個人利用であれば「スタータープラン」という無料プランで十分に使い始めることができます。作成できるファイル数や編集履歴の保存期間に一部制限はありますが、基本的なデザイン機能はすべて無料で利用可能です。
ソフトをパソコンにインストールする必要はありますか?
回答: 基本的には不要です。Google Chromeなどのブラウザがあれば、ログインするだけでどこでも作業が可能です。ただし、より動作が安定し、フォントの管理がしやすい「デスクトップアプリ版(Mac/Windows対応)」も無料で提供されており、多くのデザイナーはこちらを併用しています。
プログラミングやコードの知識は必要ですか?
回答: デザインを描くだけなら、プログラミングの知識は一切不要です。マウス操作やショートカットを使って、図形を並べる感覚で作成できます。一方で、作成したデザインからCSSなどのコード情報を書き出す機能があるため、エンジニアとの連携が非常にスムーズになるというメリットがあります。
作成したデザインを他の人に見せるにはどうすればいいですか?
回答: 画面右上の「Share」ボタンをクリックして共有リンクを発行するだけです。相手がFigmaのアカウントを持っていなくても、ブラウザでリンクを開くだけでデザインを確認(プレビュー)することができます。コメント機能を使って、デザイン上に直接フィードバックをもらうことも可能です。
Figmaのスキルが活かせる職種とは?
Figmaは単なるデザインツールを超え、製品開発のコミュニケーション基盤となっているため、習得することでクリエイティブ職からディレクション職まで幅広い業務を担当できるようになります。
「Figma」に関する知識や経験を習得することによって担当できる仕事を10個、紹介します。
- UIデザイナー:
- Webサイトやスマホアプリの操作画面(ボタン、メニュー、配置など)を美しく、使いやすく設計します。
- UXデザイナー:
- ユーザーの行動に基づいたプロトタイプを作成し、使い心地や体験の質を向上させる設計を担当します。
- Webデザイナー:
- 構成案(ワイヤーフレーム)の作成から、実際のWebサイトのビジュアルデザイン制作までを一貫して行います。
- フロントエンドエンジニア:
- デザインデータを解析してコード(HTML/CSS等)に落とし込む際、Figmaの「Dev Mode」を活用して正確な実装をリードします。
- プロダクトマネージャー(PM):
- サービスの全体像を可視化し、エンジニアやデザイナーとの共通認識を作るためのディレクション業務を担当します。
- デザインシステム構築担当者:
- 大規模なプロジェクトにおいて、色やフォント、ボタンなどの部品を共通化し、開発効率を上げるための「仕組み」を作ります。
- マーケティングデザイナー:
- 広告バナーやランディングページ(LP)の作成、SNS投稿用画像の制作を、テンプレート化してスピーディに遂行します。
- UXリサーチャー:
- ユーザーテスト用の動く試作品(インタラクティブ・プロトタイプ)を作成し、課題の検証やインタビューを行います。
- Webディレクター:
- クライアントへのプレゼン資料作成や、チーム内でのレイアウト修正の指示を、Figma上でのコメント機能を使って効率的に行います。
- IT講師・デザイン教育者:
- 未経験者や社内スタッフ向けに、業界標準ツールであるFigmaの操作方法やデザインの基礎を指導します。
Figmaを使いこなせるようになると、デザインそのものを作るだけでなく、「チームでのモノづくりを円滑に進める役割」を担えるようになるのが大きな強みです。
まとめ
Figmaについて知りたい人のために、おすすめの本を紹介しました。
まずはじめに、Figmaがわかる本のおすすめ5選を紹介しました。
もっと探したい人のために、注目の新刊、ロングセラー本など(目次を参照)を紹介しました。
あなたの興味関心にあった本をみつけて、読んで学んでみましょう!
本ブログサイトでは以下の記事も紹介しています。













