本書は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
[特集]テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身…
[特集]入門書から専門書まで、人工知能関連のおすすめ本をご紹介！
[特集]第二種電気工事士、電験3種など、電気工事技術者関連の資格参考書…
[特集]ベンダー資格に関する書籍を試験ごとに紹介！ベンダー資格試験対策…
[特集]基本的な描き方から高度なテクニック、デジタルツールの使い方まで…
[特集]介護職を目指す人の試験対策書、現場スタッフのための実務書など、…
お気に入りに登録すると、気になる商品ページにすばやくアクセスできます。ご利用にはログインが必要です。
