Designer Onboarding

The American Express Design System is the cornerstone of our digital design, providing a cohesive suite of design resources that embody the brand’s ethos. It offers an extensive array of design elements, including color palettes, UI components, icons, glyphs, typography, and graphic assets, all meticulously curated to accelerate the design process and ensure a consistent, brand-aligned user experience across all digital touchpoints.

Onboarding Checklist

Welcome to the Design System! We have put together steps to kickstart your designs.

Step One - Familiarize Yourself with the System 

Begin by exploring our documentation to understand the Foundations, and Design kit. This will equip you with the necessary knowledge to effectively utilize the system.

Step Two - Set Up Your Design Environment

Ensure you have access to Figma, and then proceed to configure your Figma file along with any necessary widgets and plugins. This setup is crucial for a smooth design workflow.

Step Three - Practice with the Design Kit 

Engage with the Design Kit to become proficient in its application. This step is about hands-on learning and becoming comfortable with the tools at your disposal.

Step Four - Leverage Available Resources

Dive into the Figma resources to deepen your understanding of the system. For any additional queries, our FAQ section is a comprehensive resource for further guidance.

Design Kit

The Design Kit contains everything you need to get started designing using the DS, including foundations (grid, typography, colors), graphic assets and components. The kit is available in Figma.

Using the Design Kit

The Design kit has two library files which are available in Figma:

Web Kit:

All components, their states, and component elements needed to create and maintain your designs. Foundations: Colors, text styles, styles, and grid. Find out more about our foundations.

Assets:

The DS Assets Figma Kit provides logos, flags, icons, patterns, and brand graphics.

Follow the Design Guild figma onboarding to add the Design System Libraries within Figma. You will need all libraries on to use web components.

Do this
  • Check for updates and use the latest version.
  • Use the Grids and layouts available in Figma. Grid is based on the systems breakpoints.
  • Use the design guild resources: Figma FAQ’s, Figma plugins, Figma Widgets and general tools information.
  • Give us feedback. If you find a missing component, outdated components, or any other issues let us know at #dls-design or send an email to dls@aexp.com.
Don’t do this
  • Detaching a component from the library. Use properties or prebuilt variations and reach out if you can’t find what you need at #dls-design or send an email to dls@aexp.com.

Components

Each web component will:

  • Use design tokens
  • Available for all surfaces
  • Available in light and dark mode
  • Reflow to the minimum of 320px or have size variations
  • Have built interactions and state variations when applicable
  • Have built in properties for alt text and other relevant accessibility handover tools
  • Link out to related documentation

Need a different design systems components? For mobile components visit Native Design Language (NDL), for email design system visit Marketing Email Design System (M-EDS) or Servicing Email Design Team (S-EDS).

Figma

Figma is the enterprise app for UX design, and all the design assets for the Design System can be found there. The Design System team does not own the relationship between American Express and Figma but works closely with Digital Workplace Tools and Information Security to get the latest access and updates. For Figma-specific questions, reach out to #figma-help on Slack. The Design Guild has a list of Figma plugins and widgets that have been requested, and their overall status.

Figma Access

There are several types of access to Figma, so please review the Figma resource pages to understand the best fit for your needs. The Design Guild have put together step by step instructions on how to get access to Figma. For additional help you can also join #figma-help on Slack.

Figma Tutorials

Check out the Design Guild’s Figma training videos to get started. A variety of Amex-specific learning sessions have been recorded and are available on these pages:

Typography

American Express colleagues have access to Benton Sans, Guardian and SF Pro via self service or software download service (SDS). Agencies follow the guidance in the brand guidelines.

When building digital experiences (other than emails and native apps), please incorporate the typeface directly from our content delivery network (CDN).

Updates and Version Control

Our design kit is updated in sync with the React components. Updates in Figma include a list of changes highlighting new components, bug fixes, contributions, and any deprecated components. Follow the steps in the figma guide to review and accept library updates

Need an earlier version of our kit? Our v6 design kit is available in both Figma and Sketch.

Migrating from v6 - v7

The transition from v6 to v7 includes significant styling updates, the addition of tokens, enhanced grid styles, and more. Follow the Designer Migration Guide to get started.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.