IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Get Started

/

Design

Introduction

Uniform is Hudl’s design system. It exists to unify Hudl’s products through design () and code () implementation.

The system includes components, visual guidelines, language and additional resources to help you build more cohesive product interfaces.

Figma Library

Once you’re added to the Hudl Figma Team, enable the Uniform Library to get started.

With Figma you can easily insert any component and know it follows Hudl’s design standards—just follow the instructions below.

Enable the Library

In the Assets panel, click the Team Library icon and enable the Uniform Library.


  • If you need access to the Hudl Figma Team, ask for help in #design on Slack.
View the Library

Viewing everything in the library can be done either through list or grid view. Toggle between the two by clicking the icon next to the Team Library icon.

In both cases, hovering over a component will provide the description of intended use and tags for search.

  • Additional tags have been provided for fuzzy search to quickly and easily find the component you’re looking for. For example, searching for “trash” will bring up the Delete icon.
Use the Library

To use any component, drag and drop it onto the canvas. Change any of the component features using the layers in the Layers list.

In both cases, hovering over a component will provide the description of intended use and tags for search.

  • To change a component to the dark environment colors, select the layer and change the fill or text color style to the equivalent dark environment color.