0. Intro to Figma

As we start building software projects, it's extremely important to know what our project will look like before we launch into the code. This process typically starts off with the user research process and delves into product design to ensure that our product effectively solves the problems that users are going through, but since we're just building a personal website here, let's get right into learning how to work with prototyping tools!

Figma is a great tool to build beautiful user interfaces, as well as for working collaboratively with others on designing these interfaces.

First, create a Figma account (sign up for the Student Pro Plan if you're a student!) and let's start by creating a new file.

Welcome to our new art board!

Welcome to our new art board!

1. Basic Figma Tools

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/40b4ed24-bf8a-4d53-8d29-d82cf87d304d/Screen_Shot_2020-10-04_at_3.10.34_PM.png

From left to right, these tools help us move elements, create new frames, create new shapes, draw, and create text boxes, respectively.

2. Figma Components

When we build apps with a design system, there are typically recurring elements that we might not want to remake or copy and paste over and over again. We can solve that issue by turning those recurring elements into Components!

Let's say we have this button in our design that we want to turn into a Component.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b6e081f4-c192-40cb-a2ac-a6fe0e09a640/Screen_Shot_2020-10-04_at_3.21.10_PM.png

First, select all of the layers that compose the button and right-click. Click on Create Component.