Apply every Sketch skill end-to-end: design a product card design system with Smart Layout symbols, export optimised assets, publish to Zeplin, and implement the result in semantic HTML and CSS with visual QA.
This capstone lesson ties together every skill from the module: document structure, symbols, shared styles, smart layout, export, libraries, Cloud handoff, and design-to-code translation. You will build a production-quality card design system component from scratch and implement it in code — the complete professional workflow.
Goal: design a Product Card component for an e-commerce platform with four states (Default, Hover, Out of Stock, Featured) at two breakpoints (Mobile 390px, Desktop 1440px). Organise the Sketch document across four pages:
1Document structure:
2 Page 1: Cover
3 Project info, design decisions, token list,
4 handoff URL, version history
5
6 Page 2: Components
7 Symbol masters: Card, Badge, Button, Image placeholder
8 All symbols named with slash-notation
9 All text layers linked to Shared Text Styles
10 All fills referencing Color Variables
11
12 Page 3: Screens
13 8 artboards: 4 card states x 2 breakpoints
14 Cards shown in realistic page layout context
15
16 Page 4: Prototype
17 Interactive flow: Browse -> Card Detail -> Add to Cart
18 Hover overlay, empty cart stateOn the Components page, build the Card Symbol on a 343x480 artboard. Layer stack from bottom to top: background rectangle (Surface/Card layer style), image placeholder (image fill, 343x220, aspect-ratio locked), Badge nested Symbol, title text (Heading/2 shared style), price text (Body/Regular + Brand/Primary color variable), CTA Button nested Symbol. Enable Top-to-Bottom Smart Layout with 24pt top padding, 16pt side padding, 16pt gap between content layers. Add four state variants using Color Variable overrides:
1Card Symbol state overrides:
2 Default: bg = Background/Surface (#FFFFFF)
3 Hover: bg = Background/Subtle (#F9FAFB)
4 Out-of-Stock: image opacity = 40%, badge = Sold Out
5 Featured: outline = 2pt Brand/Primary, no other changes
6
7Smart Layout: Top-to-Bottom
8 image layer: Fixed height 220pt
9 badge: Fixed height 28pt
10 title: Flexible height
11 price: Fixed height
12 button: Fixed height 44ptConfigure export settings on every icon and image layer before publishing. Run optimisation immediately after export:
1# 1. Export all icons as SVG from Sketch File > Export
2# 2. Optimise SVGs
3npx svgo ./exports/icons/ --recursive
4# Result: avg 55% size reduction
5
6# 3. Export card placeholder image as PNG 1x and 2x
7# 4. Convert to WebP
8npx @squoosh/cli --webp auto \
9 ./exports/card-placeholder.png -d ./dist/images/
10
11# 5. Publish to Sketch Cloud with version note:
12# "v1.0 - Product Card system, 4 states, 2 breakpoints.
13# See Cover page for design decisions and token map."
14
15# 6. Sync Components page artboards to Zeplin
16# 7. Create Zeplin Section: Product CardIn Zeplin, add annotations to the Product Card section that specs alone cannot communicate:
1Zeplin annotation table for Product Card:
2 [1] Hover state: transition background 150ms ease
3 [2] Image: aspect-ratio 16:9, object-fit: cover
4 [3] Out-of-stock: image opacity 0.4, pointer-events: none on CTA
5 [4] Featured border: outline not border (preserves layout dimensions)
6 [5] Loading state: skeleton shimmer on image + title + price
7 [6] Empty state: show when product list length === 0
8 [7] Title truncation: max 2 lines, text-overflow: ellipsisShare the Zeplin link in the sprint ticket and tag the frontend developer. Add the URL to the Sketch Cover page and the repository README.
Implement the card using values extracted from Zeplin Inspect, following the five-step process:
1/**
2 * Product Card
3 * Source: design.sketch > Components > Card Symbol
4 * Zeplin: [link]
5 */
6.product-card {
7 display: flex;
8 flex-direction: column;
9 width: 343px;
10 border-radius: 12px;
11 background: var(--color-surface, #fff);
12 box-shadow: inset 0 0 0 1px #E5E7EB,
13 0 4px 16px rgba(0, 0, 0, 0.08);
14 overflow: hidden;
15 transition: background 150ms ease;
16}
17.product-card:hover { background: #F9FAFB; }
18.product-card--featured { outline: 2px solid #2563EB; }
19.product-card--out-of-stock .product-card__image {
20 opacity: 0.4;
21}
22.product-card__image {
23 width: 100%;
24 aspect-ratio: 16 / 9;
25 object-fit: cover;
26}
27.product-card__body {
28 display: flex;
29 flex-direction: column;
30 gap: 16px;
31 padding: 24px 16px;
32}
33.product-card__title {
34 font-size: 20px;
35 font-weight: 600;
36 line-height: 28px;
37 color: #111827;
38 display: -webkit-box;
39 -webkit-line-clamp: 2;
40 -webkit-box-orient: vertical;
41 overflow: hidden;
42}After implementation, export a 2x Sketch screenshot and overlay it on the browser using PerfectPixel. Target: zero critical discrepancies, fewer than three important ones before the PR merges.
Your progress is saved in this browser, on this device only.