Skip to main content

Designers

The WPP DS provides components, guidelines, and icons to help you design web apps and prototypes. Our components are responsive (for screens 1200 px and wider) and adapted for design in Figma.

We offer you the following Figma resources:

  • Icons – a growing set of icons you can use in the UI and components.
  • Foundations – standard design tokens that define colors, typography, layout, and more.
  • Components – a core set of functional UI components.

Set up your Figma​

  1. Download our icons, foundations, and components, create a Figma project, and import the resources.

  2. In the Foundations, Components, and Icons Figma files, go to Assets, select the Book icon, and, under Libraries, select Publish.

  3. Make sure that all the Color Styles, Typography, and Object Styles are selected to be included in the library, and then publish the customized library.

  4. In your project design file, go to the Assets tab and select the Library icon.

  5. Toggle on [DS] Components, [DS] Foundations, and [DS] Icons.

You can now use the WPP DS libraries in your design.

Change the default theme​

By default, our Figma resources are styled in the WPP theme. This doesn't affect your app in development because it automatically adopts the theme of the workspace under which you run it in the OS.

If you feel more comfortable designing in the target theme, you can change the WPP theme to one of our brand themes. Note that this takes some extra steps, and you might have to repeat this process after every WPP DS update—for this reason, we recommend using the WPP theme.

To change the theme in Figma:​

  1. Download your brand's theme file and import it into a project with other design system resources. If you can't find a particular theme, please let us know.

  2. Publish the [DS] Agency Theme file: go to Assets, select the Book icon, and, under Libraries, select Publish.

    note
    • Select all Color Styles, Typography, and Object Styles before publishing the theme file. Do not change any style names.
    • Check the file-sharing options to make the theme available within your agency.
    • (Optional) Rename the Custom Library - for instance, to Agency Foundations.

  3. Swap the [DS] Foundations library styles for the Agency Foundations library.