Introduction
These guidelines outline the best practices for utilising component libraries effectively during design and development.
They help teams stay consistent, reduce rework, and maximise the benefits of the design system.
These guidelines are for squads that work with component libraries during design and development.
When using component libraries, it is essential not to modify or deviate from the existing components. Doing so adds extra development work and removes the benefits of using a shared system.
If you do not use components, you miss out on key Figma features that make building user interfaces easier:
- Build projects faster in alignment with development teams
- Regular updates to fix bugs and stay in sync
- The ability to bulk swap components or instances
- The option to change component themes when themes are added to Compound
- Components that match our documentation and handover notes
- Reuse tested patterns
Using existing component?
Our component library and documentation are updated regularly. Before detaching a component, check the library to see if an update already meets your needs.
Is there some existing functionality?
Sometimes a component provides most of the functionality you need but is missing one feature. Create a contribution proposal and feed the suggestion back to the broader design system.
If it benefits multiple teams or the wider system, the update will be added to the component library.
When a component does not exist
If no component exists but a similar one provides a good starting point, your design may be a candidate for a new component. As with updates, prepare a component proposal and share it with the team for feedback.
Summary
Detaching components in project files makes it harder to build a consistent and reliable system.
The design system exists to help teams deliver digital products faster and with consistent quality.
Everyone is responsible for contributing to it.
Before detaching any component:
- Check if an update or similar component already exists
- Follow the steps above
- Share proposals for new components or updates with the team