• Getting Started/

As a Designer

Instructions on this page are for internal REI designers only.

# Learn About Cedar

  • Browse the Cedar Design System documentation and the UI Toolkit Library to familiarize yourself with our foundational styles, components, and naming conventions
  • Run the Cedar UI Toolkit installation process outlined below for Abstract and Sketch
  • Review project files in Abstract to understand how designers are using components

# Installation

# Required Software

# Abstract

Abstract is used to distribute the Cedar UI toolkit and allows for:

  • Version control of design files
  • Collaboration and the ability to view project history
  • Secure backup to REI servers

Download the latest version of Abstract through REI's Self Service application. Install the software to your local user application folder:

  1. From your desktop use the shortcut Shift+Command+C to access your Mac disks.
  2. Navigate to your local application folder, Macintosh HD > Users > 'yourUserName' > Applications.
  3. Move the downloaded Abstract app into this application folder.

If you have any issues with installation, visit the Abstract help center or talk to your manager.

# Sketch (latest version)

If you are a new designer, download the latest version of Sketch using REI's Self Service application installed on your Mac. If Sketch isn't available there, talk to your manager.

# Required Fonts

To Install, open REI's Self Service application, search for 'Cedar', and install the following fonts:

  • Stuart TTF · Digital
  • Graphik TTF · Digital
screenshot

A few things to remember:

  • The Stuart and Graphik "OTF · Print" font variants available on Self Service are not compatible with the Cedar Sketch Toolkit
  • The TTF font variants have "App" after their name in applications like Sketch or FontBook. For example, "REI Stuart App" and "Graphik App". Please only use these TTF versions in any digital design

# Legacy Fonts

Do not use the Legacy fonts in new designs as they are no longer part of Cedar. You'll still need to install them so that the old design files render properly. Similarly, Roboto is still used in many Cedar components and is required for the Cedar Sketch Toolkits to work properly.

To Install, open REI’s Self Service application, search for, and install the following fonts:

  • Roboto
  • Sentinel
  • Plak

Cedar SVGO Compressor
Export icon svgs in a Cedar-compliant format and optimize other svg exports.
Download the .sketchplugin zip | Learn more on github

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

Symbol Swapper
Swap the selected symbols and/or symbol instances to another master, or swap entire libraries.
Install with Sketchpacks

Symbol Instance Renamer
Rename symbol instances to the name of their master. Makes symbols easier to find using Command+F.
Install with Sketchpacks

Stark
Simulates color blindness and easily checks contrast.
Install with Sketchpacks

# Cedar UI Toolkit

Note: Cedar's UI Toolkit is only available for REI employees and approved third-party vendors. If you are an external vendor that needs access, please email cedar@rei.com.

# Toolkit Versions

The Cedar Sketch UI Toolkit provides reusable patterns and styles using Sketch symbols, Text Styles, and Layer Styles. There are 3 Toolkit versions of Cedar:

  • CDR Toolkits · vCurrent: Present; this is the current stable release of Cedar and will be updated on our regular release schedule. This is the version you'd use in most cases
  • CDR Toolkits · vNext: Future; the next version under development and constantly changing
  • CDR Toolkits · vLegacy: Past; if you need an older version of the Toolkit, it is archived here. Use this only if you cannot use vCurrent or vNext

# Toolkit Libraries

Each Toolkit project version contains different editions of the same 4 libraries:

If you need to switch between Toolkit versions (for example, from CDR Tokens · vCurrent to CDR Tokens · vNext), use the Linked Library Swapping process detailed below.

# Using the Toolkit

To link the UI Toolkit to your Abstract project:

  1. Find and sync the CDR Toolkit projects you want to use.
    screenshot
  2. From your new or current project, navigate to Branches > Your-Branch > Files and click on the Add File button. From the drop down, select Link Sketch Library.
    screenshot
  3. From the list of projects on the left, select the libraries you'll need. After selecting a file on the right, click on the Link Library button to add it to your project.
    screenshot
  4. The linked libraries will appear at the bottom of your page list for the project file.
    screenshot
  5. That's it! You can now add Cedar components, icons, text styles, or layer styles to the artboards in your project's Sketch files.
    screenshot

# Updating the UI Toolkit

# Sketch Update Notification

Cedar releases are communicated through both #cedar-user-support and #cedar-news.

If the UI Toolkit is linked to your project files, updates will automatically be available.

screenshot

If a symbol within the Cedar UI Toolkit has been updated or changed, you will receive a Library Updates Available notification in the upper right corner of the Sketch application. You will then be prompted to upgrade the symbols being used within your project. You can decline updates at any time, but will have to manually relink the symbols, text styles, and layer styles if you choose to update later.

# Linked Library Swapping

If you need to replace one version of a linked library with another in a different project, follow the instructions below. Note that these libraries must be different versions of the same library and contain the same symbols. For example, replacing CDR Icons • vCurrent with CDR Icons • vNext.

  1. Add the new version of the linked library:
    Your-Project > Branches > Your-Branch > Files > Add File > Link Sketch Library > ReplacementLibrary.sketch > Link Library
    screenshot
  2. For each file in the project referencing the old library, update the reference to the new library:
    Your-Project > Branches > Your-Branch > Files > Your File > Right-Click > Manage Libraries
    screenshot
  3. Match the old version of the library to the new version and click Apply Changes.
    screenshot
  4. Validate that the file is referencing the new library.
    screenshot
  5. Now, remove the old linked library:
    Your-Project > Branches > Your-Branch > Files > Linked Libraries > LibraryToUnlink.sketch > Right-Click > Unlink Library > Stop Using as Library
    screenshot
  6. Lastly, open the file, click the Library Updates Available notification in the top right of sketch, and accept the updates. screenshot
  7. That's all! Now the new library version is available in place of the old. screenshot

# FAQ

# Google Drive

# How can I transition from the Google Drive version?

Previously, the UI Toolkit was available using Abstract or Google Drive. Now, the UI Toolkit is only available using Abstract. If you need to relink symbols from the old Google Drive distributed version, use the Symbol Swapper Plugin. If you need extra support, contact the Cedar team using the #cedar-user-support Slack channel or visit Cedar's office hours.

# Abstract

# Do I need to install the Library for every new Abstract project file?

You will need to add the UI Toolkit for every new project you create in Abstract. Once the library is linked within a project, you will be able to access it through any Sketch file within your project.

# Sketch

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

Yes! You should update Sketch when a new version is available. Note that a major Sketch release may prevent the UI Toolkit from loading. You can update Sketch using REI's Self Service application.

# Can I break the Library?

You cannot break or change the library when viewing the library in your project files or having the UI Toolkit opened "Untracked"

# How can I fix a bug or make an improvement to the toolkit?

You can create a branch of the Cedar library to make the changes yourself, or reach out to the Cedar team using the #cedar-user-support Slack channel to report a bug.

# Advanced Abstract Methods

Below are some advanced techniques that the Cedar team uses internally. They may help you too!

# Cross-Project Merge

If you need to merge a file from a project into a duplicate file in a different project, follow these steps. Note that the files must originate from the same file. This is useful for keeping multiple versions of the same files in different projects.

  1. Download the new-version.sketch file to your computer:
    Navigate to the new-version.sketch > Right-click > Export > Save to your computer.
    screenshot
  2. Create a new branch containing the old-version.sketch.
  3. Replace the old-version.sketch file with the new-version.sketch file:
    Navigate to the old-version.sketch > Right-click > Replace > Select the new-version.sketch that you saved in step 1.
    screenshot

# Multi-Project Syncing Strategy

Note that to keep multiple versions of the same project in sync, all synced projects must originate from the same project.

All vNext changes take place after all vCurrent changes in their commit order, which alters the order of the changes between the vNext and vCurrent branches.

screenshot

After each project has been updated independently, sync the projects again and make a new major release from a beta branch.

  1. Restore the youngest vNext ancestor branch that had vCurrent merged into it:
    vNext > Branches > Archived > (Youngest common ancestor branch with vCurrent) > … > New Branch.
    screenshot screenshot screenshot
  2. Restored Branch > Commits > (Youngest common ancestor commit with vCurrent) > Restore Commit. screenshot
  3. Cross-Project Merge all vCurrent project files into the vNext ancestor branch project files.
  4. Pull changes from vNext master into the vNext branch and commit. screenshot
  5. Merge Branch back into vNext master.
  6. Cross-Project Merge all vNext project files into vCurrent.