IKEA: Building flexible, accessible components at massive scale

Learn how IKEA's Design System Skapa supports 200+ product teams, 400 Figma editors, and 60+ components across web, iOS, Android, and more. Real-world case study on building flexible, accessible card components at enterprise scale.

Authors: Caroline Dahl, Jonatan Grönkvist.

Tags: Design Systems, Components, IKEA, Case Study, Accessibility.

Key Learnings

  • How to build flexible Design System components
  • Accessible component design at scale
  • Card component patterns
  • Design System component architecture
  • Design Tokens implementation
  • Design System adoption strategies

Full case study at intodesignsystems.com/use-cases. More Design System use cases at intodesignsystems.com/use-cases.

We'll be live in:0d 0h 0m 0s·15 live sessions·Only 94/1,000 tickets left
Join now
IKEA

How IKEA builds and scales its Design System

Design SystemsComponents

1. Context

Why IKEA talks about Design Systems

IKEA is one of the most trusted brands in the world.
That trust has to hold up across hundreds of digital touchpoints.

The IKEA Design System called Skapa, supports everything from mobile apps and websites to in-store kiosks, internal tools, large screens and even email marketing.

Stats:
200+
product teams supported
400
Figma editors
60+
components maintained
400+
design tokens (incl. dark mode)

Today the team ships design and code across web, iOS, Android and more.

2. The problem

What becomes hard at scale

Cards are one of the most common UI patterns at IKEA.
And also one of the messiest.

Before the redesign:

IssueImpact
Countless variationsCards existed in countless variations across products
Inconsistent terminologyTeams used the word "card" for very different things
Missing accessibilityAccessibility was often missing
Too rigidExisting components were too rigid for real use cases
Inconsistent behaviorSome cards were static containers, others fully interactive, animated or clickable
Visual inconsistencyMany were visually inconsistent and not accessible

The existing core component simply could not support the reality of IKEA's product landscape.

3. Their approach

Principles, decisions and mindset

Instead of designing yet another card, the team stepped back.

They:

  • collected card examples from across IKEA products
  • ran workshops with product teams
  • defined what a card is and what it is not
  • mapped real use cases instead of ideal ones

To get there, they:

  • worked closely with product teams from the start
  • released early alpha versions in Figma and code
  • created fast feedback loops
  • treated design, engineering and documentation as one workflow

Accessibility and brand consistency were treated as foundations, not features.

4. What worked

Concrete learnings from practice

Several decisions proved critical.

One system, multiple variants

Instead of endless custom cards, IKEA created a small set of card types with shared structure but clear purpose.

Flexibility over pixel perfection

Cards can adapt from minimal content to rich editorial layouts without breaking brand or accessibility.

Media as a first-class citizen

The new media container supports images, video, shoppable markers and interactive content.

Accessibility by design

Keyboard navigation and screen reader behavior were redesigned to reduce friction, especially in dense layouts like carousels.

Documentation is part of the product

A large part of the work lives outside Figma in documentation, Storybook and the internal knowledge hub.

Gradual adoption is normal

At IKEA's scale, adoption takes time. Reaching over 80 percent adoption on web was considered a success, not a delay.

5. What others can learn

Patterns that transfer to other teams

Design Systems need to reflect how teams actually work

not how we wish they would

Aiming for 80 percent coverage is ambitious but realistic

at scale

Flexibility enables adoption

rigidity blocks it

Accessibility decisions need to be intentional

when no official pattern exists

Documentation improves design thinking

not just onboarding

Design Systems are living systems

not finished artifacts

6. Source

Where this use case comes from

Session
IKEA's Design System Skapa — How to build smart card components

Caroline Dahl

she/her

Product Owner, IKEA Digital Design System, Skapa

Jonatan Grönkvist

he/him

Senior Design System Designer, IKEA Digital Design System, Skapa

Watch the full session

This use case is based on a live session by the IKEA Design System team, presented during an Into Design Systems meetup and recorded at Spotify.

The talk covered the evolution of IKEA's card components, their design decisions and real-world challenges at scale.

If you want to learn how other teams apply similar patterns in practice, these kinds of real-world workflows are explored in depth at Into Design Systems.

Back to Use Cases