Figma Firsts: How To Get Started

As an engineer with a background in visual arts and an interest in frontend engineering, learning Figma seemed evident in my future. It wasn't until recently when a friend suggested it that I took looking into learning Figma seriously.

Immediately, I saw the potential behind this tool and how it can enhance my abilities as an engineer, while furthering my interest in UX/UI design. So in a way, I was killing two birds with one stone.

So I figured I'd carve out some tips on how to get started with Figma to get you started on creating layouts while displaying how I use it in my everyday life!

Getting started is pretty simple. There is a free version that can be accessed by anyone by just making an account on their site. Once your account is created, you'll be brought to your working page with a dashboard.

If you look around, you might see some familiar icons if you have experience with any drawing or photo editing software. Icons like text, pen tool, vectors and other tools exist in the Figma world just as they do in Photoshop, Illustrator, Gimp, etc. These icons serve the same purpose from prior use, so if you have prior experience with these tools, you'll feel very comfortable. And if you don't, thats totally cool too. Figma is very intuitive and does a lot of the guessing work for you, so the tools should come naturally to you with little time.

Starting a layout is like staring at a blank code editor. It can be intimidating to start, especially when you're just learning. I recommend looking into the free resources Figma offers and peruse their layout designs. It's a great way to get a deeper understanding of what's possible in Figma.

But sometimes research isn't enough to get you motivated to start designing things yourself. To really understand how to use Figma, you have to create layouts yourself. I found this daunting in it's own right. Even though I have a background in visual arts, I'm still learning how to take my visual vocabulary and transfer it to tech which has it's won concerns of accessibility, legibility, hierarchy, etc. This made me wonder, if I'm feeling overwhelmed, what does it mean for others who have little to no design background?

Regardless of the type of background you have in art and design, a great way to get into start designing is to copy other layouts.

When I was at art school, a common quote my illustration teacher would say if "You're only as good as your reference". What he meant was that our ability to show our full potential in an art piece is as good as the photos we are working from. The quality of your reference photo for a drawing or painting can foreshadow the quality of how your art piece will come out. Because if you can't understand what you're drawing from, it will be reflected onto the canvas.

There's a reason why as an art student, I was made to copy the paintings of Rembrandt and Caravaggio.

In order to be the best, you have to learn from the best. So regardless if you're a UX/UI master or a junior developer, copying layouts will help you understand design at first hand. It will help you understand the basic tools of Figma, but also allow you to practice effective design habits. This is crucial because it will allow you to build up your own design vocabulary that you can draw from and customize to your own aesthetic.

This only enhances the importance of having resources. So, if you find a template that you like, click on template, and scroll down to the bottom.

Click "Copy to Figma". The page will bring you back to your work page with the layout of the template.

From there, challenge yourself to duplicate the template yourself. Similar to coding, if you don't know how to do something, look it up.

I must have mentioned this a thousand times before, but I'll say it again. Don't be afraid to use resources and outside references. If you get stuck, look on forums, youtube, and the Figma resources page to understand the best practices. You can never have too many references.

What's great about this is that you are given a concrete objective and goal on what to create. Don't feel bad if you are unable to duplicate everything in its entirety. The point is to acquire a basic understanding of the tools you have and gain experience on how others have utilized them.

Below is an example of the login page for the Food Delivery UI Kit that I replicated.

You'll notice a lot of inconsistencies between the original template (left) and my in progress duplicate (right). The colors are a bit off, the fonts may be a bit bigger, and the spacing might be slightly different, but for the most part, I accomplished the goal of duplicating my first frame.

This leads me to my next piece of advice, don't sweat the small stuff. There may be some features you won't be able to replicate yet. That's to be expected. There are a variety of ways to construct a layout which is why it's important to take plenty of time to get the fundamentals down.

I intend to further inspect the template log in page to continue working on the check box for keep me logged in, as well as getting the sizing the same. Then I can proceed to the next frame.

What I really like about Figma is similar to Frontendmentor.io, they give you a fully fleshed out piece and you have to reverse engineer it. To some, this may be a bit overwhelming, but maybe I'm accustomed to it because I can attribute it to drawing from a reference photo. I understand what the objective is, and I have a clear reference to guide me in the right direction.

So far, I'm excited at the prospect of practicing Figma and gaining more knowledge. For now, I plan on using it to create better and more in depth layouts for my job when I'm building out new pages. My goal is to eventually start utilizing wireframing and components to create an even more immersive layout and eventually high end prototypes.

Takeaways:

-gather resources (ie: youtube tutorials, forums, join Figma groups,follow Figma developers on social media, read Figma resource articles)

-take the time to explore the dashboard, home page, and tools

-copy other people's layouts

-for best practices, abide by Figma resources

-have patience and don't worry about perfection, we all start somewhere