Agency
Rōnin Amsterdam
Client
G-Star RAW
Role
Creating the Design System in Figma
Design Library
G-star requested Rōnin Amsterdam to create more than 200 sale banners for their Summer Sale Campaign, which are used on platforms like Instagram, their website & advertisements on Amazon & Zalando.
Each banner contains a so called lockup with a sale message.
This process envolved creating a Design System in Figma together with designing the whole templating and structuring all these locksups in a component library.
Design Library
The sale campaign is divided into 3 different phases, with the discount increasing in every phase. Each phase is characterised with a different gradient colour and images.
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
To speed up the effiency of working in a file with all these lockups including a different sale message and language, I created different variants, 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
To make everything consistent all lockups are made with an auto layout structure.
When there needed to be created a new lockup, I could simply duplicate an existing lockup and adjust or add text, and everything will adjust within the square accordingly.
Structuring The Library
Navigation bars on the side and on the top of the library will heko navigate collegues through the library.
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.
