書籍概要

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

著者
発売日
更新日

概要

かならず作れる!
ハンズオン形式で学べる
Figmaの入門教科書です。

Figmaを使ったWeb/UIデザインをマスターするには,実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は,解説の通りに操作を進めることでFigmaの基本をマスターできる初学者必携の入門書です。解説に使用している作例データは画像を含めてダウンロードできるので,

①実務に即したデザインを
②実際の流れに沿って制作し
③完成させることができます!

オートレイアウト,コンポーネント,スタイル,バリアブルといったFigma特有の機能はもちろんのこと,最新のWebサイトに必須のハンバーガーメニュー,カルーセル,レスポンシブ対応など,現場で今すぐ活用できるスキルをこれ1冊に詰め込みました。Figmaの最新UIにも対応した,Figma入門の決定版です。

●本書の内容
LESSON 1 Figmaの概要とレッスンの準備
LESSON 2 スマートフォンのWebデザイン
LESSON 3 スクロールするスマートフォン画面
LESSON 4 ページ遷移するカード型ページ
LESSON 5 ハンバーガーメニューとカルーセル
LESSON 6 レスポンシブなWebデザイン
LESSON 7 インタラクティブなUIパーツ

●本書で学べる内容
レイアウトグリッド/オートレイアウト/コンポーネント/インスタンス/プロトタイプ/スタイル/バリアブル/バリアント/オーバーレイ/ハンバーガーメニュー/カルーセル/レスポンシブ/ナビゲーション/検索用ウィンドウ/アニメーション/チェックボックス/ファイル共有 など

こんな方におすすめ

  • Webデザイナーを目指す学生・社会人
  • 制作会社に入ったばかりの新人Webデザイナー

サンプル

目次

  • はじめに
  • 本書の利用方法
  • LESSON用のサンプルファイル
  • 本書のLESSONで作成する内容

LESSON 1 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 フォント
  • カラーコード
  • ショートカットキー一覧

サポート

ダウンロード

本書の解説に使用しているサンプルファイルは,以下よりダウンロードできます。Lessonごとにファイルが分かれているため,必要なLessonのリンクをクリックし,ダウンロードしてください。サンプルファイルの利用方法について,詳しくは本書P.9を参照してください。

(2025年1月21日更新)

ダウンロード
Lesson2
Lesson3
Lesson4
Lesson5
Lesson6
Lesson7

商品一覧