The Cedar UI Sketch Toolkit provides tools and processes to communicate Cedar component and token usage in Sketch design assets. Designers using the Cedar Toolkit to build mockups and redlines will be creating annotated, inspectable, web-sharable assets to facilitate the developer handoff process.
If you’re a developer, you can skip to the review handoff section of this article.
Design with These Goals in Mind:
Each screen should have (up to) 4 versions, each at different breakpoint widths corresponding to Cedar’s breakpoints:
@Lg. The goal is to showcase how content will resize and reflow for responsive web layouts, and communicate those states to a developer.
We recommend making your designs at the following 4 screen widths:
1400px. These widths align to an 8px grid and will also have consistent column and gutter spacing for the Cedar grid.
Download or open the template file and copy the artboards into your project.
You can also setup your artboards manually using the following settings. To access the artboard settings, click View > Canvas > Layout Settings.
Use the table below to create 4 artboards with the correct layout properties. You can toggle an arboard’s column overlay with View > Canvas > Show Layout.
|Name Suffix||Width||Total width||Offset||Number of columns||Gutter on outside||Gutter width||Column width|
|Mobile @Xs: |
w < 768px
|Tablet @Sm: |
768px < w < 992px
|Laptop @Md: |
992px < w < 1232px
|Desktop @Lg: |
1232px < w
We also recommend setting an 8px grid by clicking View > Canvas > Grid Settings. You can toggle an arboard’s grid overlay with View > Canvas > Show Grid (Ctrl+G) and column overlay with View > Canvas > Show Layout (Ctrl+L).
Use the Cedar toolkit components (symbols, layer styles, and text styles) to make your designs. For more information about how to link and use these libraries, visit the Getting Started as a Designer article.
To align to the Cedar grid where appropriate, see the Grid article.
A Global Header & Footer library is also available in the Cedar Toolkit to help put your designs in context.
Redlining effectively communicates the intended construction of a webpage to the front-end developer. Cedar Toolkit symbols and styles have vue- component and token names embedded within them so that developers can view them in the Abstract Inspection Web-View.
Use the redlining symbols found in the CDR tokens toolkit library to communicate whitespace in your designs. For more information on how spacing works within HTML and Cedar, see the Spacing article.
After redlining is complete, make an Abstract Collection of artboards to handoff to the front-end developers.
We also recommend you make two commits of the final design: a REDLINE version and a VISUAL version. This will allow developers to toggle the redlines on and off. Use the process below for best results:
Note: If your design is split onto multiple pages, you may need to repeat steps 4 and 6 for each Sketch page.
Each Artboard committed to Abstract is viewable in a browser using a public link. For more information about the Abstract Inspection Web-View, visit the Abstract website. We recommend the following uses:
Use Collections to view a curated set of artboards in a list. When viewing a specific artboard, use the bottom bar to navigate and toggle to 100% zoom. For more information, read the Abstract Collection documentation.
Use the Comment tab to navigate between different versions in the file’s commit history. This tab can also be used to toggle between the VISUAL and the REDLINE commits.
You can also use the Comment tab to create and reply to comments on specific artboards. We recommend using comments to:
Developers use the Inspect tab to navigate the objects and layers from the Sketch file. Cedar token names are embedded in the Layer Style and Text Style names. You can view them in the selection column on the right.
Note that spacing tokens are orange and inset (padding) tokens are green. Developers can learn more about how these should be applied in the Spacing article.
Token Layer Style may be applied to a standalone element.
Or, multiple token Layer Styles can be combined using a Rectangle symbol.
Text Styles contain both the Text Style mixin and the text color to be applied. For a list of text token values and usage, see the Typography article.
Icon names will appear in the Layers list. Go to the icon library to see if this icon is publicly available. If the icon is custom, please export it from Sketch using CDR icon export guide. For more information about icon usage, see the Iconography article and the cdr-icon component.
Cedar doesn’t have a process for prototyping yet. Most teams in REI use InVision. Abstract might support prototyping in the future. To read more, see this Abstract forum.
Does this process work for you? Do you have any suggestions for improvement? Please let us know using the #cedar-user-support slack channel.
Now Go Be Awesome!