• Getting Started/

As a Designer

Learn About Cedar

  • Browse the library and familiarize yourself with our foundation, components, and naming conventions.
  • Run through the installation process outlined below.
  • If set up on Abstract, look across project files to learn how designers are using components.

Installation

Required Software

Sketch v51.x +

You should be very comfortable using Sketch. If you are a new designer, download the latest version of Sketch using the Self Service app installed on your mac. If Sketch isn’t available there, talk to your manager.

Google Drive

The Cedar UI Toolkit is distributed using Google Drive. This allows you to pull updates as they’re made available. Download Google Drive for your Mac. Choose the Personal version.

  1. Install Backup and Sync from Google
    1. Navigate to your local Applications folder by pressing Command + Spacebar and typing in your REI username.
    2. Drag Backup and Sync to your local Applications folder, not the system folder.
  2. Open Backup and Sync
    1. Sign in to Google using your REI email. If you don’t have your company email linked to Google, create an account.
    2. On the next step, uncheck unneeded folders.
    3. Check the “Sync My Drive to this computer” option to add Google Drive to your Finder.
    4. Click Start.
    5. Upon successful installation, you’ll get a notification on you desktop that Sync is complete.
    6. Finally, navigate to the Sketch Library folder in the REI Design System Google Drive, right-click the Cedar UI Toolkit file and “Add it to My Drive”.

Required Fonts

Sentinel

Install the font using Self Service on your Mac.

Roboto

Install the font using Google Fonts.

Sketch Library

Sketch Libraries enable us to sync and share system features across the team using Sketch Symbols. To install the Cedar Library:

  1. Add the Library to Sketch
    1. Open Sketch and navigate to Sketch > Preferences > Libraries in the menu.
    2. Click “Add Library…”
    3. Navigate to your Google Drive in Finder.
    4. Select the Cedar UI Toolkit.sketch file and click “Open.”
    5. That’s it! You can now add Cedar components to designs in other Sketch files.

Abstract

Abstract is another way that the UI Toolkit is distributed to your project. If you’re interested in learning more about Abstract or would like a demo, talk to your manager.
Learn more about Abstract

Sketch Measure

Make it a fun process to create specs for developers and teammates.
Download from Github

Sketchpacks

Manage and sync your Sketch plugins across machines and teams.
Download from Sketchpacks

Nudg.it

Change your large (shift+arrow) nudge from 10 to 8 to easily align with spacing system.
Download from Nudg.it

Annotating/Delivering Cedar-based Designs

The Cedar team suggests using Sketch Measure to label and shade Cedar components when redlining final designs. An advantage of working with the REI UI Toolkit is the name of the component symbols closely align to the names used in development. This provides a common language among the two teams and allows for smoother, more efficient handoffs.

Example of UI annotated to show what is a Cedar component as well as spacing variables:

Contributing Design to Cedar

One of the best ways to influence the visual language of the co-op’s digital products is by contributing to the design system. There are many ways to contribute: UX research, UI design, authoring, and editing, to name a few. If you’re interested in contributing talk to your manager.

Common Questions

How will I know when an update is available?

System releases are communicated through both #cedar-design-system and #cedar-design.

Depending on your Google Drive settings, you will either see a notification in Sketch immediately or have to manually initiate a sync to see the notification. Clicking on the update in Sketch will reveal what component designs have been updated.

I found a bug with the UI Toolkit (or some other Cedar service). How do I let you know?

Sorry about that. Please fill out and submit a Bug Report Form and the Cedar team will get it in our backlog.

I have an idea for an enhancement to the Cedar UI Toolkit. Who do I talk to?

Great! Your feedback is appreciated. If your addition is unique, you can submit a request to the Cedar team backlog.

Should I always update Sketch versions when it tells me to?

Updating Sketch is easy to do and ensures compatibility with the UI Toolkit. When prompted to update, simply install Sketch again using Self Service.

By not updating when the library does, you run the risk of the Sketch Library not loading. This has occurred with major Sketch releases (50.0) in the past. Minor releases (50.2) are less troublesome and have had minimal impact on the library updates.

Can I break the Library?

It’s possible to overwrite the shared Sketch library source file—breaking what’s real for all other users. Follow the Sketch Library steps closely and refrain from opening the source file housed on the Design System team’s Google Drive.

Do I need to install the Library for every new Sketch file?

No. Once you finish the installation process above, the Cedar UI Toolkit library will be available in Sketch’s Symbols menu for any file you open.