14 Tokens Synced
Design Tokens
トークンを変えるだけで、デザインのすべてが変わる。テーマもカスタマイズも、驚くほどシンプル
0
トークンカテゴリ
0
セマンティックカラー
0
タイポスケール
0%
Figma同期
Colors
ブランドカラーからUI用途別カラーまで
Ag
Bold 700Regular 400
Typography
書体、サイズ、太さの組み合わせ
Spacing
要素間の余白とレイアウト間隔
Shadows
UIの深さと浮き上がりを表現
Border Radius
角の丸みで柔らかさを調整
Border Width
境界線の太さで強調レベルを制御
Breakpoints
画面サイズに応じたレイアウト切替
z-Index
要素の重なり順を管理
Opacity
要素の透明度で視覚的な階層を表現
Icon Sizes
用途別に最適化された6段階サイズ
Duration
アニメーションの速さを統一
Easing
動きの加速・減速カーブ
Scale
押下やアニメーションの拡縮効果
Animation
UI要素の出現・状態遷移モーション
Single Source of Truth
すべてのデザイントークンはfigma-tokens.jsonを基準として管理されています。npx sync-tokensを実行すると、すべての配布ファイルが自動生成されます。
figma-tokens.json → CSS · JS · TS · Tailwind v3/v4 · JSON