ReDI Design System

🏗 Writing in progress 🏗

The parts of our System

GitHub

There are different locations where you can find code components that constitute our Design System.

1. Shared Atomic Design Components Here there are the foundational components of our systems. Theoretically these should be used across all of ReDI Apps. As the name says thay follow the Atomic Design naming and structure.

2. redi-connect Components As you can see these are components that specific for Connect screens, use cases and flows. There are no "Atoms" but instead Molecules, Organisms and Templates.

3. talent-connect Components These are the Talent Pool components. There are no Atoms or foundational components as they should all be pulled from the shared ones.

Our Goal

We aim to unify and reduce as much as possible custom or specific components to achieve excellent consumer experience. Ideally we should have one repository for our components to serve the different Apps. In this way we can enhance scalabilty, reduce duplication of work and focus on User Experience quality.

Storybook

storybook.redi-school.org Is a tool we use to display and test our web components. It's a useful way to see how the React components behave and are rendered in the browser.

Figma

Now we cross the design side of our Design System. Figma is a collaborative design tool we use to design and test our screens, user flows and components libraries.

In Figma we have 3 main files:

1. ReDi Connect Design
2. ReDi Talent Pool Design
3. ReDi Design System (Being Deprecated)

Rebuilding in progress

There is an additional Figma project called Temporary - New Library Setup in which we are now rebuilding the Figma library and the ReDi Connect Design screens in order to have a 1-1 relationship of how the components behave in code with what we build in design. The files are currently:

1. (Beta) ReDi Design System
2. Relink - ReDi Connect Design