The UCLA Design System provides campus communications and IT teams with styles and components to create on-brand, consistent, accessible digital experiences on websites and digital products or platforms.
The UCLA Design System provides campus communications and IT teams with styles and components to create on-brand, consistent, accessible digital experiences on websites and digital products or platforms.
A design system serves as a single source of truth for design and development teams, providing them with a common language and a shared set of tools. This provides benefits to teams as outlined in “Design Systems 101” by Therese Fessenden, Nielsen Norman Group.
| Upcoming |
|---|
| Video Background Banner Add component based on customized WordPress Cover Block functionality. |
| Page Layouts Add additional common page layouts in Figma and provide accompanying code. |
| Past Milestones | |
|---|---|
| Design System 2.1.0 Update See Design System changelog and WP changelog for details. |  March 2024 |
| UCLA WordPress Theme & Plugin The UCLA WordPress theme and plugins will include styles, components, and assets with the default WP page templates along with documentation. | December 2023 |
| Design Page Layouts Styles and components are combined to create web page design layouts in Figma. Layouts are offered for use as a starting point for designers to help web pages across various screen sizes and can be used with all design kit components. | October 2023 |
| Design System Website 2.0 This is the website you’re looking at now. It contains the inventory, code and documentation for design system elements. | June 2023 |
| Design Kit 2.0 The source of truth for design system elements and what subsequent code is based on, this Figma design file can be used as a library by designers for website mock-ups | February 2023 |
For more visibility into project planning, see the UCLA Design System Roadmap on GitHub. See contact info below for GitHub access information.
There are currently no workshops scheduled.
Design System Overview
Tuesday, September 19, 2023
1:00 PM – 1:45 PM
Virtual
In this overview, the Strategic Communications Digital Team will give an overview of what a design system is, who it’s for, and how to get the most out of it. We will also walk through this year’s overhaul of the UCLA Design System which includes a rebuild Design Kit in Figma, rebuilt front-end components, added documentation, and a new WordPress Theme. We’ll also be on hand for questions and feedback.
Design System for Designers
Thursday, October 19, 2023
3:00 PM – 3:45 PM
Virtual
In this workshop, we will delve into the Figma supplement of our UCLA Design System, exploring its structure, components, and best practices for seamless collaboration and design efficiency. Whether you’re a seasoned designer or just starting your design journey, this workshop offers valuable insights and hands-on practice.
Design System for Developers
Thursday, November 2, 2023
3:00 PM – 3:45 PM
Virtual
The developer workshop will cover the practical use of the UCLA Design System by reviewing its documentation, exploring component code, discussing browser testing best practices, and showcasing real-world implementations. Participants will gain knowledge to use the Design System, understand component functionality, and learn how to contribute. The workshop focuses on using the Design System independently, not with WordPress themes or plugins.
We are looking into ways to leverage the work and ideas of the campus community for the design system. In the meantime, please see the contact info and bug reporting channels below.
For further information on releases or to get involved in design, development, maintenance, or support of the Design System, use the communication channels below.
For requests, issues, and/or support, please use the following UCLA Campus Community Slack channel #support-design-system
Email the Design System team at
DesignSystem@stratcomm.ucla.edu
To report bugs or issues with usage, use the GitHub project tracker. You must have a GitHub account to view. You may need access to the UCLA organization page and project repositories with 2-factor authentication. Contact the design system team with your GitHub handle for access information.