Uber is a fantastic example of a brand that has completely disrupted an industry. In a short time, Uber has made it easier, cheaper, and more convenient for us to get from A to B. It has forced existing players in the industry (e.g. taxi cabs) to adapt their business models to remain relevant and has encouraged customer-focused innovation.
Why am I talking about Uber in a design blog you ask? Well, I think that Figma is the Uber of UX/UI design tools. Since its arrival on the scene, Figma has taken the design world by storm. In research conducted by the Interaction Design Foundation, Figma is now the primary design tool used by 8 in 10 designers in 2023. This is almost 10x more than its next closest competitor, Adobe XD, which is the primary tool used by only 9% of designers. If you look at most UX/UI roles advertised on LinkedIn, you’d be hard-pressed to find a job description that doesn't mention Figma.
For new designers entering the space or experienced designers using other tools, there has never been a better time to learn how to use this amazing tool. In this post, I’m going to discuss the most important things that you need to learn about Figma when first starting. There is no one size fits all guide and depending on your role you might need to develop other skills, but this is a good place to start.
Understand Figma’s Interface & Navigation
Like with many things in life, you must learn to walk before you run.When you first open Figma, take a good look around and figure out the visual layout of the tool. Figma’s interface is very clean and well thought out. You’ll feel at home in no time.
Developing a solid understanding of Figma’s fundamental tools should be your next priority. This includes, but is not limited to, learning how to create frames and shapes, and experimenting with the pen and pencil tools. Additionally, invest time in understanding how to use the Layer and Property panels, both of which play a major role in your workflows.
Once you have the basics down pat, it's time to move on to playing around with things like colour and text. This will help build your understanding of what is possible on the canvas (and believe me, the possibilities are almost endless).
Creating & Managing Components
Figma’s component feature allows you to create reusable design elements, such as buttons, icons, and menus. Learning how to create and manage components can save you so much time and help bring a level of consistency to your work. As I’ve described in another one of my blog posts, I didn't understand the importance and power of components in Figma when I first started. My typical process would be to design something, like a button, then simply copy and paste it whenever I needed.
While in theory, this approach sounds logical, you quickly learn how flawed it is when you need to make a change. Rather than being able to change the colour of the button and then push it to all of the other buttons in the design, you need to manually go through and make the change on each button. Not only will this make you want to quit your job, but it can equate to hours of additional time needed to finish a design and dramatically increases the risk of creating inconsistencies in your design. Ain’t nobody got time for that! The sooner you understand how to create and manage components the better.
Working with Grids & Layouts
Figma has a variety of grid and layout tools that can help you create designs that are perfectly aligned and easy to navigate. Understanding how to use these tools effectively can improve usability and user experience.
Don't go off the grid!