Skip to main content
Web

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.

Anyone may access the Design Kit Figma file. However, you must request access to the Strategic Communications Team to have access to 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.

v.2 released May 2023 with all elements rebuilt. Specific notes below.

  • Documentation added for Figma library access and usage.
  • Documentation added to specify how to use components. Note: This will eventually be moved to a website resource.
  • All components completely redesigned for consistency and accessibility standards.
  • Updated layout grid and breakpoints.
  • Addition of section spacing guidelines.
  • Introduced new type scale system.
  • Removed “molecule” graphic from components.
  • Updated image aspect ratios.
  • Redesigned icon library and addition of guidelines for consistency.
  • Added alternate header option with the UCLA box logo.
  • Updated global footer to dark blue. “Report Misconduct” link added.
  • Updated email banner.
  • Updated person card to include pronouns.
  • Updated button sizes to meet touch target standards.
  • “Tags” renamed to “Chips” with new specs.
  • Redesigned event card.
  • Removed social cards.

Original set of components released January 2021 titled “Web Components.”