Figma Project: Build a Navigation Menu with Components

Please make more project videos like this one, they're the best way to learn how to use the app!

[@Figma]

Glad you found it helpful! Videos take a lot of work to crank it out, but we know more of these "project style" videos are really helpful.

[@mischugo]

@@Figma I'm on my way from Sketch App to Figma. But there are still a few things that I am missing.

[@mimic182]

Cloning so huge screens just to emulate onhovers will definitely cause the performance problems in a bigger project. Figma needs to have much more easier way to do that

[@Billy_D]

Roman Kamushken I agree, it needs layer based prototyping. I love figma but at its current state it is not good prototyping software.

[@Figma]

We've been continuing to iterate on our prototyping feature over time. You'll definitely want to stay tuned. :)

[@kokerSzpaner]

Well, otherwise it might get pretty confusing how it is actually connected. So far I haven't noticed performance issues for one page (typically about 40 screens per page), I got performance issues with 8+ pages, about 30 screens each. Not perfect but pretty decent. To be honest, if you get to display 100s of screens, your browser would explode, too. But yes, in prototyping, I miss something like scrolling with part of the screen locked on top (imagine scrolling a long page on mobile with menu fixed on top) and animating objects rather than the whole screen (that probably would solve the previous problem, by the way).

[@Figma]

Hey Roman, Overlays are here! Check out the Tutorial here: kzbin.info/www/bejne/qmmViYWalpp3pLs and the blog post here: www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/

[@Figma]

@@Billy_D Overlays are here! Check out the Tutorial here: kzbin.info/www/bejne/qmmViYWalpp3pLs and the blog post here: www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/

[@miloluca7097]

This can now be done much simpler with Auto Layout (and as some noticed, with Overlays). Great job guys.

[@shaun4787]

And using variants for hover states...Figma needs to update this 2018 video with a new one or just say "there's better way you can do this", check out our Auto Layout/Variant video from 2022.

[@jaydee-222]

You should mark these older videos as out of date. All of this can now be approached in much simpler and efficient manner.

[@yonarg6822]

How are you adjusting the padding in the text frame at first? I'm following closely but still can't figure this out...

[@golnoushabdoli7558]

me neither. please do share it here if you managed to figure it out.

[@mikebarkersvideoshop7932]

I managed to do it and now I can’t replicate it.

[@Naz-yi9bs]

Select the text layer within the component layer. Move your mouse inside the text layer, hold down ALT and drag the text layer widths inward and then do the same with the height. It will show you the padding distance from the component layer container as you are doing it.

[@Oswee]

Thank you for providing this video. But IMO it's becomes really bloated pretty quickly if for every state change you should create a copy of entire viewport. I wish Figma could handle multiple interactions for every element like in Axure. It is so common pattern to have popup menu with items. On item hover change style, on click close menu and navigate to other viewport or open another overlay/dialog/modal.

[@EpicFelinski]

Yes. At least, have a custom navigation bar that follows each window automatically. Routing between all of them is a pretty big hassle.

[@cortjezter]

I have to admit, the custom layout grids per frame is a mind-blower, especially having been confined to Sketch for a few years. However, the snapping behaviour demonstrated in this video doesn't seem to cascade to instances of the component; it only works in master components (Dec 21). Trying to utilise the same concept to build table components, and the snapping to ensure proper resizing would be incredibly helpful!

[@Figma]

We just released Overlays for Prototypes which makes this much easier, no more duplicating Frames! Check out the Tutorial here: kzbin.info/www/bejne/qmmViYWalpp3pLs and the blog post here: www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/

[@scritchproductions]

how do you create multiple prototype states? currently you can + when prototyping to select on click but then when you add another state it doesnt let you select anything for example on hover > displaying button hover variant, on click > navigate to >

[@ajayji1009]

You also need to mention that you are making a dropdown with hover effect but after prototyping, we have to click on to go to the next frame. There is no way to see the hover effect by hover a menu item. Am I right?

[@sonia4313]

It would be cool to create directly a button like they do in PDF instead of having to duplicate the screen, it's kinda not really modern and makes me think about a powerpoint, having to do that. The other features are great though, hope to see new features at some point :)

[@elizabethrose4634]

If I could love this video, I would! I'm super beginner snd this is the game changer I needed. Thank you for a concise and super helpful tutorial!

[@ahmetdgn]

As seen on the virta website, the submenu would appear with hover in this example. However, in your example, you have to click on the menu, the menu does not appear by itself when the mouse is hovered over the menu. So -_-

[@initvik]

Why I cannot see the shadow guidelines in zeplin when I export the frame.. please let me know I had added a inner shadow to a navbar I can see it in the figma but cant see it in zeplin

[@collegefraud1308]

When you are resizing elements to add padding between the frame and text, what are you pressing that allows you to see the measurement differences as it's being adjusted?

[@staciedaponte2533]

Same question, I am not seeing the 16px that is shown in this video

[@leeren_]

would like to know too

[@leeren_]

Ok just figured it out - it's the option key - hold it while the text element is selected and it'll turn red

[@Rinacks]

I see people doing dropwdowns with variants but it still seems a bit difficult. well for me at least. I'm prototyping a website and was looking for an easier way to do it

[@elleon1081]

I love you, Figma!

[@kennethlucas]

Is there an update to this video that shows how this should be done with auto layout and such? I should be able to type whatever and the box resizes, not have to drag it myself, and have the arrow position with it. There HAS to be a better tutorial right?

[@mankindstudio4649]

I must say if Flinto function been mixed with Figma = even better. Hover states as additional pages could be just "behaviour" within that page, this would decrease number of pages within project.

[@ЕвгенийКостюшин-ь5п]

Thanks, great video! A lot of important and useful information. And a calm voice)

[@hrmoine]

Hi ! Thank you for your product. I have a problem, when I open an other file (like when your open your screenshot to put the menu in), i don't have the footer with my library of my components, build in the primary file... Do you have any idea ? Thank you !

[@Figma]

Hey Hrmoine, I'm not sure I fully understand your issue, but it sounds like you might be looking to use Components created in File A in a different File B. You can do this with the Team Library, which is available to publish Styles for Free Starter Teams, however publishing Components is only available on our Professional and Organization plans. If you are not using the Team Library, you'll need to use the Components in the same File that contains the Master Component. You can copy and paste Components between Files if you want to use an existing Component as a base any new components or designs.

[@hrmoine]

@@Figma OK i'm think it's because I am on the free starter teams version ! I will upgrade it soon. Thanks for the answer !

[@tiffanyshelly1669]

Is it possible to get an updated version of this using the current features

[@Figma]

Hey Tiffany, thanks for the feedback. While we don't have anything planned in the very near future, we do know that this video is no longer the current, best way to create a navigation menu. We have some other features the team is working on that, once completed, would be a great time to revisit this. Be sure to subscribe if you haven't already to be notified of any updates, and thanks for the feedback!

[@tiffanyshelly1669]

Figma thank you and thank you for responding I was able to create everything but got stuck with joining the actions because the same features aren’t there.

[@noeticsnatches2637]

@@Figma Hello! Could you guys please give an indication of this in the video descriptions of those that are outdated? I was trying to do a certain action without success and was worried that it was a mistake on my part.

[@evgeny1463]

Thanks for posting this, guys. Really helpful.

[@zlanaj]

Will this work if I have the menu components on one page and the website layout in another? Because I always want to separate my library of components from the actual layout design.

[@Figma]

Hey @Braveheart06111984, this definitely will work that way. You can move you Components to a new Page by selecting them, right clicking, and choosing "Move to Page". You can also keep your Components in a separate File by publishing them to a Team Library if you're on a Professional Team Plan. Then you can use Components from one Library in all of your Files. You can also use this Plugin to use a workflow similar to creating Symbols in Sketch if you're used to that: www.figma.com/c/plugin/749583881837062159/Component-Page

[@luciernagagalactica4436]

Thanks a lot !! Good tutorial and well explained. Excellent Prototyping's engine.

[@chuckar8570]

hey man what plug in are you using i can find this one and its so useful, i try 4 different ones to measure my text and i cant fins this. please let me know

[@aliaksandrasaywell3826]

Hi @Figma! Thanks for sharing this tutorial. However, it is from 2018. Is it still relevant for Figma version in 2021? Thanks.

[@johantsdev6924]

Please how do you do for the padding at 2min12 ? Is it a shortcut ?

[@AwizardP]

Dear Figma. I cant get it. I do everything as you say, but it's impossible to swap the states on the DropDownMenu. Moreover the dropdown list turns out into a single blue line called "Lable". What am I doing wrong??? Please Help me.

[@adebayojoel5203]

Same her

[@yebako666]

Hi. I can not repeat hover effect :,(

[@rudiboshoff8201]

1:53 is this background feature still available in Figma? I do not see it after clicking on the master component.

[@Figma]

Hey Rudi, a recent new feature called Auto Layout came with a few other changes, such as removing the background property and replacing it with Fill. You can watch the video tutorial for Auto Layout here: kzbin.info/www/bejne/hKOuiWdsed-efbM

[@Eric-zy6et]

@@Figma I was wondering the same thing, suspected it'd been replaced, and you've confirmed it. Thanks!

[@DjaDjaDjinha]

Is there another way to make the ListItemHover overlay the item on dropdown menu? I don't use Mac, so I'm trying Alt+Ctrl instead of Option + Command but it doesn't work.

[@benfrese3573]

The PAUSES drive me crazy. They feel sooooo wrong! Overall still a good video, but please fix this.

[@crusenho]

What if the drop-down menu is very long and it needs to scroll down? do you know how to scroll down the menu navigation while inside it? I am having a problem don't know how to do it.

[@stacy_isa]

WOW so useful! thank you))

[@Johniker26]

See how it works in Adobe XD without frame to frame

[@Davinyl]

How do you adjust both margins in the text element at the same time as seen at 2:18?

[@Anestis88]

I'm wondering about this exact thing too and cant find anything on Google.

[@Davinyl]

@@Anestis88 hit alt+windows button while dragging the mouse. for mac I think it's command and alt.

[@williamvalvo3110]

Having a weird problem with snapping. Regarding the dropdown menu, when the master component is resized, it properly snaps to the layout grid, but the instances do not. Can anyone help?

[@cortjezter]

Can verify this is still the current behaviour, some three years on…

[@terraflops]

How did your Prototype work? Mine failed to work. Otherwise informative video, thanks

[@Figma]

Hey Z Dax, if you're experiencing a bug with prototyping, you can reach our support team from the in-app question mark in the bottom right corner. You might find your answer by watching Getting Started: kzbin.info/www/bejne/jmbUmnWtptWnm80 some newer prototyping tutorials: kzbin.info/aero/PLXDU_eVOJTx7aqRW3Skp1aRT9ktC3ctqA Or reading our Help Center: help.figma.com/hc/en-us/categories/360002042553-Using-Figma#Prototyping

[@scritchproductions]

hmmmm axure has a really simple prototyping for button instances and hovers - this is unnecessarily complex especially duplicating screens. I have a long scrolling home page and this is really impractical to copy over just to get a menu hover state.

[@hizzacked2132]

Is it possible to do those hovered states now with the new overlay feature? I can't figure it out or get it to work

[@horukye]

It's in a recent video

[@AwizardP]

Kye Novica what's title of the recent video?

[@SagarYadavIndia]

Option and Command in windows will be equal to. I think this is good work but the customer orientation is not there as the instructor fails to recognise that there can be windows users.

[@HrushenkoOo]

hi. 10:15 you hold on option and command. what do i have to hold on on my windows laptop?

[@csbro8368]

while dragging the new instance, hold Ctrl + Alt

[@alicepardis]

ugh so many artboards for one hover effect - this should be component based already

[@Figma]

Thanks for the feedback. We completely agree! Stay tuned for some exciting updates (coming soon) to make this easier! We'll have something up here on the Channel, but also keep an eye on our blog here: www.figma.com/blog/

[@alicepardis]

@@Figma amazing so glad to see this being implemented!

[@flirtcrackah]

A year after and nothing got shipped.

[@hoganchang7340]

After create the label component, there is no BACKGROUND property. Why?????

[@everythingaboutestonia]

you lost me in 2:15. how do you get it? it does not work for me. Due Figma's UI3 update, please update this video. Majority of things do not exist anymore and following this tutorial now is outdated. I cant do half of those things anymore.

[@amandaantonon1400]

Thank you so much for this tutorial!

[@hawkintelligence]

I like how no one can follow along at all. Since I don't have a background option for my software. No idea how all your settings can be that different. lol

[@Ch3sterB]

Its called 'fill' in mine.

[@laurenceccotti6345]

You cant' resize the clippin frame on a component instance.... It's not overridable ? :/

[@jeromeknoot539]

How do you add the space as shown in 2:10 of the video? Please link or create a tutorial video about padding :-)

[@joeyabanks]

Hey Jerome! This was done by holding the Option key while dragging. Can be done vertically, horizontally, or diagonally. Hope this helps!

[@cloudeater9571]

I had the same question. Ty both !

[@TheBeeOBee]

@@joeyabanks I am on an OS without an "Option" key. Does anyone know how to od this? i am holding down everything and dragging.

[@franzinera68]

It's there a way to indicate to the logo in the top nav bar to go back to the home page without having to connect it manually on each page?

[@Figma]

Hi Florencia, If you create a Component for the logo, you can create a prototype connection from the Master Component to Home Page, then every Instance of that Component will have the same prototyping connection. That means you'll only need to do that once. Note: This only works with the Master Component being a part of your prototype, and not from a published Team Library.

[@giancarlodibella7093]

Isn't there a better way to prototype hover states? like for example in adobe XD?

[@Figma]

Hi Giancarlo, Smart Animate and Overlays would be a great place to start. The team is definitely keen to bring more powerful prototyping using states in the future, but that isn't available today.

[@konrad8015]

How can I have consistent spacing between all nav items?

[@minibuilds1497]

Thanks. This is great.

[@FloKorp86]

Hi! Can you please re-record this using auto-layout?

[@romaknafel4116]

hey my gf made me a costume navigation menu throguh canva but idk how to implement on my website please help me with this one

[@10Alive]

@2:12 You used a command to create margin for the LABEL component. What command did you use, or better how did you realize that effect to get 16 padding on left and right.

[@10Alive]

I think I have got it. "Alt + drag"

[@jeromeknoot539]

'Alt + drag' is not working for me. Can't see what I'm doing wrong.

[@PhiLLRamey]

@@jeromeknoot539 I was just running into the same thing and found it only worked if I first turned the text into a component. Then you can select the text within the component and alt+drag. That said, I don't see are the nice indicators of distance between the edge and the text when dragging. I have to look at the properties in the top right to see the x offset.

[@TheBeeOBee]

@@PhiLLRamey ahh thank you for adding that it has to be a component. I was stumped!

[@TheBeeOBee]

I can't figure out why this is so hard for me. If i hit alt, it just creates a duplicate.

[@HeavyNoodle]

Hey Figma, thank you for the video. It is made too fast & confusing, when you do a new tutorial version please lower the pace and spend more time explaining the steps, it's frustrating to watch for it's so hard to follow. Looking forward to an update, cheers

[@GauravSharma-ce8rg]

Hi, Need help with creating header components with multiple things in it. Can I connect with someone regarding this ?

[@Figma]

Hey Gaurav, because Figma is always rapidly evolving as we add new features, this video may not be the best resource for building a header. If you haven't watched it already, I'd suggest you view our "Getting Started' playlist that contains a full Figma project file in the video description. If you duplicate that File, you can take a look at how we've built the included header component, which might give you some ideas.

[@BEPrimAnim]

How on earth did the files end up in the library?

[@LyronAguiar]

What are the windows commands?

[@sayeedafzal5952]

While dragging the text label (2:15 ) the values are shown in red color (16px & 15px). I am unable to see the values. How can i get them?

[@lauarga408]

Hey! Did you find out how this works? I'm having the same problem. Thanks!

[@sayeedafzal5952]

@@lauarga408 Nope

[@lauarga408]

@@sayeedafzal5952 Found it! If you're on a mac hold the option key while placing the cursor between the text field and the background.

[@balehin]

Hello, is it possible to create a transparent navbar that turns solid as you scroll in Figma? Thanks in advance.

[@Figma]

Hi Salehin, this isn't currently possible. An onScroll interaction isn't available in Figma. It's certainly a useful option, so maybe we'll see something like that in the future!

[@IKolpikov]

Just make 2 instances of this bar and your programmers will add this during the dev. But for prototyping Figma is missing some action triggers at the moment.

[@shridharpatil474]

Where can I find instance swapping?

[@omeganter]

Goes too fast and uses some function keys or Figma does not behave like this anymore and is dated. For example once the text is converted in a component, adjusting the box is not working to me like in the video.

[@ola95003]

windows commands? please

[@Varangian2000]

Alt

[@Digital.Done.Right.]

You should somehow note that with auto layout and variants much of this is not necessary anymore

[@codeguy7309]

until 7:35 I could follow the tutorial up to date. Looks like figma has now visual grids so this layout part is completely unnecessary.

[@MarkLaPoint]

Can’t tell and not seeing how to do an override. And I can’t tell off the video. Makes is hard to continue the tutorial

[@HeavyNoodle]

2:12 I don't have those red lines showing me the dimensions 🤔 a/o knows how to activate them ?

[@tetianamakhlai1037]

I have the same problem(

[@தமிழோன்]

This video was made in 2018. A lot has improved in Figma 2021. Check latest tutorials.

[@marcelbonfim6297]

Muito bom! Obrigado pelo tutorial!

[@ai6503]

What is the key combination at 10:15 on windown?

[@csbro8368]

while dragging the new instance, hold Ctrl + Alt

[@Muhammed.Yaseen]

Guys, delete old tutorials and upload new ones! Come on!

[@ck-dm7bt]

it's better to use open overlay rather than creating one page for each hover state. This would be too complicated.

[@sunilsunny2587]

Watch at 1.25x unless you wanna fall asleep, Resist Joey's *Sleep Charms*.

[@KINGOZYMANDIAS]

Not the most productive way i would say, why duplicating the whole homepage to display the drop down when you can use the drop down in overly on the original home page?

[@ForwardPixels]

This is an old tutorial. The overlay feature didn't exist when this video was created, you should use overlay now. Figma needs to update these videos, they're creating confusion.

[@mzhuro]

Hiding dropdown values by clipping content is soooo bad boy workaround

[@iLoveTurtlesHaha]

But you do it because you're bad as well. XD

[@adelalazur3341]

I was hoping for an advice, find none. Who will ever need a navigation menu that is only a decoration? You can't click any of the items in the dropdown.

[@tofugakiraidesu]

Use option + command Me with not an apple laptop: WTH IS OPTION + COMMAND?!

[@noeticsnatches2637]

Control = Ctrl Option = Alt Command (cloverleaf) = Windows Delete = Backspace Return = Enter

[@tofugakiraidesu]

@@noeticsnatches2637 thank you very much

[@snmbala]

I guess this was before autolayout

[@callmehanu3799]

It's a pity... l love Figma but this is a really complex and outdated implementation. Hope someday Figma rethink all its interface with a simple approach

[@prefuse1973]

This example was before Overlays were implemented. There's a vid for it here (turn down your volume first :) kzbin.info/www/bejne/qmmViYWalpp3pLs

[@IKolpikov]

Name the soft easier, i dare u.

[@alexdesforges6377]

@@IKolpikov Flash!

[@stevejobzspoons4711]

Badly explained at the end. I doesn't explain the core of the Video Title. How do you make the links active.

[@miqrashimran]

Re-create this video, it's outdated.

[@byronparis7583]

WOW

[@darkhorse99900]

Not the best time to watch diabetes dropdown menu while eating fried chicken

[@boubeniamohamed236]

Oh god...so complicated

[@vadeblade]

Dude!!! Too FAST!!! Slow down!! How about pausing when you are selecting something from the menu, and pause on some of the commands you are using.

[@TheRafark]

You speak too fast. We’re trying to grasp all the concepts & tools and it’s impossible when you talk like you’re in a rush to finish the video.

[@IchHerzRock]

unfortunately he's right :( cant even help myself with 0.75x speed

[@Mmmmeow]

this is very difficult to follow

[@SinaShahrokhi]

ok ! unlearn! unlearn! what was that ?

[@micheleb7995]

11 minutes of tutorial to create a basic menu... nice try, but I'll go back to Axure, where I can create a menu in one click.

[@sergeyd2199]

Screenshots for color picking? Are you serious?

[@ahhdreein]

wow

[@zyhru]

bro speak with ya chest !

[@thomaslarmit6434]

This tutorial is just bad for beginners. Can you atleast explain why you do certain things instead of just saying do this or that...

[@gxramirez]

this is super involved, yikes

[@mr.dabilin8803]

Very boring and long!!!!!!!!

[@gkekrt]

God, your "S" sounds are killing me. it hurts my ears literally