The foundations of the GEL Figma Library ecosystem are the GEL Component Libraries. These libraries are made up of highly configurable components, patterns and styles that are an exact representation of what is available in the GEL Design System.
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.
Figma Library Foundations
The following Figma libraries are only available for designers working within the Westpac group organisation:
Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the multibrand system.
The components from the GEL Icons and GEL Logos & Symbols libraries are not brand specific. The GEL Pictograms library contains the components for every brand in the one library.
Other Figma Libraries
The GEL Figma Library ecosystem also includes libraries that are specific to platforms and sometimes to projects. These Libraries contain more complex components and lay-outs that are made 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.
The GEL Component libraries are available to the entire Westpac Figma Organisation, so once you are a member you should automatically have access.
Figma libraries are accessed from within the Assets panel of each Figma design file, select the Team Library book icon. This will open a panel that allows you to select which libraries you’d like to use within your file. For simplicity’s sake it’s best to have just the libraries you need selected per file –otherwise it can get overwhelming.
To get an overview of an entire library, you can open and view the library file. To use the components in your design, drag them onto the page via the Assets panel within your file.
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.
The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the colour palettes of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below.
Read the Using fonts article for information on how we manages fonts.
Sometimes you will be required to produce the same design across multiple brands. A quick way to do this is to use the Figma plugin Themer. It allows you to instantly switch the styles used in your design (colours and fonts) to those of a different brand. Even though there will be some components (logos or pictograms) that will have to be switched manually, this is a very simple process.
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.