Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り(沢田 俊介)|翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り

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


形式:
書籍
発売日:
ISBN:
9784798181493
定価:
3,080(本体2,800円+税10%)
仕様:
B5変・280ページ
カテゴリ:
パソコンソフト
キーワード:
#OS・アプリケーション,#ビジネスIT,#グラフィックソフト・ツール,#Web・アプリ開発
紙の書籍

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:実装コードとの連携

画像01

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

本書は付属データの提供はございません。

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。

  • サポートページのご案内

    本書のサンプルファイルや正誤情報は以下のサポートページをご覧ください。
    https://ds.figbook.jp/
この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付(書籍の最終ページ)に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2024年07月25日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 148
側注
2刷
「Memo」の下に以下の「Memo」を追加します。

(画像クリックで拡大)
2024.07.25
1刷 178
1つめの画像、2つめの画像
2刷
1つめの画像
(画像クリックで拡大) 2つめの画像
(画像クリックで拡大)
1つめの画像
(画像クリックで拡大) 2つめの画像
(画像クリックで拡大)
2024.07.25
1刷 178
「◎文字間隔の調整」の本文1~5行目
2刷
小さな文字でも読みやすい「BIZ UDPGothic」ですが、文字間隔が少し 詰まりすぎています。アクセシビリティのガイドライン(WCAG 2.1)では、 文字間隔をフォントサイズの0.12%以上にすることをレベルAAの達成基 準としていますが、0.12%ではまだ詰まって見えており① 、3%の文字間 隔を設定したテキストの方が読みやすい印象です② 。
小さなサイズでも読みやすい「BIZ UDPGothic」ですが、初期状態では 文字と文字との間隔が詰まりすぎており① 、文字間隔に3%を設定した テキストの方が読みやすい印象です② 。なお、アクセシビリティのガイド ライン(WCAG 2.1)では、文字間隔をフォントサイズの0.12倍(12%)以 上にすることをレベルAAの達成基準としています。

2024.07.25に修正内容を更新しました。
2024.05.15