Why Prototype in Figma?

[MUSIC] 0:00 Hi, I'm Nick. 0:04 When creating software like websites and 0:06 mobile apps, one of the most important parts is the user interface. 0:08 As creators of software, 0:13 things like the layout of a web page, the shape of buttons, or even a font 0:14 choice is a visual language that we use to communicate with the audience. 0:19 It tells people what pieces of information are most important and 0:24 how they can interact with that information. 0:28 In order to explore this visual language and 0:31 find the best ways to communicate ideas, designers will often experiment 0:34 with many different possibilities and iterate on the directions that work. 0:39 And with looming deadlines and 0:44 the high cost of engineering finished products, it's important that designers 0:46 are able to iterate quickly to find the best solution as soon as possible. 0:50 [SOUND] Even before we create a solution that communicates with end-users, 0:55 designers need a way to communicate their intentions to other people on a team. 1:00 Like engineers, product managers, or 1:06 clients that want a project built for them. 1:08 Prototyping with paper or digital tools can help us explore solutions 1:14 at the beginning of a project when it's easier to change direction. 1:18 Toward the middle or the end of a project, 1:22 it's more difficult to make drastic changes because by then lots of code has 1:25 been written to support design decisions that were made at the start. 1:30 We can, of course, make smaller adjustments along the way, 1:34 as it's nearly impossible to create the perfect solution from the outset. 1:37 But when budgets and 1:43 scheduling are a concern, it helps to make the big choices at the start. 1:44 I'm a big advocate of sketching out websites on paper or 1:51 using simple tools to create wire frames which are just simple line drawings. 1:54 But sometimes, when you're working on a high profile project or 2:00 you need to communicate a final version to a client before coding, 2:04 it helps to have a higher fidelity mock-up that's closer to the end result. 2:09 And it's even better if that mock up can include interactivity to give stakeholders 2:13 an idea of how the app will flow from one interface to the next. 2:19 In this course, we're going to create an interactive prototype of a prosumer photo 2:24 editing app for mobile phones. 2:29 We'll do this using a free web-based tool called Figma. 2:30 We'll create a few different states the screen might be in, and then connect them 2:35 together so that when the prototype is shared with other people, they can click 2:39 on different areas of the screen and get a sense of how it might work. 2:44 Now, let's take a look at Figma in more detail. 2:48