Todays lecture was taken by Ronan, and it’ll be about prototyping in Figma
The first thing we went over was linking a frame to another one, so when you click on the prototype pad the UI will slightly change allowing you to create flows and commands, I set it up to where if you click frame one it’ll turn to red and when you click the frame two it’ll change to green.
We were also taught what each action and trigger option does, a lot of them are self-explanatory telling you themselves what they do, I.E On click, Navigate to.
We were shown a simple animation from a frame, interesting thing to note here is that it fades in, why? because they’re two different frames with two different shapes
Shape has to have the same name for it to smoothly switch position, colour and size as shown below
Screen Recording 2025-03-19 at 10.31.34.mov
We were then shown components which had been covered previously on Monday’s video, i created 3 instances and add colour to each one. I then changed the position and added the commands.
Screen Recording 2025-03-19 at 10.42.18.mov
The next exercise was to make to make these air-pod pro max turn-wheel, to do this we had to create 3 different variants of the headphones, a clear straight one, a blurred right and left one. Of course all the names had to be kept the same, but instead of clicking on the image we had to set it to drag to make it appear more authentic. Then we added ease in with 300ms which makes it look smoother, see below
Screen Recording 2025-03-19 at 11.12.00.mov
We then learned about overlays, in the video you will see that there is a flow connected from the app to the sign in form, when selecting an action you press open overlay and choose the destination, in this case it is the form and then you connect the profile button at the bottom as well, making the action “on tap”. see below:
Screen Recording 2025-03-19 at 11.31.17.mov
We then made a variable for the prototype, just changing the box to grey so that when it is hovered over it’ll turn black