Design System
Approach
The definition of the card "organism" follows previously established rules within the design system at giffgaff. Each element is labelled and explained to provide clear guidance of use and implentation.
Spacing and layout
The card was designed in conjunction with the Design System spacing rules to maintain visual consistency.
​
The guidelines clearly document individual UI elements and their relationship to eachother. Vitally for the card the design intent is to allow flexibility for information placed within the "Content placeholder" and therefore its height is intentionally not defined.
Design tokens
I followed robust naming conventions that remove ambiguity and aid collaboration within giffgaff. As the naming convention didn't go to the component level, I used the semantic descriptions for the card element. This ensured the consistency across the multi-platform implementation requirement at giffgaff.
​
Figma variables
The Card component was defined fully within Figma using variables. I set these up to allow for quick and consistent use in individual use cases. As the image shows boolean varibales allow elements to be easily turned on and off to change the card within the defined guidelines as set out in the Design System. This helps to speed up workflows in Figma and develpoment.
