DRAFT Figma design system: How to use and maintain
- Julie Van Oyen
At Europeana, we use Figma as our primary user interface (UI) design tool. Most, if not all, of our mockups for the Europeana.eu, Europeana pro, and Metis platforms exist in their respective Teams in our Figma account.
Europeana.eu
To ensure consistency across our designs, and to optimise our design workflow, we have built a Component Library which houses our master components which are used across all mockups. These components include (for example) buttons, chips (pills), and entry fields such as search bars and drop downs; the Component Library also houses our typography and colour styles which are used in the UI of Europeana.eu.
How to use the Component Library
Copy and paste components directly from the Component Library into your mockups. These copies that are made from the master components are called instances, meaning that any changes that are made to the master components will be carried through all child components. This ensures consistency and makes updating mockups far easier when a component is updated; you don’t need to change it everywhere, only in the master component in the Component Library.
You can also start your mockup from an existing completed mockup; copy and pasting a full mockup still creates instance components, meaning all components in the new mockup will still be connected to their master components in the Component Library.
Further reading
How to maintain the Component Library
Recently, we have began efforts to improve the documentation in our Component Library. This includes instructions for how to use various components included there. If a new component is made, it should be added as a master component to the Component Library; documentation should be added; and all child components should be re-added to the design as needed, to ensure they are child components of the versions which exist in the Library.
Further reading
UI Definition of Done
Process for updating components