Skip to main content

Design System Figma library available now

· 2 min read
Joe Cooper
Joe Cooper
DHIS2 Core Team

The DHIS2 Design System is now available as a Figma Community library.

Click here to open the library in the Figma Community.

The file has Design System components, colors and example layouts that you can use in your Figma files. Build realistic, interactive prototypes with all the same components and elements that are available in the DHIS2 Design System and UI.

New to Figma and want to start prototyping and designing DHIS2 applications? Click here to check out Figma's getting started guide.

How to use the Figma library?​

If you have a paid Figma account

Users with a paid Figma account can duplicate the community library and use it as a shared library. This gives you access to all the components and colors in all your Figma files. Click here to learn about libraries in Figma.

If you have a free Figma account

Users with a free Figma account can still use the Design System library. Duplicate the file to your Figma workspace, then copy and paste the components you want to use into your Figma file. Each component Figma page has a reference sticker sheet where example components can be copy and pasted from.

Check out the Readme page in the Figma file for more details about components, colors and fonts.

Organization​

Each component or element, like Button or Colors, is set up as a page in the Figma file. Every page has an overview with links to documentation, live demos and example components for quick copying to your files.

Functionality​

Component variants are used to make the Figma components flexible but manageable. Most components are a single element with multiple variants that offer different sizes, states and types. Check out the variants panel in the right sidebar when viewing the components to see which variants are available.

Complex components, like the Transfer and the Organization unit tree, are built as example components with multiple sub-components. The common use cases for these components are provided as example components. The sub-components can be combined to make different types of these complex components.

Updates and changes​

The library will be updated with new and adjusted components as they are added to the Design System. Duplicated Figma files don't update automatically, so check back occasionally to update your copy of the Design System.