本書は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：実装コードとの連携
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
翔泳社のプログラミング書籍の中から、入門・初級者向けの書籍をピックアップ！
【Linux本特集】入門～達人レベルまで！クラウド時代の必須知識Linuxを学ぶおすすめの本
ライティングのスキルアップにおすすめの本。Webライティングやコピーライティングなど
お金と経済の基礎知識から、資産形成・投資術、お金教育や介護まで。暮らしに役立つマネー本
おしゃれな部屋作りのヒントやインテリアの基礎知識、色使い、うつわや洋食器の知識まで、幅広い書籍をご紹介
Excel、日商簿記、業務の自動化を実現するRPAやPythonの技術など、事務職としてステップアップしたい人に！
