Figma forデザインシステム―デザインを中心としたプロダクト開発の仕組み作り [単行本]

Figma forデザインシステム―デザインを中心としたプロダクト開発の仕組み作り の 商品概要

• 要旨（「BOOK」データベースより）

  ＵＩデザイナーとして一歩先に行くために。本書はＦｉｇｍａを使ったデザインシステムの構築方法が学べるチュートリアルです。「デザインシステムとは何か」から始まり、実践を通して「どのように作るのか」を学べます。具体的な作例を用いて段階的に構築していくので、「デザインシステムに興味があるけど何から始めてよいかわからない」といった方や、Ｆｉｇｍａの初歩的な操作方法を理解している方のステップアップとしても最適です。「デザインシステムはまだ必要ない」という方でも、本書で解説する機能を使いこなせば、既存のデザインプロセスを改善できるはずです。

• 目次

  Chapter 1：デザインシステムを知る
  1-1. デザインシステムとは
  1-2. デザインシステムとFigma
  1-3. デザインシステムの始め方
  Chapter 2：プロフェッショナルなFigma
  2-1. 学習の準備
  2-2. オートレイアウト
  2-3. コンポーネント
  2-4. バリアブル
  2-5. 開発モード
  Chapter 3：デザインシステムをはじめる
  3-1. ファイル構成
  3-2. チームライブラリ
  3-3. カラーパレット
  3-4. アクセシビリティ
  Chapter 4：デザイントークン
  4-1. デザイントークンを定義する
  4-2. セマンティックカラー
  4-3. デザイントークンを使う
  4-4. モードの切り替え
  Chapter 5：タイポグラフィ
  5-1. 書体とスケール
  5-2. 行間と文字間隔
  5-3. タイポグラフィのデザイントークン
  Chapter 6：デザインシステムの拡充
  6-1: イコノグラフィ
  6-2: エレベーション
  6-3. そのほかのスタイル
  6-4. ルールを適用する
  Chapter 7：パターンライブラリ
  7-1. レイアウトのルール
  7-2. 画面サイズ別のレイアウト
  7-3. コンポーネント
  7-4: ドキュメント
  Chapter 8：実装コードとの連携
  8-1. デザイントークンの連携
  8-2. Storybook

• 内容紹介

  UIデザイナーとして一歩先に行くために
  

  本書はFigmaを使ったデザインシステムの構築方法が学べるチュートリアルです。「デザインシステムとは何か」から始まり、実践を通して「どのように作るのか」を学べます。具体的な作例を用いて段階的に構築していくので、「デザインシステムに興味があるけど何から始めてよいかわからない」といった方や、Figmaの初歩的な操作方法を理解している方のステップアップとしても最適です。「デザインシステムはまだ必要ない」という方でも、本書で解説する機能を使いこなせば、既存のデザインプロセスを改善できるはずです。

  ●本書の目的
  1.プロダクト開発全体を効率化し、エンドユーザーへの価値提供に集中する大規模なプロダクトで素早く改善サイクルを回す
  2.デザインの一貫性、拡張性、保守性を向上させる
  3.開発チームのコラボレーションを強化する
  

  〈こんな人のための本です〉
  ・Webデザイナー
  ・UI/UXデザイナー
  ・サービスやプロダクトの開発者

  〈目次〉
  Chapter 1：デザインシステムを知る
  Chapter 2：プロフェッショナルなFigma
  Chapter 3：デザインシステムをはじめる
  Chapter 4：デザイントークン
  Chapter 5：タイポグラフィ
  Chapter 6：デザインシステムの拡充
  Chapter 7：パターンライブラリ
  Chapter 8：実装コードとの連携

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  沢田 俊介(サワダ シュンスケ)
  ＵＩ／ＵＸデザイナー、グラフィックデザイナー、プロダクトマネージャー、ソフトウェアエンジニアなど、幅広いポジションで１５年以上ものづくりに携わる。国内外問わずフリーランスとして活動、スタートアップ企業や新規事業を中心としてウェブ開発とモバイルアプリ開発を多数経験。現場で身につけたスキルをもとにオンライン講座を公開しており、４０，０００人以上の受講生から高い評価を得ている

Figma forデザインシステム―デザインを中心としたプロダクト開発の仕組み作り の商品スペック