Figma

Introducing Natura11y’s Open Source UI Kits

Natura11y includes two Figma UI kits: a complete 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 the complete 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

  The kit’s local variables align with Natura11y’s CSS variables. This ensures that your design system and front-end framework are in sync at the start.

• Modes = Theme Colors

  The UI Kit includes Figma’s modes 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 Sync Icons

  Natura11y’s icon library is included in the UI Kit. This allows you to design and sync icons between Figma and the front-end. 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.