How I Design for IMPACT With Figma

This course is all about “next level UI design”, and if you’ve followed my content for a while you’ll know I’ve used Adobe XD for a lot of my work. However in recent months I’ve started transitioning to Figma, so if you’re in the same camp you’ll find this course especially useful.

We’re going to be starting from a wireframe (which you can grab here via Figma Community), then we’ll focus on changing it into a highly professional design, with plenty of tips and tricks along the way.

Don’t forget there are over 25,000 graphic templates compatible with Figma on Envato Elements. Sign up now, for a low monthly subscription, and access absolutely all of them (plus thousands of other creative assets!)

Figma Assets on Elements

I love using grids to base my designs on, specifically a 12-column system like I’m using in this course. Work between 12, 8, and 4 column variants of your design and it will give you the perfect responsive starting point.

Your UI designs will have much more life about them if you steer clear of desaturated greys and blacks. Why not add a simple hint of blue (or another colour) to lift your palette out of the doldrums? 

If you’re designing a suite of icons make sure you keep them consistent in style. If you’re going to use rounded corners, keep them rounded. If you use square, hard edges, keep them hard and square.

Also: maintain a consistent stroke width, so you don’t have some icons that are thin, and some that are heavy and chunky.

Lastly, be creative! You don’t need to reinvent the wheel, as it were, and you’re welcome to use accepted visual language. For example, everyone knows and understands what a right-pointing arrow is asking them to do—it’s a safe and accepted symbol, which is why I’ve chosen to use one here. But, like me, you can use an arrow with your own visual style as well.

The great thing about Figma components and component states, is they help mitigate the chance of design inconsistencies. Take your time to get the spacing right on your master component, and you know that every other instance from then on will be designed right too.

The 60-30-10 rule isn’t so much a rule as a guide, but it can really help you get colours right in your UI design. Use your primary colour for 60% of your design, then apply your secondary colour to 30%, and leave 10% for your tertiary (or accent) colour.

You may notice that I’m using the font Inter throughout this entire document, even on the buttons. If your chosen font is variable, or has a bunch of different weights and styles, feel free to stick to that one font and you’ll get plenty of variation.

Layout is as much about organising and arranging information as it is about leading a user through the page. In this design you’ll see I use angles to pull the users’ eyes downwards, left and right, to present the story I’m trying to tell.

I love a bit of centrally aligned text, but only under the right circumstances! Centrally aligned text only works when there’s relatively little text to read. If there’s too much text, it’s difficult for a user’s eye to track back to the start of the next line each time.

A great example of my Figma learning curve! When using Adobe XD, if you add a colour to your colour library, XD will scan the document for all instances of that colour and apply the swatch to them. In Figma, you’ll need to manually dictate which elements you want to apply the swatch to.

Your hero image is one of the first things a visitor will see! So make sure it’s high quality, and that it’s appropriate for the brand. Check out all the graphic illustrations, perfect for hero images, on Envato Elements!

Gradients are a superb way of lifting your UI designs. Sometimes solid colours work, but don’t be afraid of adding depth and interest with a gradient!

I do just want to mention the rhythm of page design (or sometimes the lack thereof). Often, designers and stakeholders will be keen to get as much up at the top of the page as possible. “Put everything above the fold!” they’ll cry. But if your layout is well designed, with sound whitespace and rhythm, you needn’t be afraid of users not scrolling to absorb the information.

Background blur within your graphics is a great example of next-level UI design. It makes the whole thing more interesting and gives it real depth.

Figma is more than a “static” graphics application, it can help you design motion too. In this section of the course I’ll show you some fantastic hover states to the icons.

Having covered some simple animation, we’re now going to tackle the carousel slider at the bottom of the page. That’s right! Motion within Figma can even handle complex components like this.