Have you ever taught someone how to ride a bike? In a short period, the wobbly rider transforms from having no confidence to being in control and enjoying the cool breeze blowing in their face. This process isn't always linear and can be filled with a few scratches along the way.
Much like riding a bike, learning any new software or tool such as Figma takes time. You might fall off a few times to understand how to master it. I’m going to share with you some of the mistakes I made when starting with Figma to save you a few headaches along the way. C’mon, let’s get peddling.
Labelling Helps….Honestly
Once I had a grasp of the basics in Figma, like using the shape tools, I was full of as much confidence as a kid in a candy store. Design possibilities were endless and I pushed myself to learn new and sophisticated techniques. In a short space of time, I went from creating memes to designing complex components and prototypes.
Life was wonderful…well, it was until I created my first landing page concept. It was then that I discovered the true pain of poor canvas management.
My eagerness to bring different ideas to life meant I’d spend 99% of my time working on the canvas and only 1% properly managing the design file. In theory, this sounds great, right? Spending more time doing and less time organising. By not labelling anything, what I’d done was made finding and editing any components, groups or individual elements an incredibly time-consuming process.
While this might not sound like a big deal, because I didn't use component instances or properties either, components needed to be updated individually. Searching numerically labelled ‘Frames’ or ‘Groups’, which were out of order, in the hope of finding the one I was after, was incredibly painful. Rather than being a five-minute job to update the border-radius on a ‘Favourite Button’, it took closer to an hour! Multiply that by the number of changes I made to each component and it quickly became a huge waste of time.
When designing, take the additional 10 seconds to label the component, group, or element you’re working on before wrapping up and moving on. The more sophisticated a design, the more important it becomes to have clear labelling conventions. So, the sooner you can form a labelling habit, the easier your life (and that of your future teammates) will become.
Frames > Rectangles on the Canvas
When learning Figma, I thought a 30-day design challenge would be perfect for understanding the basics of the tool and developing a habit to design every day. The first challenge was to design a Back Button. As an arrogant newbie, I thought this was going to be easy-peasy. So I jumped into a new design file without much thought. Once the file loaded, there were no prompts for choosing an artboard, like in Adobe, just a completely blank canvas looking back at me.
Eager to start designing, I frantically searched for how to create a platform to work on. This is when I noticed the Rectangle Tool prominently located in the top menu bar. Reminiscing back to my Illustrator days, Adobe’s artboard options were rectangular. So, I figured this was Figma’s way of managing artboard creation. I clicked on the tool, drew a rectangle on the canvas and started my first challenge.When it came time to export my design and share it on social media (sharing a Back Button, why are you so cool, John?) it became apparent that I had done something very wrong. My design was so large that it didn't fit into a post on Instagram or Twitter. The rectangle that I drew was 5x the maximum size of an Instagram post! Meaning only a fifth of the design could be uploaded at a time. Frustratingly, I had to spend another hour recreating my design so it was able to be uploaded.
When creating an artboard to design on, never use rectangles. Instead, use Frames. Frames are Figma’s versions of artboards and are awesome. To ensure you never make the same mistake I did, when you select the Frame Tool, there are dozens of predefined frame sizes to choose from. Do you want to design for the iPhone 14 Pro Max or a LinkedIn post? Simply select the device or platform and instantly the correct-sized artboard appears. Unlike other tools, Frames also have additional functionality to help you nail your designs, such as auto layouts and layout grids.
Components Are Your Friend
When I started out using Figma, I didn't understand the power of components and how much easier they make a designer's life. From Figma's How-To YouTube videos, I assumed the term ‘component’ was just a fancy way of describing an object. I couldn't have been more wrong.
When designing an element, such as a button, this was the typical process I used to follow:
- Place and manipulate the various elements to create the desired outcome.
- Group the elements to form an object (and not label the group #facepalm).
- Copy the grouped object.
- Paste the grouped object where required.
This approach worked perfectly until it became time to make changes to that particular element - in this case, a button - and there were multiple copied versions of that button scattered throughout my design. If this happens to you, unfortunately, there are no shortcuts, so make yourself a coffee because you have a big job ahead of you, individually changing each instance.
It wasn't until I started studying at Memorisely that I realised just how wonderful components are. As defined by Figma, a component is an element that once created can be reused across designs and projects. Essentially, a master version of an object is created and instead of copying and pasting individual instances of it, linked instances are created and used throughout your design. When you make a change to the main component, this change is applied to each of the different instances that are linked to that component. Amazing, right?
Components will not only save you time, but most importantly, they will ensure consistency across all elements in your design. Even though I believe I have strong attention to detail, I found that manually keeping each component consistent was super difficult.
What I’ve described here is just one aspect of how components can be so useful. There is a whole other rabbit hole to dive into about component properties, which you can check out here.
The Community is a Wonderful Place
I started to learn design around the same time that the Steam Deck was first released in North America. As a massive gaming enthusiast, who had just learnt the basics of Figma, all I wanted to do was join in on the social media hype train and design new interfaces for this revolutionary device.
Before getting to work on designing my perfect home screen interface, the physical Steam Deck hardware needed to be created on the canvas. I wanted to replicate the actual Steam Deck as closely as possible in my design so, I pulled up an image of the console and began creating the Steam Deck one shape at a time. After five hours of solid designing, all I had to show was a grey rectangle, layered with random circles and shadowing. No screens had been designed. No cool animations were added. Just a random grey rectangle that looked like a rock!
Extremely frustrated at how long it was taking to design the Steam Deck, I hit the internet in search of any resources that could help. This is when I stumbled upon the Figma Community. Figma’s Community is a public library where designers can share their design files for other designers to interact with, use, and ‘remix’ (in Figma’s words). It was here that I found a Steam Deck UI Kit that Community Member, Hanfie Vandanu, had prepared. This kit was perfect. It contained full high-definition images of the Steam Deck, an interactive version of Steam’s operating system and in-situ photography from Steam’s major marketing campaign. In a matter of minutes, I had a Steam Deck on my canvas that was primed and ready for me to create. If only I had checked Figma’s Community before I started designing…I could have saved a lot of time, effort, and even a few tears.
The Community is not limited to designing files of niche gaming consoles. It’s packed full of content to inspire you, improve your skills, and save you time. I’m sure almost every iOS mobile design features components from Joey Banks’ iOS UI Kits. Figma’s Community also has loads of different plug-ins that can help make your designs pop. Tools such as Remove BG will change your life.
Don’t avoid Figma’s Community just because it sounds like a user forum. It’s there to make you a better designer. So before diving into designing something, take a few minutes to search through Figma’s massive library. You might be surprised at what you’ll find.
Embrace the Darkness
The biggest mistake I made in Figma… not turning on Dark Mode as soon as it was released in 2022. Seriously, turn it on.
Wrapping Up
These are just a few examples from my experience learning Figma that I’m sure I share with many other new designers. Like riding a bike, the key things to remember are you’re going to fall off a few times, you might cry, and you’ll probably doubt yourself. This is all part of the learning experience and it will make you a better designer in the long run. Embrace the challenge to constantly improve your skills and welcome new learning opportunities. So strap on your helmet, start pedalling, and enjoy the ride.