Nord Figma Toolkit is a resource for exploration and collaboration. It contains all the building blocks for designing with Nord and allows you to build beautiful, accessible experiences rapidly.
Use our documentation for guidance on how to use the components in this toolkit. You can get started with the Nord Figma Toolkit by enabling the Nord Team Library inside Figma. Follow the below instruction for guidelines on how to do this.
Nord Team Library #
We offer access to the team libraries for Nordhealth team members. The libraries are
- Nord Figma Toolkit: Type, grids, and components for building digital products using Nord.
- Nordicons: Nord's icon library.
- Nord Light Theme: Color and effect styles for Nord Light Theme.
- Nord Dark Theme: Color and effect styles for Nord Dark Theme.
- Nordhealth Brand: Color, type, logo, and components for marketing and branding.
How to get the libraries #
- Sign into Figma using your Nordhealth email.
- Open a design file.
- Navigate to the Figma Menu then select Libraries.
- In the Libraries modal that appears, find the team called Nordhealth and switch the toggles beside the libraries called “Nord Figma Toolkit”, “Nordicons”, "Nord Light Theme", and "Nord Dark Theme".
Not a part of the Nord Figma team? #
If you're working with Nordhealth as an external partner, we can add you to our Figma Team. We recommend that you do all of your work in the Nordhealth Figma Team instead of an external team. Please contact our support to gain access.
Included in the library are the Nord components and their variants. To insert a component go to the Asset panel and find the component you would like to use. You can drag it from the asset panel onto the canvas.
If a component includes variants, you will see them displayed in the right sidebar.
Text, Color, Drop Shadow, and Grid styles in Nord Figma Toolkit can be found from the right sidebar in Figma.
Nord Figma Toolkit supports theming natively in Figma using Figma Libraries. To get started with theming, follow the below instructions.
- Open the Libraries Window.
- Select the current color Library in use.
- Select the new library you would like to swap to.
- Check the box next to "Swap default styles in instances". This will allow you to accept Nord Figma updates and preserve your theming.
- Click swap library.
Figma assets #
In addition to components, we've created Interface Templates that show our components in context. You can use this Figma Design File as an example of how to use Nord.
Nord Figma Toolkit
Nord Interface Templates
Nord Component Illustrations
Nord Light Theme
Nord Dark Theme
Versioning and changelog #
We follow Semantic Versioning for Figma Toolkit. Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, see our changelog.