As a Designer
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:
- From your desktop use the shortcut Shift+Command+C to access your Mac disks.
- Navigate to your local application folder, Macintosh HD > Users > 'yourUserName' > Applications.
- 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
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
Recommended Sketch Plugins
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:
- CDR Icons: All Cedar icons
- CDR Tokens: Text, color, and redlining/spacing tools; these are platform-agnostic.
- CDR Web Components: For web design, including mobile web
- CDR Native UI Components: For native apps (iOS and Android)
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:
- Find and sync the CDR Toolkit projects you want to use.
- 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.
- 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.
- The linked libraries will appear at the bottom of your page list for the project file.
- That's it! You can now add Cedar components, icons, text styles, or layer styles to the artboards in your project's Sketch files.
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.
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.
- Add the new version of the linked library:
Your-Project > Branches > Your-Branch > Files > Add File > Link Sketch Library > ReplacementLibrary.sketch > Link Library
- 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
- Match the old version of the library to the new version and click Apply Changes.
- Validate that the file is referencing the new library.
- Now, remove the old linked library:
Your-Project > Branches > Your-Branch > Files > Linked Libraries > LibraryToUnlink.sketch > Right-Click > Unlink Library > Stop Using as Library
- Lastly, open the file, click the Library Updates Available notification in the top right of sketch, and accept the updates.
- That's all! Now the new library version is available in place of the old.
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.
- Download the new-version.sketch file to your computer:
Navigate to the new-version.sketch > Right-click > Export > Save to your computer.
- Create a new branch containing the old-version.sketch.
- 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.
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.
After each project has been updated independently, sync the projects again and make a new major release from a beta branch.
- Restore the youngest vNext ancestor branch that had vCurrent merged into it:
vNext > Branches > Archived > (Youngest common ancestor branch with vCurrent) > … > New Branch.
- Restored Branch > Commits > (Youngest common ancestor commit with vCurrent) > Restore Commit.
- Cross-Project Merge all vCurrent project files into the vNext ancestor branch project files.
- Pull changes from vNext master into the vNext branch and commit.
- Merge Branch back into vNext master.
- Cross-Project Merge all vNext project files into vCurrent.