本書は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
2024年にSEshopで人気だった本を20冊ご紹介！IT技術、生成AI活用、マネジメント本など
翔泳社のプログラミング書籍の中から、入門・初級者向けの書籍をピックアップ！
【エンジニア必携特集】開発現場で使える！ITエンジニアの業務に役立つ書籍を一挙ご紹介
ライティングのスキルアップにおすすめの本。Webライティングやコピーライティングなど
毎日をもっと楽しく、充実させる手帳・ノートの活用術書をご紹介
第二種電気工事士、電験3種など、電気工事技術者関連の資格参考書はこちら
お気に入りに登録すると、気になる商品ページにすばやくアクセスできます。ご利用にはログインが必要です。