Designers
Learn how to set up your workspace, access design files, and apply system components efficiently.
We build on top of Material Design
Depending on the product, we build on top of versions 1 or 2 of the Material Design spec.
Older products were built on Material Design 1 standards and we still support those. All new products are starting from a Material Design 2 base, and these are what you'll find documentation for here.
Why Material Design?
It gives us proven components, patterns, and standards for color, typography, and spacing. It lets us focus our design efforts on customer-specific value rather than reinventing basic elements.
These docs cover our additions and any modifications we made to Material Design. It also covers our specific implementation details. For standard Material components, refer to Google's comprehensive documentation. Most component pages will have links in the additional resources section to the upstream Material Design spec for easy reference.
Figma
Our design tool of choice is Figma.
Initial setup
1. Log in to Figma
Visit figma.com and log in using your Teradata account.
2. Join the team
In the Figma app, join the Teradata UX team.
3. Bookmark these projects
Project name | Details |
|---|---|
Our most current design system resources, including our Covalent Figma library, symbols (icons) library, and new project starter template. | |
This is where we store the detailed design files. Each has a thumbnail that conveys its status. Tip: sort alphabetically to group things by status. |
4. Favorite these files
- Covalent Principles - All our foundational Figma components can be found in this library.
- Material Symbols - All the iconography we use throughout our products can be found here.
Some basic tips
Use base 8 measurements
All of our sizing follows a base 8 or base 4 measurement standard. This is better for UI design because it allows pixel perfect doubling of numbers, starting with the smallest: 1x1 pixel. Double it once, and you have 2x2 pixels, then 4x4, 8x8, etc.
This prevents us from getting into situations where anti-aliasing happens on small icons, thin lines, and elsewhere.
Tweak Figma to make this easier in your daily life. Open the Figma menu > Preferences > Nudge amount and set the "Big nudge" value to 8.