🚨 Heads up! This course is no longer supported. Check out our Figma Essentials course - it's our go-to UX design tool.
Micro interaction burger menu turned into a cross in XD
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
It is now time to upgrade yourself & learn Adobe XD.
What are the requirements?
- You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
- No previous design experience is needed.
- No previous Adobe XD skills are needed.
What am I going to get from this course?
- 87 lectures of well-structured, step by step content.
- Learn to design websites & mobile phone apps.
- Work with fonts & colors.
- Prototype your designs with interactions.
- Test on mobile phones.
- Send your designs for feedback & commenting.
- Export production ready assets.
- Create your first UX brief & persona.
- Create quick wireframes.
- How to use premade UI kits.
- Learn professional workflow tricks & shortcuts.
- You will get the finished files so you never fall behind
- Downloadable exercise files
- Forum support from me and the rest of the BYOL crew
- All the techniques used by UX professionals
What is the target audience?
- This course is for beginners.
- Aimed at people new to the world of design & user experience.
- No previous Adobe XD experience is necessary.
- For anyone that needs to add ‘UX Design’ to their portfolio.
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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
Transcript
Hello you, are you feeling like a UX designer yet?
We're quite far into this course, you should start feeling very UX-ey...
if you're not feeling UX-ey, you're going to, after this, watch this...
it's another right of passage animation...
it's the cross that turns into the Burger menu...
or the other way around, like the toggle switch...
it's a right of passage, the same as like learning the...
what is it, the Lens Flare in Photoshop...
remember, when you learnt that...
anyway, let me show you how to make this in Adobe XD.
All right, let's make this one, so just need three lines...
one, two, three...
I'm going to make mine...
I'm not going to spend too much time designing them...
I'm just going to make them look okay enough.
Using the size arrow, up and down, and make little rounded ends...
and that looks appropriate, cool.
So let's turn it into a component, 'Command K', or 'Ctrl K' on a PC...
we'll just click the button, we're going to have two states...
default state's going to be the Burger menu...
and then this toggle state is going to be the cross, we'll call it...
and what we're going to do is...
we'll leave the default state as is...
and the cross, we're going to double click to go inside, this middle one...
remember, don't delete it, just turn the opacity down...
so it kind of goes away and fades out.
This top one is going to be 45°...
this bottom one here is going to be -45°...
select them both, and then up here...
we're going to go 'Align Middle', 'Align Middle'...
and just check...
I'm going to click off, click back on...
I'm just going to check if they line up, and they line up, perfect.
All right, so let's start on the default state, let's give this a play...
let's go down here, you ready?
Hey, I love that one, it's cool...
I've done it a bazillion times but it's still...
I don't know, it's still exciting, you do it, you'll be excited...
give it a click, it's hard to stop clicking, doesn't even do anything.
A little bit later in the course we'll build a menu...
that actually pops in, got a little side Nav...
that appears from the mobile device...
I'm going to stop clicking it, and we'll move on to the next video...
oh actually, just one little thing, just to reiterate...
if you do want to change the timing...
remember, have your state selected, Burger menu selected...
and then go to Prototype, and you can click on the different states.
So default state, and if you want it to be...
we'll do ease in and out, that's my favorite one...
how quick, ah, 0.5...
now I'm going to practice., I'm not sure, actually...
I definitely like...
ease in and out...
so I'm doing it to both of these.
So they both do the same thing, and we'll do 0.5...
let's see how it goes, preview...
I don't know, maybe a bit slow, maybe back to 0.3...
but there you go, toggling menu...
ah, click them all.
All right, that is it, I will see you in the next video.
- Powered by Marvin
- Terms of use
- Privacy policy
- Cookie policy
-
- © Bring your Own Laptop Ltd 2026