ChakraUIとデザイントークン
1.8K Views
June 22, 25
スライド概要
Chakra UIのテーマシステムを理解するために、デザイントークンについて知ってもらうための資料です。
関連スライド
各ページのテキスト
Chakra UIと デザイントークン ashphy @[email protected]
今日の目標 • Chakra UIのデザインシステムについて理解し、テーマを自由 に当てることができるようになる • デザイントークンについて説明できるようになる
このボタンの色はどう指定しますか？
このボタンの色はどう指定しますか？ #FFFFFF #2463EB
Switchも色指定しましょう #FFFFFF #2463EB
色が変わっちゃいました • Switchの色を変えてみよう #FFFFFF #EA580C
あれ、ボタンの色を変えるの忘れてた • すべて更新するのは大変！ #FFFFFF #2463EB
これらを解消するのがデザイントークン
デザイントークンとは • デザインに関する決定を名前付きで記録・保存するための 唯一の情報源 (Single Source of Truth) • 名前と値のペア colors.blue.600 ＃2563EB Name Value
グレーって200色あんねん Colors - Core concepts - Tailwind CSS
色をデザイントークンで定義する • Core Token (Primitive Token) • デザインの最小単位となる基本的な値 • 具体的な値（例：RGB値）に紐づく
色をデザイントークンで定義する Colors | Chakra UI
デザイントークンでスタイリングする white blue.600
画面にはボタンがいっぱい white white white blue.600 blue.600 blue.600
blue.600を調整すればすべて変わる white white white blue.600 blue.600 blue.600 一貫性
これでメデタシ？
あれ、一貫性がなくなってしまった blue.600 blue.700
セマンティックトークン • UIの「意味」や「文脈」に基づいて名付けられた抽象的な トークン bg colors.blue.600 ＃2563EB
セマンティックトークンで色を定義 Colors | Chakra UI
コンポーネントを再定義 bg bg
これで安心？
ダークモードに対応しよう どうすれば？
ダークモードに対応しよう .darkを追加してみる text text.dark bg bg.dark
ダークモードに対応しよう 値が増えたので指定を忘れるかもしれない text text.dark bg bg.dark
Conditional Styles • 特定の状態に応じて使われる値が変わるスタイル設定
Conditional Styles • 特定の状態に応じて使われる値が変わるスタイル設定 ライトモードで 使われる値
Conditional Styles • 特定の状態に応じて使われる値が変わるスタイル設定 ダークモードで 使われる値
一貫性のあるダークモード対応 • コンポーネントに指定するべき色は1つ → ダークモードだけ指定が抜けることがない
ダークモードだけなんでしょ？ • モバイル対応 → ディスプレイが小さい、ネイティブアプリ • TV対応 → ディスプレイがデカいが遠い • 高コントラスト対応 → 公共案件にありがち • 印刷対応 → 背景いらない
ボタンをアクセントカラーにしたい • Primaryに加えて別の色のバリエーションも追加したい
Virtual Color • 色の「役割」や「意味」に名前をつけて、状況に応じて自動的 に適切な色に変化する仕組み
本当のボタンのスタイル定義 colorPalette.contrast colorPalette = orange colorPalette.solid
デザイントークンは色だけ？
サイズもデザイントークン 4-Point Grid System
サイズもデザイントークン
Figma Variables • FigmaでデザイントークンはVaribalesで実装される
実際にデザイントークンを使う • Chakra UI Figma Kit を見てみよう
デザイントークンを使う • Chakra UI Figma Kit を見てみよう Figma
デザイントークンを使う • Chakra UI Figma Kit を見てみよう <Button size="md” variant="solid” colorPalette="blue”> Button </Button> Figma Chakra UI
Size & Space <Box w="24" h="8" borderRadius="4" bg="orange.200" /> Figma Chakra UI
Figmaで定義したデザイントークンを Chakra UIで利用する • Export Filtered Variables Plugin Chakra UIは互換性のあるフォーマット を採用しているが、規格がまだ定まって いないので全部は動かない
W3C Design Tokens Community Group • デザイナー／開発者／ツール間で“共通語”になること • (将来的には) Figmaで定義したデザイントークンをそのまま実 装に使うことができるようになる
まとめ • デザイントークンはデザインに関する決定を名前付きで記録・保存 するための唯一の情報源 • デザイナ/エンジニア/ツール間での共通言語になる • セマンティックトークンはUIの「意味」や「文脈」に基づいて名付 けられた抽象的なトークン • デザイントークンを使うことでデザインの一貫性を保ちやすくなり、 保守性が向上する 全部実践する必要はない
参考文献 • W3C Design Tokens Community Group • https://www.w3.org/community/design-tokens/ • Design tokens ‒ Material Design 3 • https://m3.material.io/foundations/design-tokens/overview • Building Consistent UIs with Design Tokens | Chakra UI • https://chakra-ui.com/blog/03-building-consistent-uis-withdesign-tokens
参考文献 • The Ultimate Spacing Guide for UI Designers • https://www.thedesignership.com/blog/the-ultimatespacing-guide-for-ui-designers • Figma tutorial: Intro to variables • https://www.youtube.com/watch?v=1ONxxlJnvdM • デジタル庁デザインシステムβ版 v2.4.0 • https://design.digital.go.jp/