Figma, or (How a prototype went from a crazy mess to an organized, professional-looking solution) Part 2
So, after our first meeting with the prototype, we had to address the elephant in the room for the first time. It was an awkward moment that, looking back, was actually relieving. We just look at it and said: “Well, it’s a little confusing isn’t it?”.
Yes I know, it’s a euphemism, but it was enough to get the ball rolling on how we should change things, and how we would need a much more cohesive prototype and illustrations of the overall website in order to get the project working.
Here is when our tale with Figma starts. We started by getting everything we had scattered around multiple files and started a new Figma file, and here how it goes:
Pretty scary, huh? The blank screen, the enemy of every creative professional. But don’t worry, at least not too much, because it’s not as bad as you think.
In our case, we had what we’re going to be calling “sketches” from now on because that’s what the old prototype basically was.
Don’t feel lost when you first open Figma. It’s a pretty friendly software, we will present the tools as soon as we explore our process. Just keep in mind that there are 3 main menu bars.
The left menu, where we can set our layers (similar to photoshop) and our assets (or components, we’ll talk about them in part 3).
The top menu, where most of the drawing and navigation tools are. Feel free to experiment with them in a blank document to get the hang of it. Also, it’s a good idea to learn the shortcuts for all of the tools in order to get a quicker workflow. Oh, who are we fooling, we have no time to remember dozens of shortcuts, we can always use this amazing cheatsheet created by the artist Shirley Xinling Wang.
The right menu, where we can edit our shapes, sizes of our elements, fonts, grids, layouts. We are going to navigate through this bar a lot. But don’t be afraid, everything will be explained.
So, firsts things first, we had to develop how the elements would be displayed on the screen, or, in other words, we needed a grid system. In special, we used the Bootstrap 4 grid system, you can read more about it here.
This Bootstrap 4 grid system is great, because it is responsive, meaning that it can adapt to different screen sizes and devices, as well it is a library that most programmers are familiarized with.
That’s pretty much how it went. We decided on 4 screen sizes, that would work as middle-ground for all the hundreds of device sizes and screen resolutions around the world. To do that it was actually pretty simple, considering Figma has this tool called “frames” which is basically containers to hold every component we create. We are going to be talking more about these components soon enough. If you want to do some frames yourself, just open up Figma and press “F”, don’t worry about sizes at first, you can always resize them using the right-hand menu.
If you really want to get your prototype up and running as smoothly and as lifelike as possible, you’ll probably want to check the default’s Figma resolutions and devices, you can view them at the right-hand menu, over the design tab.
Keep in mind that selecting one of the default devices will also add a frame on top of your prototype when you decide to run it and show it to your clients.
Now, if you want some columns and rows to help you positioning all your buttons, text fields, labels, icons, and pictures, you just have to go to Layout Grid, also on the right-hand menu, and press the “+” sign next to it.
Now it’s time to give this simple grid a Bootstrap 4 look, dividing it into 12 columns. To do that it’s really easy, just click on the squares next “Grid (10px) and click on the bold “Grid” text, which will reveal itself as a dropdown menu. Here we can select the way we want our grid to display (In the example below, it’s “column”). Now you can tweak it as much as you like, but for a desktop display we set it up as the following:
Remember: You can set up grids on top of each other. In our case, we’ve set a column and a row, so we could organize our placements much easier.
Great! Now you can set up as many screen sizes as you want, but keep in mind that most of the time, we don’t know exactly how many sizes we need to keep our project responsive, and that’s no problem. You can always go back to this stage and set up a couple more grid sizes, but I recommend starting with at least two: One for the desktop and one for the mobile. Check the image up there for more references.
In part 3 we’re going to explore how to set up elements and start populating our screens with content, instead of just grids and silly text.