UX Design

Getting started is as simple as adding the Costco EDS Library to your Figma file.
The UX Design components live in a Figma Library and Figma design file.

Prep

1. Create a new 'Design File' or open an existing file within Figma.

Step 1

1. Navigate to your Assets panel.
2. Click the ‘Book icon’ to open the Team Library modal.

Step 2

1. Find the ‘Costco Web Components’ Library in your current file. Remove it.
2. Also find the ‘Foundations’ Library and remove it.

Step 3

1. Switch to the ‘Costco’ tab.
2. Click on ‘Other libraries’.

Step 4

1. Find the ‘Enterprise Design System’ and click ‘Add to file’.
2. Close the modal.

Step 5

1. In the assets panel, find components you need.
2. Drag-and-drop the components you need for your project.

Software Development

Angular Project

Here is an Angular v15 project that implements the Enterprise Design System. You will notice that the styling is based on Angular Material with overrides and a series of composites of elements for a desired styling.

Link to the repository: Costco Enterprise Design System Repository Our recommendation is for it to be Forked into your own project and start development using the Public_1.0 branch

Take note that VSCode Snippets are available in the assets of the project. These snippets make it easy to start using the components.

Once you have Forked the branch you can take a look a this demo video to see a sample of the compoents in use.

Additionally, you can take a look at the Main branch where the module DEMO is available and you can see all the components in use. You can find the running site here.

Current Efforts

Our next goal is to provide a simple CSS library to showcase EDS stylings. We are aware of the usage of multiple CSS frameworks and libraries, and we think that providing a baseline that can be used for modifying those librarries will have a greater impact. Stay tuned for updates on this effort!

'Foundations' Reference

The Foundations Reference serves as an online version of all the design components to allow both designers and developers to quickly see how a component is made both visually and library-agnostic code. The Foundations Reference can be found here.

Helpful Links

Sources

Credits

• Costco Enterprise Design System
  • Enterprise Architecture UX Team
• Depot Design System
• International UX Team
• MGLO Reference Design System
• Membership UX Team
• Digital Design System
• Digital UX Team
• Costco Logo Standards
• Corporate Marketing

User License

In the future you'll find details on where the Costco Enterprise Design System (EDS) should and can be used.