[1/3] Tools every wanna-be designer needs to know about 🔍: Figma! (17:00 - 17:30 | 23/02/2022)
This short lecture was run by Ironhack with Eventbrite.
A wireframe when progressed to a prototype can be a visual mockup of a user flow. It establishes the basic structure of a page. We use wireframes to test the functionality and User Experience (UX).
Low fidelity- first concept usually hand sketch for initial comment. This is just for the main content.
High fidelity - more detail such as brand colours, styles, buttons, icons etc.
Always test functionality first then test the appearance.
Prototype link: this is for when you have interactivity on your wireframe e.g a frame has a button, user clicks this button, then the next wireframe is rendered. This helps to show a document flow. In terms of teaching, this is about all I gained (prior knowledge was basically from a figma crash course video by Kevin Powell) otherwise I knew figma’s basic uses which the presenter provided a high level overview. However, I didn’t know about prototyping beforehand and although it was not covered in detail, the mention of it allowed me to do my own research. 📖
- In the figma design, click the prototype tab, then click the element that you want to add interactivity to e.g. button, img, icon, link etc.
- On the right hand pane there should be options to choose the type of active state e.g. click.
- Various blue nodes should appear, click and drag a node and point the arrow to the result of the interaction e.g. if it was a thumbnail img, the arrow would point to a fullscreen img.
- There should also be a blue box with arrow, this displays which frame represents the starting frame.
- To test the functionality, click the play button on the top right, which opens the starting frame. Here you can try out the function, the frame will pulse blue prompting the components with interactivity.