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.
Figma Library Foundations
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 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.
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.
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.
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 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 styles
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.
Fonts
Read the Using fonts article for information on how we manages fonts.
Going multi-brand
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.
Follow the instructions on the Themer page to install the plugin. We have GEL specific configuration that connects to GEL styles, this requires an API Key and Bin URL that need to be entered into the Themer admin window. You will find these in the notes of the Themer set-up video.
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.