デザインの学校 これからはじめるFigmaの本（技術評論社） [電子書籍]

デザインの学校 これからはじめるFigmaの本（技術評論社） の 商品概要

• 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 完成したプロトタイプを確認／共有しよう
  

デザインの学校 これからはじめるFigmaの本（技術評論社） の商品スペック