Agency
Rōnin Amsterdam
Client
G-Star RAW
Role
Creating the Design System in Figma
Design Library
For G-Stars huge Summer Sale Campaign they requested more than 200 kinds of different banners to be made, which are used for their website, mobile app, social media posts on Instagram & advertisements on platforms like Amazon & Zalando.
Each banner contains a different sale message, which resulted in building these sale messages in auto layout within a huge component library. These different sale messages are called: lockups.
Lockup Library
I designed all these lockups and put them together and build the so called ‘lockup library’. They are all different variants within 1 component. So when they are used throughout the file, it’s easy to adjust one of them.
Properties & Variants
Properties & Values
The lockup library got quite complex. Since G-Star operates worldwide, they needed each lockup in 8 different languages. There are also different phases through the sale.
For an example: it starts with 30% and then builds up to 30%, 40%, 50% and 50% + 10% extra.
To speed up the effiency of working in a file with all these banners including a different sale message, I created different variants out of the lockups within 1 component box, created properties and gave them different values.
Variants
When working within the file on a banner one could just adjust the lockup by selecting a different value on the properties panel without having to go to the lockup library each time to search for the right lockup. This saves a lot of time.
Auto Layout
All lockups are designed within a the same square ratio that fully consists out of an auto layout structure, to make sure they all stay consistent with each other.
It’s also super efficient when there needs to be created a new lockup. I can just simply duplicate an existing one and adjust or add text, and everything will adjust within the square according to the margins I set.
Different states
I added navigation bars on the side and on the top of the library, making it easy to find a lockup and make adjustments to it.
Because the banners all differ in sizes, I created a default version & a wide version for each lockup. See the examples below.
Default
Wide
Logo’s, Buttons & More
The Figma file includes a lot of other elements as well that are put into the Design Library like; buttons, logo’s, typography & much more.
Mockups
Some of the advertisements are meant to engage users in downloading or open G-Stars application. Therefere I created these mockups all in different languages.
Rules
There are also made rules so that other colleagues know what to do when working in the file
