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, education license or above and an invite to the Strategic Communications team space. If you don’t have an account then sign-up here. Request to access the team space via email.

The UCLA Design Kit library will need to be enabled to access all the styles and components. In the left side panel, click on the book icon in the Assets panel to access available libraries.

Locate the UCLA Design Kit inside the Library dialog box and toggle switch on.

Styles Library

Once connected, you can apply style presets in the categories below from the Team 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.

Variations

As you create components and build out your design system, you’ll find the need for components that are similar to each other, with only slight differences.

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.