A side effect of not utilising components is that you miss out on a features that Figma provides to make creating UI with components easier:
- Regular updates to the component to stay in sync or fix bugs
- The ability to quickly to bulk swap components or instances
- The ability to change the themes of components, when themes are added to compound
- The benefits or components that match our documentation and annotations for handovers
Can your goal be achieved with an existing component?
Our component library and documentation is updated all the time. Before detaching it may be best to look back through the component library to see if you missed any updates.
Updates are always published in the #proj-compound slack channel so it is worth subscribing for notifications.
Is there some existing functionality?
In some cases, an existing component may offer almost all of the functionality, but a feature is missing. In this situation, it is best to put a proposal to the team for an update. If it benefits more than one team and the broader system it is something that would be updated in the library
The component doesn't exist
A component may not exist but a similar component provides a good starter. As above this is an indicator that your component is a candidate to be added to the system. Just like an update you should prepare a proposal and put it back to the team for feedback.
Exceptions
Cards
Cards are a unique component, they are a container to an infinite combination of nested component compositions. Our card library provides a number of common preset patterns.
Card BG component for the web platform example
The Card BG component is designed to be detached and allow custom content, this is explained in the component demo video. The component was created because in Figma there is no other way to combine different style types into a single action.
Although cards can allow custom content, the Card component guidelines should always be followed. The guidelines exist to make sure our components are familiar to both our customers and our product teams.
I don't understand how to use the Figma component?
Figma components offer a wide array of variants and more complex components can be sometimes tricky to use at first.
Before detaching a component check in the "Overview" page of the master component or in the component documentation if a tutorial video has been created. The goal of these videos is to give a short intro on how the component works.
Component demo video in the overview page
Summary
The more components are detaching in project files and make it into production, the longer it will take to built a robust system. The design system exists to make it easier for project teams to deliver fast and consistent digital products and everyone is responsible for contributing back to it.
Before you detach components please follow the steps above and propose your contributions.