Get started with the design system (for designers)

If you’re a designer, start here to find everything you need to use the design system and prototyping kit.

About the prototyping kit

The Ontario Design System prototyping kit is a set of pre-built components and styles that you can use to design your website or application.

The prototyping kit is hosted on Figma. Figma is a free design tool that you can install on your computer or use in your web browser. It can be used to create:

• mockups of user interfaces
• prototypes for usability testing

If you’re new to using Figma, check out our list of links to Figma help and tutorials.

Request access to the prototyping kit

The design system prototyping kit is published as a team library on Figma.

1. Create a Figma account if you don’t have one already.
2. Email design.system@ontario.ca and tell us the email you use for your Figma account. We monitor our inbox Monday to Friday, from 9 a.m. to 5 p.m. ET. We’ll email you back as soon as we’ve granted you access.
3. Once we’ve confirmed you have access to the kit, log into Figma with the email you provided.
4. Create a new design file or open an existing project.
5. On the left sidebar, select “Assets,” then select the Team Library icon.
6. Enable the team library by selecting the toggle next to the Ontario Design System prototyping kit.

You should now have access to the components, grid breakpoints, colours and font styles.

Once you have added the team library, you will automatically receive any component updates or additions that we publish in the future.

Install the design system fonts

The Ontario Design System primarily uses two font sets: Open Sans and Raleway modified. You need to install the fonts in order to use the prototyping kit.

1. Download the Ontario Design System fonts
2. Install the fonts on Windows or Mac.
3. If you’re using the desktop app, you can use the fonts right away. If you’re using Figma in your browser, you must download the Figma font installer.

Learn more about fonts and typography.

Add the grid to your project

The grid system is a fundamental part of your design frame. It divides the page into columns and provides structure to your design.

It helps you align components to specific breakpoints (such as desktop, tablet or mobile) and helps the developers you’re working with know what to code for the different devices.

By using the grid, you can be sure that you’re starting from the default design system canvas.

1. Create a new frame or click on an existing frame in your document where you would like to apply the grid style.
2. On the right sidebar, select the four-dot icon in the “Layout Grid” section.
3. If you’ve already added the team library, you should see desktop/tablet/mobile grid breakpoints available. If not, refer to the instructions in how to set up the kit to add the team library.
4. Select the desired breakpoint and drag it over to your frame.

Using the prototyping kit

Once you’ve set up the prototyping kit, installed the fonts and added the grid to your frame, you’re ready to start building prototypes.

Start building by dragging and dropping components onto your frame.

1. Make sure you’ve added the team library to your Figma account.
2. Select the “Assets” tab in the left sidebar.
3. Select the Ontario Design System UI prototyping kit dropdown to reveal all of the available components.
4. Start using the toolkit by selecting a component to reveal:
   1. different breakpoints for that specific component
   2. variations of the component
   3. interaction states such as default, focused, hover and active
5. Once you’ve found your desired component, drag and drop it into your Figma frame.

Tips

Browse for components by using the search bar

If you have other libraries added, they will also appear in your search. We recommend turning off the other libraries to make sure you’re only looking at the prototyping kit components.

Change the way components are shown in the library

The default is “Show as grid.” Toggle it to “Show as list” and it will show you the components as a list.

Change a component’s interaction state directly in your frame

After you’ve dropped a component into your frame, you can change its interaction state in the right sidebar, under “Swap instance.” This only works for components that have different states.

Figma help and tutorials

Other design tools

The Ontario Design System uses Figma because:

• the free version is available
• the app is available on Windows or Mac, or it can be used in your browser if you don’t have permission to install software
• the Team Libraries feature allows us to publish updates that automatically synchronize to all users

The prototyping kit is not available for Adobe XD, Axure or Sketch.

Users familiar with those tools should find it straightforward to work with Figma. The advantage of having access to the pre-built design system components and styles should compensate for any initial learning curve.