FIGMA VARIABLES × CSS

密度トークンを、CSSの条件にする

Figmaと同じcompact / cozyの設計をCSS変数へ。親の値を見て、子コンポーネントが切り替わります。

対応状況を確認中
01
DESIGN TOKEN Figma Variables
02
CSS CUSTOM PROPERTY --density: cozy
03
STYLE QUERY Children adapt

VARIABLE COLLECTION

Component density

2 modes
VARIABLE VALUE
card/padding 22 px
item/gap 14 px
type/title 16 px

POINT Figmaの値を、同じ意味を持つCSSトークンへ移します。

LIVE IMPLEMENTATION

同じ親の中で、子が一斉に適応

COZY
HS
FRONTEND ENGINEER Hiro Studio Design systems / CSS
COMPONENTS 128 ↑ 12 this week
COVERAGE 94% ↑ 4.8%
UI
Button tokens updated Spacing and label sizes are now aligned.
CORE CSS compact