In todays class we looked at prototyping in Figma. We are currently in the deliver phase of the design process. This is where we finalise the product that we have been designing, and make it ready to test and analyse, which will eventually lead to handing it over to the development team where the designs will be built into real products.

image.png

Lost in Figma

Sometimes we can get lost in Figma due to the design getting lots of screens and overlays. When this happens we should go back to our wireframes and flow diagrams, to know where we are getting lost. This helps us focus on the functionality and usability of the design, instead of getting caught up in the details. Going back to the Gestalt principles can help us organise our screens and make them easier to understand. Other techniques can be used to help the reader navigate and understand our screens are: typescale, colour contrast, focal point, type hierarchy, distinguishing foreground and background, and the 60/30/10 colour rule.

image.png

Reusable Design System

The main part of todays class was learning how to create a reusable design system, and change elements such as colour and typography. We will be looking at variables, variants, component libraries, and design tokens. Design systems help us design quicker, more efficient, and it is easier when it comes to handing over to the developers. Using design tokens and variables we can have a lot of power over our designs, and this is especially helpful when we need to change a lot of components at once.

Screenshot 2025-03-28 at 15.49.10.png

Conclusion

Todays class was super helpful and informative, as I didn’t know much about variables and the amount of power that we can have over our designs through it. This is something that I will definitely use in my projects from now on, and will help me design more efficiently, and easier for handovers to developers. Because of this class I feel a lot more confident using variables and how to implement them into a design file.