Using Figma's variable system, I was able to make one standard design responsive to multiple screen sizes and changing modes (specifically light and dark modes). I also created a responsive desktop, tablet, and mobile version for this project. To note, all of these designs have components with auto-layout properties and adhere to an 8-point grid system.
Variables
Work Smarter, Not Harder 🧠
Using Figma's variable system, I was able to make one standard design responsive to multiple screen sizes and changing modes (specifically light and dark modes). I created variables for my design using collections: Primitives, Tokens, and Breakpoints.
Primitives serve as the building blocks for establishing a variables system. I created two color groups: Brand and Neutrals, along with values for spacing (relative distance of elements) and radius (rounding of elements' corners).
Tokens inherit their values from primitives as shown above and are the semantic values that indicate how the primitive values should be utilized.
Breakpoints help to indicate how certain elements should adapt to different screen sizes which allows for a more responsive design.
Variables Continued
In That Mode 🔄
By building an extensive variable system, it became more time-efficient for me to resize elements based on different screen sizes as well as change between light/dark modes.
Swapping between different modes (Light and Dark)
Swapping between different breakpoints (Mobile, Tablet, and Desktop)
Variables Continued
Staying Organized 🗂️
Having consistent naming conditions for design files are vital for designer to developer hand-off, which is why I ensured that every project file had brief, consistent naming conditions.
Project 2
UI Aesthetics ✨
For this project, I was tasked with creating four aesthetically contrasting user interfaces—each with their own color and text styles. I focused on ensuring that my designs had good file hygiene and adhered to an 8-point grid system.
Spacing and Auto Layout
Maintaining Visual Equilibrium ⚖️
To keep my designs consistent, I utilized auto layout which allowed for me to easily adhere to an 8-point grid system by using multiples of 8 for padding and spacing. This helped to ensure that all of my elements were equally spaced from one another and visually consistent.
Final Project
Everything Makes Sense Now! 💡
After practicing with specific skills within Figma such as auto layout, building/using a variable system, and other advanced prototyping features, I created a range of user interfaces with drastically contrasting aesthetics. This final project serves as a means to display all of the skills I learned from my last two projects.
Components
Building the Building Blocks 🧱
I ensured that all of my designs used components so that it would be significantly easier to organize and structure my designs.
Auto Layout
Responsive Design ✳️
Auto layout is vital in creating responsive designs that can translate to multiple screen sizes. In all of my designs for this project, every single component makes use of auto layout.
Final Designs
If you'd like a closer look at my designs, take a peek at the slideshow below or, if you're really feeling adventurous, look through my Figma file!
Note: You may have to reload this page to fully see the slideshow!
