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

発売日 : 2025年01月30日

著者／編集 : 古尾谷 眞人

出版社 : 技術評論社

発行形態 : 単行本

Figmaを使ったWeb/UIデザインをマスターするには、実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は、解説の通りに操作を進めることでFigmaの基本をマスターできる、初学者必携の入門書です。作例データをダウンロードし、実務に即したデザインを、実際の流れに沿って制作し、完成させることができます。オートレイアウト、コンポーネント、スタイル、バリアブルといったFigma特有の機能はもちろんのこと、最新のWebサイトに必須のハンバーガーメニュー、カルーセル、レスポンシブ対応など、現場で今すぐ活用できるスキルを詰め込みました。Figmaの最新UIにも対応した、Figma入門の決定版の登場です。
はじめに
本書の利用方法
LESSON 用のサンプルファイル
本書の LESSON で作成する内容
●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 フォント
カラーコード
ショートカットキー一覧

古尾谷 眞人