Welcome to the Cedar Design System! Cedar is used as a foundation for REI's digital products, creating consistency by linking UI elements to documentation (this site) and code. Visit "About" for more information about Cedar and design systems.

First, install Figma

Figma is REI's design tool of choice and houses Cedar's UI toolkits. You can use Figma on a web browser, but you'll get the most out of it if you download the desktop app.

The Figma desktop app can be accessed using a tool called "Self Service." On a Mac, you can access Self Service by opening your applications folder and navigating to Self Service or opening Spotlight Search and searching for Self Service. In Self Service, search for "Figma" and install. If you need help or have problems installing Figma, please contact REI's IT Help Desk.

REI typefaces are automatically distributed through Figma, so you won't need to install any fonts. However, if you plan on using REI typefaces in other applications you can install "Stuart TTF • Digital" and "Graphic TTF • Digital" through Self Service, using the same method as outlined above.

New to Figma?

Check out some resources to get you started

Watch these videos

Duplicate & follow along with this tutorial

What to do next

1. Explore some of REI's guidelines to help you give a better understanding of the coop's visual and verbal standards. The DAM (Digital Asset Manager) houses many of these guidelines as well as other important assets you'll need. You'll need to request access before viewing documents on the DAM, but the process is fairly quick (about 1-2 days).

Brand guidelines

Photography style guide

UX copy best practices

2. Read about Cedar foundations

These foundational elements are core to designing with Cedar. For more guidance on Foundational elements, see Resources below.

3. Review Cedar components

Components are the building blocks to creating an interface. Note that the components listed on this site will mirror those available in the Figma Web Components Toolkit

Cedar UI libraries

There are a number of Figma UI libraries that house the Cedar design system. These libraries, as well as a few others, will be pre-loaded when you create a new file within the REI Figma ecosystem. In order to take advantage of all that Cedar offers, doublecheck to make sure that these libraries are turned on (and turn off libraries from other teams that you might not need).

For more information on Cedar UI libraries, check out this tutorial (opens new window) about turning on library assets in Figma.

Resources

File setup

Typography

Color

Connect with us

The team is available for questions or one-on-one help. Connect with us on the Slack channel #cedar-user-support, join office hours (reach out to the team for an invite), or sign up (opens new window) for 1:1 help.

Please feel free to reach out to the team to get help, identify defects, request features, or contribute. Connect with us on the Slack channel #cedar-user-support or join our office hours (reach out to the team for an invite), or sign up for 1:1 help.

Up next: Hand-off Process