Figma Toolkit

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

How to get the libraries #

  1. Sign into Figma using your Nordhealth email.
  2. Open a design file.
  3. Navigate to the Figma Menu then select Libraries.
  4. 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.

Components #

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.

Theming #

Nord Figma Toolkit supports theming natively in Figma using Figma Libraries. To get started with theming, follow the below instructions.

  1. Open the Libraries Window.
  2. Select the current color Library in use.
  3. Select the new library you would like to swap to.
  4. Check the box next to "Swap default styles in instances". This will allow you to accept Nord Figma updates and preserve your theming.
  5. Click swap library.

Please note that theming will only work with Nord Figma Toolkit if you have enabled the Nord Light Theme and Nord Dark Theme libraries earlier.

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.

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.

Support #

Need help with our Figma Toolkit? Please head over to the Support page for more guidelines and ways to contact us. For additional support specific to Figma, please reference the Figma Help Center.

Want to know more? Read our blog post on how we use Figma in the Nord team.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.

Edit page