Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

What is the difference? Union vs Flatten in Figma

This lesson is exclusive to members

Course contents
SECTION: 10
Tips & Tricks 7:21
SECTION: 14
Working with Illustrator 4:16
SECTION: 19
Saving & History 5:42
SECTION: 24
Teams & Projects 5:19
SECTION: 27
Thumbnail update 4:10

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi everyone, in this video we're going to look at the difference between Union, at the top here, between Union and Flatten, the non-destructive option, and the Terminal, very destructive, but sometimes useful option, all right, let's jump in. 

Let's talk about Union versus Flatten, I'm going to use this example here, onto a new page, and if I go to Outline mode, 'Command Y', 'Ctrl Y' on a PC, you can see, all of the stuff at the top here is cool, that it's still editable, but it makes a really messy document, and, you know, it's-- can you see in here as well, if I go into this, Union, let's call this my "Firehouse", there's a lot going on in here, and while it be final export, just fine, what I want to do is actually just smoosh it down into, like a single drawing, and that's where Flatten comes in. 

So we're going to take this example first, let's make a copy of it over here, let's go to 'Outline' view. So I've got this thing, and it's fully editable, which is nice, but actually, I'm just going to go, you, 'Flatten', and it just gets it back to there, it is, Destructive. Non-destructive is the Union that we did, or in this case, maybe we did Intersect, to get this one. So often, you use Flatten after you use one of these. 

So we used Intersect to make this one, and then just to tidy it up we went Flatten. It's also good when, let's say that, I'm going to grab my 'O' for the Circle tool, I'm going to grab my 'Rectangle' tool, and I'm going to draw myself a little man. So I've done what, 12, I think they're different, but 12 point, he's very stocky, this is meant to be my account man, very stocky, he's the bouncer/account icon, let's line him up. 

Now if I've got this guy, I don't want to export him this way, because it'll be two shapes, if I say 'File', 'Export', now we're going to do, Inspect and Exporting, and stuff later on, but if I want to export this fella, he's going to export two separate shapes to my developer, and he's going to go, "Why is there two shapes?" So normally you'd go Union, and that you could export, you could group it and export, no difference, but let's say I do-- I'm going to undo that first, I'm going to have two versions. 

So this one's going to be unioned and this one's going to be flattened, and they look the same, you're like, "What's the difference here?" It comes to things like scaling, watch this, if I grab both of these, holding 'Shift' down, scale them down, watch this one, who's been-- radius has been set to 12-ish, can you see, it tries to retain that 12, whereas this one is flattened. It's like smooshed a bit, so I can go in here and say, the smooshed bits, it doesn't know that it's a rounded corner anymore, it just knows that this is the shape, I'm always going to be. 

I can go and customize it, I can say, click on this Anchor Point here, there you go, here's my moon face bouncer. So Flatten kind of destroys it, which is sometimes helpful, and Union though would be more common, just leave it editable, you can scale it-- like if I undo that, there is a way of getting around that whole problem, with the Stroke on the outside, or at least the radius. You just use the Scale tool instead of the Selection tool, hold 'Shift' still, can you see, it scales the radius, and that. 

All right, Flatten is for tidying up messy things, that you want to then go and edit on top of, Union, like all the other Boolean operators are non-destructive, you can edit them afterwards, which is probably more common, you'll do more of that, anyway, that is it for this video, I'll see you in the next one.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024