出版社内容情報
Figma（フィグマ）はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。
【目次】
Chapter0 Figmaについて知ろう
01 Figmaの特徴を確認しよう
02 アカウントを登録しよう
03 Figmaのインターフェースを確認しよう
04 画面表示とモードを切り替えよう
05 お手本ファイルをダウンロードしよう
06 お手本ファイルを読み込もう
Chapter1 ロゴを作ろう
01 新規ファイルを作ろう
02 フレームを作ろう
03 角丸四角形を描こう
04 半円を描こう
05 オブジェクトを複製＆変形しよう
06 曲線を描こう
07 塗りと線を設定しよう
08 文字を入力しよう
09 グループ化して書き出そう
Chapter2 バナーを作ろう
01 ページを追加しよう
02 バナーの背景にグラデーションを設定しよう
03 ロゴを配置しよう
04 直線を描こう
05 バナーに文字を入力しよう
06 フレームを画像として書き出そう
Chapter3 レイアウトのベースを作ろう
01 ページとフレームを作って準備しよう
02 レイアウトガイドを設定しよう
03 画像やボタンの場所を決めよう
04 テキストボックスで文字を入力しよう
Chapter4 パーツを作ってレイアウトしよう
01 色のルールを色スタイルに登録しよう
02 フォントのルールをスタイルに登録しよう
03 ボタンを作ろう
04 アイコンと大見出しを作ろう
05 ヘッダーを作ろう
06 ヘッダーのメニューが開いた状態を作ろう
07 フッターのベースを作ろう
08 お知らせエリアのベースを作ろう
09 コンテンツカードのベースを作ろう
Chapter5 トップページのデザインを完成させよう
01 コンポーネントを複製して配置しよう
02 フッターを完成させよう
03 メイン画像エリアを作ろう
04 お知らせとコンテンツカードを作ろう
05 原稿を流し込もう
06 データを調整しよう
Chapter6 下層ページとプロトタイプを作ろう
01 下層ページを作ろう
02 ボタンにバリアントを設定しよう
03 プロトタイプで画面どうしをつなごう
04 インタラクションでハンバーガーメニューの開閉を設定しよう
05 バリアントにコネクションの設定をしよう
06 完成したプロトタイプを確認／共有しよう
