A naukri.com initiative
Ubuntu
1w
8
Designing Canonical’s Figma libraries for performance and structure
- Canonical's Design team revamped their Figma libraries that were outdated and inefficient. They started by aligning on how to structure the libraries and what rules and methods they wanted to follow when creating components and surveyed how designers used components. The libraries have been structured in a way that allows designers to easily understand and navigate different categories of libraries. Every library is maintained by at least one dedicated library maintainer who is responsible for managing contributions and keeping the library up to date.
- The team adopted a multi-tiered Design system approach where they have a common base library, but additional libraries are created for each product category. For each level, there is a similar library and ownership structure that allows the team members to achieve greater consistency between products. Within each file, a strict policy of one component per page is maintained, with the pages sorted alphabetically and divided into sections that represent component levels.
- The team also tackled performance issues at the file, page, and component level. Heavy assets are separated into their own library file, optimized, and refined. The team is also careful not to stack too many effects on top of each other while creating components. Furthermore, the team uses the instance swap property, which shows a searchable list of components and their previews and added keywords in component descriptions for better discoverability.
- The team created a clear process for maintaining the libraries and keeping them up to date. A custom way was implemented to track the usage of Figma components and Figma libraries, giving an indication of which components may need work. A transition plan was created for the team from the old to the new library.
- When the new libraries were finalized, the team created a beta version, and once they integrated all the feedback and moved to the stable version, they marked the old and smaller unofficial libraries that were floating around as deprecated. They put a notice everywhere to notify the users of the deprecation and advised the team to use the new library for any new work and fix anything in the old libraries or release new versions.
- Now that they have completed all the transition period and finalizing the first set of new libraries they created, they are sharing the files with the Figma community and writing about it for designers to create more efficient Figma libraries.
Read Full Article
Like
For uninterrupted reading, download the app