エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能（インプレス） [電子書籍]

エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能（インプレス） の 商品概要

• ITエンジニア向けFigma入門書の決定版
  　本書は、エンジニアがFigmaを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです。
  　オートレイアウトやコンポーネントといった中核機能を、Flexboxのような配置ルールやプログラムの部品化といったエンジニアに馴染みのあるロジックと結びつけて体系的に整理。さらに、変数（Variables）によるデザイントークン管理や、開発効率を飛躍的に高めるDev Mode、実機に近い挙動を確認できるプロトタイプ機能まで網羅しています。
  　全体を通し、無償のスタータープランで取り組めるハンズオン形式を採用。実際に「受注一覧画面」を構築しながら、デザインの背後にある構造を読み解く「エンジニアの勘所」を凝縮しました。デザインと開発の境界をなくし、チーム全体の生産性を高めるための知識を提供します。
  　「デザインデータは見る専門」だったエンジニアはもちろん、Webデザイナーとの連携に課題を感じているすべてのエンジニアにおすすめの一冊です。
  

• 目次

  表紙
  はじめに
  目次
  第1章　無償版でFigmaの基本を理解する
  Figmaとは
  Figmaの特徴
  無償プランと有料プラン
  Figma（無償版）を使ってみる
  Figmaの基本
  プロジェクトやファイル、チームの登録
  操作のコツをマスターする
  本章のまとめ
  第2章　デザインシステムを理解する
  デザインシステムとは
  Figmaでデザインシステムを作成する
  フレームとは
  本章のまとめ
  第3章　オートレイアウトのプロパティ設定
  グループ化したUI要素のプロパティ設定
  オートレイアウトのプロパティ設定
  本章のまとめ
  第4章　コンポーネントとインスタンスを活用する
  コンポーネントとインスタンスについて
  コンポーネントとインスタンスを作成
  バリアントの基本
  バリアントの特性
  本章のまとめ
  第5章　デザイントークンで標準化
  デザイントークン
  デザイントークンを3層に分類
  デザイントークンの設計
  本章のまとめ
  第6章　スタイルでテキストのデザインを統一する
  スタイルとバリアブル
  スタイルとバリアブルの使い分け
  スタイル「テキスト」の設定
  デザインにスタイルを適用
  本章のまとめ
  第7章　バリアブルとコレクションでカラーを標準化
  カラーのプリミティブトークンを作成
  エイリアストークンを作成
  デザインにエイリアストークンを適用
  本章のまとめ
  第8章　エフェクトと文字列、数値の標準化
  エフェクト
  スタイルでエフェクトを作成
  文字列のバリアブルを使ってみる
  数値のバリアブル
  本章のまとめ
  第9章　Atomic DesignでUIパーツを設計する
  Atomic Designとは
  アイコンの追加
  アイコンの色の設定
  ボタンの追加とアイコンの適用
  本章のまとめ
  第10章　フッターをモジュール化する
  画面サイズの基本方針
  レスポンシブデザイン
  フッターの作成とオートレイアウト設定
  コンポーネント化の是非
  インスタンスに変更を加えたい場合
  本章のまとめ
  第11章　ヘッダーの設計と階層管理
  画面のカラーデザインの方針
  カラーバリアブルの追加
  ヘッダーの作成
  ヘッダーに含めるUI要素を作成
  他のUI要素を作成してヘッダーに配置
  UI要素を左右に配置
  本章のまとめ
  第12章　ステートベースドデザインを理解しよう
  コンポーネントとは
  スタイルとバリアブルの追加
  土台のフレームを作成
  テキストボックスの作成
  最大値と最小値の設定
  ステートベースドデザイン
  ステートベースドデザインの適用
  本章のまとめ
  第13章　コンポーネントプロパティ
  テキストボックスのバリアント作成
  テキストボックスのバリアント化
  コンポーネントプロパティ
  コンポーネントプロパティ「テキスト」を使用
  数値入力ボックスと日付入力ボックス
  本章のまとめ
  第14章　コンポーネント化の判断
  画面の構成
  タイトルバーの作成準備
  タイトルバーのデザイン
  検索セクション
  Style Organizer
  Tokens Studio for Figma
  キーワード検索
  本章のまとめ
  第15章　グリッドとテーブル
  検索結果セクション
  オートレイアウトのネスト構造
  アプリケーションのデザイン
  本章のまとめ
  第16章　Figmaのその他の機能
  プリセットと制約とtab移動
  コンテンツを隠す（Clip content）
  マスクとして使用
  複数のシェイプの組み合わせ加工
  プロトタイプ
  プロトタイプで画面遷移を体感
  マッチングレイヤーとスマートアニメート
  本章のまとめ
  【付録Ⅰ】　これだけは覚えておきたい10の操作と10のコツ
  【付録Ⅱ】　Figmaのアイコン一覧
  索引
  著者プロフィール／媒体紹介／本書情報および正誤表のWebページ
  奥付
  

エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能（インプレス） の商品スペック