Design Kit

The Design Kit is made in Figma, a cloud-based design tool used for user interface design. It includes a library of styles and components for designers to quickly apply to designs and prototypes for digital products. It is built iteratively and will be updated periodically with refinements and additions.

For access to the UCLA Design Kit in Figma, you must have a Figma user account. If you don’t have an account, you can sign up at figma.com.

Once you have a Figma account, you must request file access to use the library feature. Request access via email at designsystem@stratcomm.ucla.edu.

For details on what’s new, check the release notes below. For how to get the most out of Figma library features, see the documentation within the Figma file. All updates are pushed to the file automatically.

Using Figma

To get access to the UCLA Design Kit in Figma, you must have a Figma user account. If you don’t have an account then sign-up here. Request to access the UCLA Design Kit by filling out the request form.

After submitting the form, you will receive an email invite to view the UCLA Design Kit.

To use the UCLA Design Kit library, you will need to enable the library in your account settings. In the left side panel, click on your Name, then go to Settings. Scroll down to Library and you will need to Enable libraries for all files in your drafts.

Go to Other teams within the Libraries menu. Toggle the dropdown menu from “Off” to “All Files” to enable the design kit library for all files.

You should now be able to see all Design Kit components on the left bar. Simply drag/drop components onto your design file.

Styles Libraries

Once connected, you can apply style presets in the categories below from the Design Kit Library. Many of these are contextual based on selection or rollover of element in the right side panel in the Design section.

Select the object(s) you’d like to apply a Style to.

In the right side panel, click the Style icon next to the property you want to add or the name of the current style if you want to edit.

Layout Grid

Select the relevant Grid Style from the dropdown to match your frame. eg. if your frame is 375px wide then you can choose the ‘360 - 599 (4 Col)’ option, at either standard or compact density.

You can apply our preset grid styles to any frame on your designs from Layout Grid area of the design panel on the right of your Figma UI.

Text Styles

You can apply our preset styles to any text layer on your designs from Text area of the design panel on the right of your Figma UI.

Existing components already utilize these text styles and are designed to work with our typography system. The UCLA Components library needs to be enabled to access all the styles.

Color Styles

Color styles can be accessed from the Fill area of the design panel on the right of your Figma UI. You will see all of the color ramps of our system as well as the color tokens that help establish a meaningful, organized, systematic application of color across the system.

Component Library

Components are UI elements that you can reuse across your designs.

The Assets panel in the left sidebar allows you to search for components to add to your file. You can the grid view, list view, or search to find a specific component. To insert a component, find the component you would like to use. Drag it from the asset panel onto the canvas.

Variants

As you create layouts from the design system, you may find the need for components that are similar to each other, with only slight differences. These are called variants.

For example: you might have multiple components for buttons, with separate components for various states and sizes.

Component sets appear in the Assets panel alongside any regular components. So instead of looking for a specific variant in the Assets panel, you only need to select the component set. View the name of the component in the right sidebar. If the component has variants, you’ll see fields underneath the component name to configure the properties and values of that component set.