Figma

Introducing Natura11y’s open source UI kits

Natura11y includes two Figma UI kits: a Hi-Fi UI Kit and a Lo-Fi (wireframe) UI Kit. The kits can be used separately or together on the same project.

Hi-Fi UI Kit

The Natura11y Hi-Fi UI Kit is a Figma design system kit for the framework.

It includes visual foundations, reusable components, local variables, theme modes, icons, and example layouts that align with Natura11y’s front-end patterns.

Key features

The UI Kit includes the following features:

• Local variables

  Foundation variables in the kit correspond to Natura11y’s CSS variables, giving designers and developers a shared starting point.

• Modes = theme colors

  The UI Kit includes Figma’s modes (opens in a new tab) that mirror Natura11y’s dynamic color theming. No need for duplicative variants for color options. Keep your design system small and manageable, and apply color across components and pages with ease.

• Design and manage icons

  Natura11y’s icon library is included in the UI Kit. You can design icons in Figma and export them for use in Natura11y’s icon library. Why pay or subscribe to an icon library when you can create and manage your own for free?

  • Managing Icons with Figma

Lo-Fi UI Kit

The Natura11y Lo-Fi UI Kit is a lightweight wireframe kit for early design work.

It includes simple page sections, layout patterns, and interface blocks for exploring content, hierarchy, and flow before visual design decisions take over.

Use it when you want to move quickly while still working within the Natura11y ecosystem.