Figma Libraries
Kate Macdonald
The Figma Libraries are a complete set of multi-brand, accessible design assets to help you create high quality, consistent, experiences across all our digital touchpoints.
GEL Figma libraries
The GEL Figma libraries are:
These libraries are an exact representation of what is available in the GEL Design System. The Tokens library currently feeds in the values for colour and border radius where required, so it needs to be added to you design files along side the UI-Kit. The GEL UI-Kit and Pictogram libraries are multi brand and allow you to use themes to switch between brands within your design. They are only available to designers working with the Westpac Group organisation.
Other Figma libraries (Tier 2)
The GEL Figma Library ecosystem also includes libraries that are specific to platforms. These Libraries contain more complex components, patterns and lay-outs that are created using the GEL Components. This ensures they remain consistent, easy to update and linked to the Design System. There are other libraries that do not have such a strong link to the Design System for reasons usually to do with legacy brand implantations i.e. systems that have not yet been updated to represent the latest brand.
Library access
The GEL Component libraries are available to the entire Westpac Figma Organisation, so once you are a member you should automatically have access.
Before you start using the libraries we recommend having a good look through GEL site and the GEL Design System. Familiarise yourself with the Design System and its elements. Play with the demo’s in the design system so you understand how the components work in a responsive environment.
The components
To get an overview of an entire library, you can open and view the Sticker sheet in the library file. To use the components in your design, access them via the Assets panel.
Each component is highly configurable. To achieve all the component states you’d find in the GEL Design System, select the instance of the component and use the Properties panel on the right of the screen to configure. The components also use hidden layers as another way to extend the component configuration (Look for the 'hidden-layer' indicator in the component description).
Where possible, elements and components are responsive, making them easier to resize for each of the breakpoints. There are also some components that have a property for a mobile specific version, this is usually available if the component has different padding or font size at the XS breakpoint.
Fonts
Read the Using fonts article for information on how we manages fonts.
Updates
As our brands evolve, we’re constantly updating and refining the Figma Libraries. When a component or style has changed, Figma will display a notification indicating that an instance used in the open file has a newer version available. Take care when accepting updates - especially on shared files. We try to ensue that any changes we make will not adversely affect existing instances, however this sometimes can’t be helped and a component might revert back to blank state. Make sure you read the update description, any risky updates will be highlighted. You do not have to apply all updates to existing designs. Any new instance of the component used will automatically use the newest version.
Frequently asked questions
What if the element I need is not in the Figma Library?
The Design System covers the core UI elements common to most user interfaces. The majority of the elements you need should be available. However, every project is different and sometimes requires bespoke elements that are not available in the Design System. If that’s the case, of course you can create what you need, just use the brand colour palette, and don’t 'adjust' existing components.
If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about how to request a new component.
Who do I contact for help?
If you have any questions or want to share ideas, please contact the GEL team. There’s also loads of information and resources in the GEL site and in the Teams Figma channel.