作って学ぶFigma入門［完全版］ ステップ・バイ・ステップで身につくWeb/UIデザインの基本

※この商品は固定レイアウトで作成されており，タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また，文字列のハイライトや検索，辞書の参照，引用などの機能が使用できません。
※PDF版をご希望の方は Gihyo Digital Publishing（https://gihyo.jp/mk/dp/ebook/2025/978-4-297-14679-5）も合わせてご覧ください。
かならず作れる！ ハンズオン形式で学べる，Figmaの入門教科書です。
Figmaを使ったWeb/UIデザインをマスターするには，実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は，解説の通りに操作を進めることでFigmaの基本をマスターできる，初学者必携の入門書です。解説に使用している作例データは画像を含めてダウンロードできるので，
(1)実務に即したデザインを
(2)実際の流れに沿って制作し
(3)完成させることができます！
オートレイアウト，コンポーネント，スタイル，バリアブルといったFigma特有の機能はもちろんのこと，最新のWebサイトに必須のハンバーガーメニュー，カルーセル，レスポンシブ対応など，現場で今すぐ活用できるスキルをこれ1冊に詰め込みました。Figmaの最新UIにも対応した，Figma入門の決定版です。
■■こんな方におすすめ
・Webデザイナーを目指す学生・社会人
・制作会社に入ったばかりの新人Webデザイナー
■■目次
●LESSON1 Figmaの概要とレッスンの準備
01 FigmaとUI/UXデザイン
02 ソフトウェアの準備

●LESSON 2 スマートフォンのWebデザイン
01 スマートフォン画面の作成
02 画像とテキストの基本操作
03 アイコンの作成

●LESSON 3 スクロールするスマートフォン画面
01 オートレイアウトの基本操作
02 コンポーネントの基本操作
03 iOSコンポーネントの利用
04 プロトタイプの基本操作

●LESSON 4 ページ遷移するカード型ページ
01 スタイルの作成
02 バリアブルの作成
03 ページ遷移の作成
04 オーバーレイの作成

●LESSON 5 ハンバーガーメニューとカルーセル
01 ハンバーガーメニュー
02 カルーセルの作成
03 アプリでプレビュー再生
04 Figmaファイルの共有

●LESSON 6 レスポンシブなWebデザイン
01 レスポンシブなフレームの拡大
02 プロパティによるデザイン変更

●LESSON 7 インタラクティブなUIパーツ
01 検索用ウィンドウの作成
02 検索操作アニメーションの作成
03 チェックボックスの作成
04 ドラッグで閉じるウィンドウ

Googleフォント
カラーコード
ショートカットキー一覧