Figma
The Design Chapter at George started to look into Figma in April 2021. In January 2022 we finally got green light to onboard all squads to it and soon, Figma is our main design tool replacing Sketch.
Mid of 2023 we switched to Figma enterprise to combine all entities of Erste Group working on George to a single Figma account to boost collaboration even further.
Figma Enterprise
The George Labs Figma Enterprise account comes with a single sign-on. Anyone with a whitelisted email domain can access our Figma Enterprise account right away.
If you don’t have access to George Labs Figma Enterprise Account but you think you should have, get in touch with one of your country administrators:
| Entity | Contact |
|---|---|
| Banca Comercială Română | Adrian Stoian, Alexandru Ionita, Andrei Badescu |
| Česká spořitelna | Jakub Kemr, Vladimír Škorpík, Alexandr Hudeček, Antonín Šrámek, Štěpán Mrázek |
| Erste Bank Austria | Cornelia Hasil, Christian Huettler, Marc Gyarmaty |
| Erste Bank Croatia | Vanja Djurinec, Laszlo Pastorek, Peter Horti, Brigitta Malmos, Erzsebet Szabo, Acs Attila Zoltan |
| Erste Digital | Christoph Scheiner |
| Erste Group | Stefanie Prinz |
| George-Labs | Stefanie Prinz, Albin Kurtanovic, Konstantin Demblin, Natalia Korotaeva |
| Slovenská sporiteľňa | Lukáš Ďurža, Miroslav Hurban, Lukáš Pobuda, Petra Kabátová, Filip Kukliš, Michal Podskoč |
Figma Libraries for George
We use several custom Figma libraries to design George.
If you think you should have access to George libraries, get in touch with us:
- Konstantin Demblin is in charge of the Figma libraries for the Web browser
- Albin Kurtanovic is in charge of the Figma libraries for native Apps (iOS and Android)
Artboard sizes
Stay consistent with the width of the artboard(s).
| Tier | Name | Browser width | Grid width | Inner content width | Figma Frame Width |
|---|---|---|---|---|---|
| xs | extra small | < 576px | 100% | 100% − 30px | 320px and/or 570px |
| sm | small | ≥ 576px | 540px | 510px | 600px |
| md | medium | ≥ 768px | 720px | 690px | 768px |
| lg | large | ≥ 992px | 960px | 930px | 1024px |
| xl | extra large | ≥ 1200px | 1140px | 1110px | 1440px |
| xxl | extra extra large | ≥ 1400px | 1320px | 1290px | 1920px |
HINT The outer gutter width is always 30 pixels (2× 15px).
Figma Plugins
We use several third party plugins to enhance Figma.
Recommended plugin
- Figma Measure by Phil and carlhauser - “A plugin for easy measurement of sizes.”
- skale by Jan Six - “Scale your layers (any layer!) to a specificed width, height or scale value including all properties (strokes, etc). Imagine the scale tool (K) with the power of the properties panel (specify width, height or scale value).”
- Sorter by Tom Lowry - “A plugin for sorting/reordering layers.”
- Stark by Stark - “The suite of integrated accessibility tools for your product design and development team”
Some useful shortcuts
- Press Ctrl + Shift + ? to open the Shortcut Help menu
- Press Cmd + P to open the Quick Actions panel