UX-UI/subjects/ui/building-an-interface/design-system-library/README.md

## Design system library

### Instructions

Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.

### Deliverables

- A Figma file with a library including:

  - At least graphic design 30 elements.
  - At least 5 atoms.
  - At least 5 molecules.
  - At least 5 organisms.
  - At least 10 multistate variations.

Don't forget to:

- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.

**Tips:**

- Start by asking yourself what key elements may appear in an e-commerce app.
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

**Resources:**

- [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1)
- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)