• SCROLL DOWN • SCROLL DOWN • SCROLL DOWN •

HI Rakuten Kobo

HI Rakuten Kobo

My process of creating figma component across teams.

My process of creating figma component across teams.

Hi, I’m Eric. I put together this case study to demonstrate my commitment to becoming your next Product Designer. Here, I’ll share what I know about standardizing Figma components, why it matters, and how I would maintain consistent components across teams.

Hi, I’m Eric. I put together this case study to demonstrate my commitment to becoming your next Product Designer. Here, I’ll share what I know about standardizing Figma components, why it matters, and how I would maintain consistent components across teams.

Detailed implementation steps

Detailed implementation steps

What I will do to make each team's figma components consistent.

What I will do to make each team's figma components consistent.

spacing

spacing

8-point grid. Use 8, 16, 32 for gaps/padding via Auto Layout only.

8-point grid. Use 8, 16, 32 for gaps/padding via Auto Layout only.

Radius

Radius

Standardize on 0, 8, 16.

Standardize on 0, 8, 16.

Shadows

Shadows

shadow.0 (none), shadow.1 (subtle), shadow.2 (raised). eReader swaps shadows for 1 px keylines.

shadow.0 (none), shadow.1 (subtle), shadow.2 (raised). eReader swaps shadows for 1 px keylines.

Color & type

Color & type

Semantic variables only. Light, dark, and eReader collections. No ad-hoc styles.

Semantic variables only. Light, dark, and eReader collections. No ad-hoc styles.

Accessibility

Accessibility

Contrast targets, visible focus rings, 44 px touch targets, no color-only states, RTL & long strings supported.

Contrast targets, visible focus rings, 44 px touch targets, no color-only states, RTL & long strings supported.

Reduced motion, no blur, and designs meet WCAG AA standards for contrast and clarity on e-ink.

Reduced motion, no blur, and designs meet WCAG AA standards for contrast and clarity on e-ink.

Dev-ready

Dev-ready

Tokens mirror code, props map to component properties, each Figma component links to Storybook.

Tokens mirror code, props map to component properties, each Figma component links to Storybook.

TL;DR

TL;DR

Following assigned design systems, core consistency rules are enforced: spacing 8/16/32, radius 0/8/16, shadows limited to three levels with eReader fallback, semantic color & type only, accessible focus + 44px targets, and safe for RTL + long strings.

Following assigned design systems, core consistency rules are enforced: spacing 8/16/32, radius 0/8/16, shadows limited to three levels with eReader fallback, semantic color & type only, accessible focus + 44px targets, and safe for RTL + long strings.

why this is important.

why this is important.

Kobo ships across eReaders, apps, and web in many locales. A strict 8-point system with semantic tokens keeps teams aligned, speeds handoff, and reduces design debt. When color, type, radius, and shadows live in variables, one change cascades everywhere. Readers get reliable, accessible UI that behaves predictably across devices, including e-ink.

Kobo ships across eReaders, apps, and web in many locales. A strict 8-point system with semantic tokens keeps teams aligned, speeds handoff, and reduces design debt. When color, type, radius, and shadows live in variables, one change cascades everywhere. Readers get reliable, accessible UI that behaves predictably across devices, including e-ink.

key benefits

key benefits

Faster handoff, less ambiguity

Faster handoff, less ambiguity

Accessibility by default

Accessibility by default

Cross-platform coherence

Cross-platform coherence

Localization & RTL readiness

Localization & RTL readiness

Maintainability and lower rework

Maintainability and lower rework

I saw the value of this approach when transferring assets between SmartVoting.ca and PoliQ. Because both branches shared a consistent design system (aside from palette and fonts), I was able to hand off assets smoothly to developers who had already integrated them into the site. This consistency reduced rework, made cross-company collaboration easier, and ensured designs remained predictable and aligned across platforms.

I saw the value of this approach when transferring assets between SmartVoting.ca and PoliQ. Because both branches shared a consistent design system (aside from palette and fonts), I was able to hand off assets smoothly to developers who had already integrated them into the site. This consistency reduced rework, made cross-company collaboration easier, and ensured designs remained predictable and aligned across platforms.

TL;DR

TL;DR

A strict 8-point system with semantic tokens keeps Kobo’s teams aligned across eReaders, apps, and web. It speeds handoff, reduces design debt, and ensures reliable, accessible UI that works predictably on every platform, including e-ink. We proved the value of this approach at SmartVoting, where a shared design system let us transfer assets smoothly, cut rework, and keep designs consistent across company branches.

A strict 8-point system with semantic tokens keeps Kobo’s teams aligned across eReaders, apps, and web. It speeds handoff, reduces design debt, and ensures reliable, accessible UI that works predictably on every platform, including e-ink. We proved the value of this approach at SmartVoting, where a shared design system let us transfer assets smoothly, cut rework, and keep designs consistent across company branches.

how i will keep this consistant

how i will keep this consistant

Sustainability plan

Sustainability plan

Versioned library releases with changelogs + migration notes.

Versioned library releases with changelogs + migration notes.

Lightweight RFC in FigJam with rationale + prototype. Weekly triage with UX and Front-End (FE) developers.

Lightweight RFC in FigJam with rationale + prototype. Weekly triage with UX and Front-End (FE) developers.

Every published Figma component has a Storybook entry plus a prop table.

Every published Figma component has a Storybook entry plus a prop table.

Design linting, contrast, long-string, and RTL snapshots before handoff.

Design linting, contrast, long-string, and RTL snapshots before handoff.

Track adoption, duplicate count, accessibility issues, update speed.

Track adoption, duplicate count, accessibility issues, update speed.

Checklist for design reviews includes tokens, props parity, a11y, RTL, eReader fallbacks.

Checklist for design reviews includes tokens, props parity, a11y, RTL, eReader fallbacks.

At SmartVoting, this sustainability plan proved effective. Within just two months we established a consistent design system, aligned developers and designers, and scaled components quickly across projects. The tight cadence and lightweight contribution model allowed us to move fast while keeping quality high.

At SmartVoting, this sustainability plan proved effective. Within just two months we established a consistent design system, aligned developers and designers, and scaled components quickly across projects. The tight cadence and lightweight contribution model allowed us to move fast while keeping quality high.

testimonial

testimonial

Eric worked with us in the Sheridan Innovation Accelerator as an Innovation Team Member developing and presenting an innovative solution for Food For Life’s challenge. In his role he reported to me in my position as Project Lead.

As an employee, Eric was always engaged and professional, for team check-ins and workshops. The Innovation Accelerator relies on effective communication and collaboration in our team members and Eric never failed to deliver.

Eric was an effective and diligent team leader, organizing workloads, scheduling meetings, and guiding his team on their next steps. He was consistently proactive and communicative about the team’s milestones. Eric’s team found him to be reliable, efficient, and goal oriente

-Rick Erickson

AWARD

Purposeful
Innovation

Solving real-world problems with meaningful digital solutions. With our app RescYou.

st

1

AWARD

Purposeful Innovation

st

1

Solving real-world problems with meaningful digital solutions. With our app RescYou.

check out my projects

check out my projects