Cezanne HR component library
Figma components are needed because they allow for efficient and consistent design across a product or project. As a UI designer at Cezanne creating reusable elements, such as buttons or forms, that can be easily manipulated and updated is vital for when we create new prototypes that need commonly used items found in our system. This allows for a more efficient design process and a more consistent design approach.
Brad Frost's atomic design methodology is a design system that organizes design elements into a hierarchy, with the smallest and most basic elements being atoms and the largest and most complex elements being organisms. By using Figma components, we can easily implement the atomic design methodology within their design process, as they can use pre-built components as atoms and build up to more complex organisms. This allows for our component library to have a structure that is consistent with our design system which uses this same methodology.
1. Component Library Overview
2. Atoms Overview
3. Molecules Overview
4. Organisms Overview
Component Breakdown
Atoms: In Figma, atoms are the smallest and most basic design elements, and are the building blocks for our system, which include buttons, form fields, and text styles
Molecules: In Figma, molecules are groups of atoms that function together as a unit, they consist of more complex atoms but are still relatively simple, such molecules include headers, footers, and tabs.
Organisms: In Figma, organisms are the most complex functions in our system made up of multiple molecules that function as a unit. Such examples at Cezanne include cards and notifications
Below you’ll find how our components are broken down, all components start with ‘Variations’ which include all types of that specific component, for example, there are many buttons in our system with many variable names, as such, they are listed in. order with the appropriate variable names listed next to it. this is then followed by a ‘Spacing’ section, now while the component will have padding & margins already, the visual aspect helps our designers and devs understand the hierarchy of the component and how it fits in our system.
In addition to this, a smaller aspect of our component library is ‘Patterns’ while this is a relatively small part of the library, but includes key information for how different components that are consistently used across the system look like and how they should be used, such as spacing and alignment between them all. Finally, we have a colour palette which from the snippet below shows the variable name used in our code, and the Hex value if that variable name isn’t available for some reason.
1. Variation of components
2. Spacing explanation of components
3. Best practices explanation for components
4. Design patterns
5. Colour palette snippet