Skip to main content

For designers

There are two ways to design with YDS. Both use the same components and tokens, so the result stays consistent with Yle's services either way. Choose whichever suits the task, or combine them.

  • Using YDS in Figma: detailed UI design, design reviews and handoff. You work with the YDS Figma libraries and produce a design file.
  • Prototyping with YDS and AI: trying out ideas quickly, interactive flows and real data. An AI coding agent builds a working prototype from YDS components.

Using YDS in Figma​

The YDS Figma libraries contain the same components, tokens and icons that the code packages implement. A design built from them can be implemented with existing components.

Enable the libraries​

  1. Open a design file in Yle's Figma.
  2. In the Assets panel, open Libraries.
  3. Enable the libraries you need:
    • YDS Foundation: tokens, light and dark themes, text styles and components. Needed for all UI work.
    • YDS Global Colors: global palettes and colour swatches.
    • YDS Icons and Logos: basic icons, illustrative icons, logos and graphical assets.
    • YDS Infographics: colour themes, weather symbols and examples of simple infographic components.

The Yle Next font is available in Yle's Figma without installing anything. Use the YDS text styles instead of setting font properties by hand.

If you can't open the libraries, ask on the #design-system Slack channel.

Design with tokens​

  • Use theme colours for UI. Theme colours are semantic, grouped by purpose: background, text, action, border, feedback and so on. They have a light and a dark value, so a design built with them works in both themes. Use the global palette only when no theme colour fits. See Theme colors.
  • Space with the spacing scale. Spacing follows an 8 px rhythm, with 2 px and 4 px for fine adjustments inside components. See Spacing.
  • Use text styles for typography. See Typography.
  • Check the themes the service uses. Yle services use both light and dark themes; Yle Areena uses only the dark theme.

Accessibility checks​

YDS colour pairings meet WCAG 2.2 AA contrast when used as documented. When a design combines colours in other ways, check the contrast yourself, for example with a contrast plugin such as Able. Colour-vision simulation, for example with the Color Blind plugin, shows whether information depends on colour alone.

Handing off to developers​

  • Every component and token page on this site links to its Figma node and Storybook story at the top.
  • Refer to components by the names used on this site; code uses the same names.
  • For animation, describe the motion with the transition tokens. See Motion and Transitions.

Prototyping with YDS and AI​

An AI coding agent such as Claude Code or Cursor can build a working prototype from real YDS components while you describe what you want in plain language. The prototype looks and behaves like a Yle service, runs in the browser, and can use real data.

Get started​

  1. Get a copy of the YDS Agentic Proto Kit. It comes with the agent instructions that keep the agent on YDS components and tokens.
  2. Create a GitHub token for installing the YDS packages. The proto kit has a step-by-step guide.
  3. Copy .env.example to .env.local and paste the token there yourself. The agent is set up not to read that file.
  4. Open the project in your AI coding tool and ask it to run npm run setup and start the dev server.

For AI agents explains how the proto kit works and how to set up your own project the same way.

Start from a Figma design​

For the best results, connect the Figma MCP server to your AI coding tool. The agent can then read a frame straight from Figma, with its layout, components and variables, instead of working from a written description or a screenshot.

  1. Set up the Figma MCP server in your AI coding tool. Figma recommends the remote server.
  2. Design or sketch the screen with the YDS libraries. Use YDS components and variables rather than detached copies and hand-picked values, so the agent can tell which YDS component and token each part is.
  3. Copy the link to the frame and give it to the agent in the proto kit, for example: "Build this screen with YDS components and tokens:" followed by the link.

The Figma MCP server returns generic React code as a reference. Ask the agent to rebuild the screen with YDS components and tokens instead of copying that code's markup and values.

Tips for prompting​

  • Name the components. "A list of ChoiceButtons with a primary Button below" gets closer than "some options and a submit button". The Components page shows what is available.
  • Check both themes and try the prototype with a keyboard. The components are accessible, but how they are combined is up to the prototype.
  • Ask the agent to explain which components and tokens it used, if you plan to hand the idea off as a design.

Before designing something new​

Whichever way you use YDS:

  1. Check Components or the YDS Foundation library in Figma. An existing component, or a variant of one, may already cover the need.
  2. Check the project board and open issues to see if what you need is in progress.
  3. Think beyond your own service: would other services need this too? Write down the use cases.
  4. If something is missing from YDS: Propose it. See Support and contributing.