08 / Design tree & responsive constraints

A frame becomes a page.

A local design fixture becomes real semantic HTML. Give the frame a layout direction, bounds and shared spacing, then see how the output survives a smaller parent.

LOCAL DESIGN TREE

01 · Semantic names
02 · Parent owns direction
03 · Bounds before pixels

AVAILABLE PARENT

Static view · less motion

Motion starts only when requested. All inputs are local.

What this study teaches

A local design-tree fixture is rendered into a section, header, article and native action. Prepared and fixed-frame modes expose the effects of logical sizing, min/max bounds and shared spacing variables without connecting to Figma or WordPress.

Independent implementation informed by “From Figma to WordPress in Minutes with Kirki”, Kirki, Codrops. This is newly authored code and artwork, not a recovered original project. Do not imply a connection to Figma or WordPress when the example uses a local fixture. The same underlying article can support a shared study for both retained IDs.