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!
From left to right, these tools help us move elements, create new frames, create new shapes, draw, and create text boxes, respectively.
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.
First, select all of the layers that compose the button and right-click. Click on Create Component.
This changes the button layers to become a Component in the Layers panel.
Switch over to the Assets panel, and now you'll notice that your component is in your library and ready for you to double click on or drag and drop into your design!
