Figma, or (How a prototype went from a crazy mess to an organized, professional-looking solution) Part 3
So we had our sketches, we had our ideas, we had our fancy grid, but now, what to do with it?
Of course, we could start drawing whatever rectangles and elements we wanted in our website, but that wouldn’t be the most eye-catching thing in the world. At least not in a good sense.
In order to make something that actually looks professional, and provides the user with a good experience ( In other words, a good UX), we needed a Design System. Or at least, and minimal one, for a Minimum Viable Product (MVP).
But what is a Design System supposed to be?
Well, in order to make a design scalable and efficient to work with, we need some rules to be respected in every page and element of our website or app. When working on a simple project, composed of three or five pages for example, it’s easy to keep track of every icon, button, color, text field, image format, typography, and whatever element needed, and if any doubts arise, it’s easy to check another page and see what was already used.
That gets much harden when the product starts having dozens of pages, hundreds of icons, elements, image sizes, components, page layouts, and God knows what else. And that’s when a good Design System really shines. When doubts like that arise, you just check the rules and apply them again. Each element works like a LEGO brick, and the pieces fit on top of each other, repeatedly, resulting in the final building (or product).
In Figma, there’s this really useful feature called components.
Those work pretty much like the famous plastic bricks, you can create each element on a separate tab, and then create references to it on the pages of the prototype. That’s really useful because we’re not getting lost in our elements, and, most importantly, if we change something in the main component, it changes every reference in the entire prototype as well.
Well, that seems like a good explanation, but there’s not a single good enough explanation without some images, so there we go:
When starting a new file in Figma, make sure to create 3 pages (or how many you need, this is just reference, not a rule set in stone). We like using the three of the image. Design System, Components, and Examples.
Now, let’s do an example of how a Figma Component works:
First, create something you want to use in your website, in the example below, let’s suppose we want to use this simple button, and repeat it through the prototype:
Just select everything you want and click the icon on the top. This will group everything into a component, with a purple frame around it. NOW, and this is important, BEFORE DOING ANYTHING, FOR GOD’S SAKE, RENAME YOUR COMPONENT.
I mean it, it’s really easy to get lost when you start having tons and tons of components , and never being able to find anything anymore. You can rename on the left-hand menu.
Fun Fact: If you rename your components like the Windows (or any OS actually) directory structure, Figma actually understands it, and creates “imaginary” folders in order to organize your components when you try to add them again on another page.
Ok then, we have our first component, but now we want to add it to our app. That’s easy, let’s grab our awesome app from before, and click on Assets, on the left menu.
Now you can simply drag ’n’ drop it into your design and there you go, your button is ready to use. Well, almost.
Well, in our case we had a small problem, actually a huge one:
The button was much bigger than the screen!
Well, that can be quite scary when it first happens, but it’s no shame. It’s really easy to fix it, and you don’t even need to delete the element. Just resize it on your Design System Page, and when you get back to the app’s one, everything is gonna be fine. Hopefully.
Now, you might be wondering: “Well, that doesn’t seem like a good workflow. I mean, I basically have to guess the sizes that my objects will have on the main screen and keep guessing until I find something that actually looks good?”
Well, actually no. You can set every element before building the prototype, or you can set every element you need WHILE building the prototype. That’s actually the method we use now because let's be honest, it’s really hard to know everything you’ll need beforehand.
The process is basically the same. Draw the button on top of your screen, make a component out of it, and rename it. Now, you just have to cut (ctrl+X) and paste it on the Design System page and it will work the same way (Make sure you cut it, if you copy it, you’ll paste a reference, and it won’t work as expected.
Okay, now, if you plan to build the design system along with the prototype or beforehand, it’s your choice, but here go some recommendations:
1- Organize it within frames:
Make a frame for each kind of component you are setting, that will be useful later to find them quicker.
2- Create some basic categories and work from that.
We suggest you start with frames for Typography, Typography Pairing, colors, Grids and Spacing, Elevations and Drop shadows (In case you’re using that), and Icons.
3- Do not do Buttons, form elements, navbars, and elements on this page.
Use the Components page for that. If you want even more organization, create “Components_Web” and “Components_App” pages. Because pretty sure they will have different sizes and even designs depending on the device.
Now, go ahead and create some designs!
Well… Easier said than done right?
That’s why in part 4 we are gonna cover the step-by-step on how to create some simple responsive designs to jumpstart your creativity and get your prototype running as soon as possible!