本書は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
ITエンジニアにぜひ読んでいただきたい、翔泳社のロングセラーコンピュータ書を厳選
ネットワーク／サーバー／セキュリティを学ぶなら読んでおきたいおすすめの書籍
テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介
HTML/CSS、JavaScript、UI/UX、デザインまで。Web制作・フロントエンド開発に役立つ本
マーケティングの勉強におすすめの本。基本から実務に役立つ戦略設計まで
介護職を目指す人の試験対策書、現場スタッフのための実務書など、介護職に役立つ本
お気に入りに登録すると、気になる商品ページにすばやくアクセスできます。ご利用にはログインが必要です。
