This weeks lecture was a Figma ‘Step by Step’ tutorial on components and prototyping, more specifically prototype animating using components.

Using components are also still relatively new to me, which I only starting learning how to use them in week seven to display for the critique and more recently in Week 8 (Exploring Identity). However I am more familiar with prototyping as I self taught this when creating my Music player app project which as of now I have used buttons for navigation and one animated element.

This tutorial was very useful to me as the lecturer demoed while I practised the different ‘Curves’ and how they act, what I can do with the settings in a real UI and even started looking at variables. From previously study of animation I was familiar with some of the terms such as ‘Curve’ and how this will change the transaction behaviour. However I have only animated in After Effects so I thought it would be interesting to compare this to Figma.

The headphones UI section very useful as I got to practice using animating components in a realistic setting, rather than just playing about with shapes. To be honest I did not think animating like this in Figma was possible which I am very pleased with this tutorial as it opens lots of opportunity's for my current projects and future projects.

I also got to practice using ‘overlays’ which are smaller pop up screens such as a login box which will appear on top of a main screen. This is something I can defiantly use in my music player app for the user to create an account or to even sign up for emails for upcoming events etc. This would look a lot better rather than having a completely separate page just for the user to create a account with.

I found variables interesting but it looks like it can get quite complicated. This is another thing I didn't know was possible in Figma such as numbers getting added up for a online shops basket. This is something I feel like I need more practice with as it is more technical than everything else I learned today.

During the variables section, me and a lot of classmates had issues as there was a error saying how it is not in the free version of Figma. Luckily our lecturer for that day identified the issue which I had to apply for a student account, even tough I am signed up with my University email. I was glad this was brought up so I was not restricted in Figma without knowing.

During this tutorial I learned some new hotkeys which are useful for components/prototyping such as pressing ‘alt’ creates copy's of the main component, shift and space brings up a small prototyping frame which I think is extremely practical and shift and ‘E’ quickly switches between design and prototyping in Figma

Below is a link to my Figma file from this tutorial.

https://www.figma.com/design/i6GpyphY6Z1uZWU72KbWgx/Untitled?node-id=0-1&p=f&t=4htk1TzxJbSBF4I8-0