Cindy Rogers
Systems Design
Showcasing technical skills
Building the foundations for a design project to future proof scalability, responsive design, reusable components, light and dark mode, tokens, semantic variables and more.
Atomic design framework
Following Brad Frosts Atomic Design framework for building interface design systems that maintain consistency and scalability.
Setting out the foundations such as Utility colours, Neutals, type scale...
Responsive design
Building responsive prototypes in Figma to display content at differnet breakpoints, i.e. 320px, 768px, 1152px and 1440px and larger.
Building Molecules
Following best practices to build out components from atoms to molecules
Demonstrating behaviour
Figma prototyping to demonstrate interaction animations
Utilising variables/tokens for scalability
Semantic naming conventions to communicate more effectively with developers. Variable modes to demo light or dark mode or localisation within prototypes for example. .
