For designers

Tools

You need access to Figma and the CDS Figma libraries. Download Figma from figma.com/downloads.

Requesting access to Coop Enterprise in Figma via IDA

IDA approval can take a few working days. While you wait, browse Why use CDS for an overview of the system, Foundation for tokens and visual language, and Components to see what's already available.

Figma libraries

CDS lives in the CDS Figma file. Go to the Figma assets panel inside your working file and enable the shared library. Now CDS components and variables are available across your Figma file.

Good usage means using the published components, not detaching them. Detaching breaks the link between a component instance and its CDS source — it becomes a standalone frame with no connection to updates. Detached components drift and won't receive CDS updates. If a component doesn't meet your needs, open a contribution request rather than detaching.

Token first

Use Figma variables (semantic tokens) instead of local styles or hard-coded values. Semantic tokens describe purpose — color.background.primary, spacing.md — not appearance. When CDS updates a token value, every use updates automatically. Hard-coded values don't.

Primitives (raw colour values, fixed sizes) are available in Figma but should only be used when creating new tokens or experimenting. Always apply semantic tokens in production designs.

Where components live

Choose the component that fits your use case, then select the correct variant. Most components already have variants for size, state, or style, so check the properties panel before customising.

CDS components are shared building blocks used across all platforms and applications. Components specific to a single application should stay in that application’s files. You can build them using CDS tokens and components, but only add to CDS if the same need exists across products. If you cannot find a fitting CDS component and the same need exists across products, open a contribution proposal (see Contribution as a designer).

CDS covers UI components and tokens. UX patterns — combinations of components that solve common flows — are in progress but not live yet. UX flows and content guidelines live with product teams for now.

Component decision tree

Start here: I need a component.

1. Does CDS already have it?
   • Yes → Use the CDS component.
   • No → Go on.
2. Is this need shared across multiple products?
   • Yes → Propose it to the CDS team.
     • Proposal accepted → CDS builds or co-builds it.
     • Proposal not accepted → Build it in your application using CDS tokens and components.
   • No → Build it in your application using CDS tokens and components.

If no CDS component fits and the same need exists across products, open a contribution proposal — see Contribution as a designer.

A11y basics

Designs passed to development must meet these minimums:

• Colour contrast meets WCAG 2.2 AA for all text and interactive elements.
• Interactive elements have a visible focus state — don't remove it.
• All states (hover, active, disabled, error) are included in the handoff.
• Form inputs have labels; icons used as buttons have accessible names noted in the spec.
• Touch targets are minimum 24×24px; aim for at least 40x40px for primary actions.

CDS components are built with these requirements in mind. If you override a component style, always check that you still meet contrast requirements.

Contribution as a designer

To propose a change or new component:

1. Write down the use case: what product problem it solves and where it's needed.
2. Collect screenshots or Figma frames showing the pattern in context.
3. Note which platforms are affected (web, iOS, Android, or all).
4. Post the proposal in the CDS Teams channel with these details.

The CDS team will review, ask follow-up questions, and decide whether the proposal will go into the backlog.

How CDS in Figma is reflected in code

Developers implement CDS components from the same token set used in Figma. To make handoff reliable:

• Use the exact component and variant names from the Figma properties panel — developers look those up.
• Note component-specific behaviour: what happens on tap, what changes on error, whether animation is expected.

When Figma and code diverge, flag it in the CDS Teams channel with a link to the component and a description of the mismatch.

Updates, support, and questions

CDS updates, announcements, and support all happen in the CDS Teams channel. Versioned release notes are published in the site changelog; breaking changes are flagged with guidance on how to update. When a CDS library update lands in Figma, component instances update automatically (unless detached).

If you have a question, post in the Teams channel and include what you're designing, which component or token you're using, and what's not working as expected. The more context you add, the faster you'll get help.