Figma • Natura11y
Sliced figs on a plate

Photo by Jade Stephens



Introducing Natura11y's Open Source Figma UI Kit

Natura11y's streamlined Figma UI Kit provides essential tools for interaction designers to create bespoke design systems, backed by a customizable front-end framework for a holistic design and development experience.

Get the Figma UI Kit

The Kit at a Glance

Natura11y's Figma UI Kit includes a collection of components, variables, and styles created with the same simplicity and ease-of-use as Natura11y's front-end framework. It doesn't give you everything, but includes the fundamentals so you can quickly iterate between design and development.

A snapshot of various UI elements.

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?

A Guide to Managing Icons within Figma

Once you open the Figma UI Kit, you'll notice that the icons are organized into a component library (within the Guide page). This allows you to easily update icons across your design system. It also makes it possible to export icons as SVGs, which can be used to generate your own icon font.

In this way, you can manage your icons both within Figma and on the front-end. This ensures that your icons are consistent and maintainable across your design system.

Step 1: Design the icon

You can create the icon directly in Figma. With the existing Natura11y icons, the original vector layers have been preserved within each component.

The final icon should fit within a 24x24 pixel square, with a pixel or two of breathing room around the edges.

A depiction of the icon design process in Figma.
A depiction of the icon design process in Figma.

Step 2: Create the icon component

Once you've designed the icon, it's time to create the icon component. Each component has a frame which contains the flattened vector icon layer. The frame is sized to 24x24 pixels, and named according to the icon's handle (or suffix). In a later step, this frame exports an SVG from Figma. With the example below, the frame is named accessibility.

The icon component contains a group called Artwork. It holds the icon's original layered shapes. The Artwork group should be used as reference or for modifications, otherwise it should remain hidden within the icon component.

An example of the icon component layers in Figma.
An example of the icon component layers in Figma.

Step 3: Modify the fill rule

This step is only required for icons that contain a hole or multiple paths. For example, the accessibility icon contains two separate paths: one for the head, and one for the body. To ensure that the paths are maintained as expected when the icon is exported as an SVG, you must modify the fill rule from Even-Odd to Non-Zero.

Thankfully, Evan Wallace has made a Figma plugin called Fill Rule Editor that makes it easy to do this.

Screenshot of the Fill Rule Editor plugin for Figma.

Step 4: Export the icon as an SVG

Now that the icon is ready, install the SVG Export plugin for Figma. This plugin, created by Hamish allows you to customize the export settings for each icon. Aim to remove any unnecessary attributes and keep the SVG as clean as possible. For example, you should remove any fill or stroke declarations. Ultimately, you want the export to only contain the parent SVG tag and paths that make up the icon.

The SVG Export plugin allows you to preview the code and visual icon before exporting. This helps to ensure the icon is clean and ready to use. Once you're satisfied with the SVG, export it to your local machine.

Screenshot of the SVG Export plugin for Figma.
Screenshot of the SVG Export plugin for Figma.

Step 5: Generate the icon font

The Natura11y Icons GitHub repo contains a folder called original-svg. This is where you should save the SVG file. It should be named according to the icon's handle (or suffix). With the example below, the SVG is named accessibility.svg.

Natura11y leverages Fantasticon to create the icon font.
Natura11y leverages Fantasticon to create the icon font.

The file in the natura11y-icons repository contains instructions on generating the icon font. Don't worry, it's easy! Now you can use your custom icon font within the Natura11y framework and maintain it directly in Figma.