Component library creation
The project
Background
The Press Loft website was started over a decade ago, and has been expanded over the years by different designers and developers. Although there had been some components designed many years ago, they had only been partially implemented across the site, meaning that the site was not consistent and sometimes appeared very outdated. Brand consistency is really important to create trust with users, so it was important to find a solution to this problem.
We needed to find a solution where we could consistently apply components during the design and build stages. This would mean we would be able to maintain consistency across the site, as well as speed up the design and build processes, which is essential for a small team.
Brief
- Create a base component library in Figma that we can easily maintain and expand on.
- Design a page which can be used internally by the dev team to quickly find and copy components and styles.
- All colours, styles and components should be named consistently.
- Components must be created with suitable variants. These include colour variants, as well as state variables such as hover, disabled, etc.
- The development team will build the new component library in Tailwind.
- The whole site will be gradually moved over to Tailwind and its new components over approx. 12 months.
Components created
Colour palette
Buttons
Tertiary actions
Option toggles
Select buttons
Tags
Card actions
Radio buttons and checkboxes
Tabs
Search fields
Forms
Dropdowns
Date pickers
Alerts and information
Loading bars and spinners
Sliders
Pagination
Editor component examples
Country flags
Future components
- This component library is a starting point and will grow and expand over time.
- These components will be used in all designs going forward. If a design is created where there is no suitable component already in the library, a new component can be added to the Figma component library. A Jira ticket will then need to be created, so that the dev team can implement the new component and it can be used in further projects.