This video is available to students only

Identifying components

Which UI elements can be identified as molecules?

Using the concepts from the previous lesson, it's possible to find shared components in even the most complex codebases. Let's walk through an advanced UI example and identify the different elements of Atomic Design:

  1. Atoms

  2. Molecules

  3. Organisms

  4. Templates

  5. Pages

Here is a UX example from the Azure SQL database portal:

Azure SQL list
Azure SQL add

Using Atomic Design we can identify:

  • Atoms

    • Shared color palette

    • Font and typography

    • Consistent spacing values

    • Icons

  • Molecules

    • Icon buttons

    • Tabs

    • Removable pills

    • Select and autocomplete components

    • Radio inputs

    • Buttons

  • Organisms

    • Common header layout

    • Interactive table

    • Side-by-side pairing of labels and form inputs

  • Templates

    • The page layout which includes a header, title, description, breadcrumbs, content, and footer

  • Pages

    • The individual list and add pages

The elements listed as molecules would make shared components that are flexible enough to be used in a wide variety of scenarios.

Demo codebase#

Our demo codebase is a showcase for components that are used in common application experiences. It includes custom styling built with SASS that we will be migrating to our shared component library. The components we will implement include:

Please select a discussion on the left.