Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Prototyping with Figma

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Why Prototype in Figma?

2:51 with Nick Pettit

Figma is a free web-based design tool that you can use in your browser. In order to explore this visual language and find the best way to communicate ideas, designers will often experiment with many different possibilities and iterate on the directions that work.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up