Layout & Design, Plugins

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)

Joseph

12:55

71K views

Aug 19, 2025

About this lesson

In this lesson, we’re going to cover two key tools that can help you move your existing design assets into Framer: the Figma plugin and the HTML browser extension.

Whether you’re grabbing pieces of a live site or entire sections from Figma, these tools make it easy to take the hard work you’ve already put in, and quickly move it on over to Framer.

Let’s take a look at how each of these tools works.

https://www.youtube.com/watch?v=lMsNh4uzinU&t=0s Intro

https://www.youtube.com/watch?v=lMsNh4uzinU&t=20s Installing the Figma plugin

https://www.youtube.com/watch?v=lMsNh4uzinU&t=96s Selecting and copying layers from Figma

https://www.youtube.com/watch?v=lMsNh4uzinU&t=181s Pasting into Framer and setting up layout

https://www.youtube.com/watch?v=lMsNh4uzinU&t=245s Importing larger sections from Figma

https://www.youtube.com/watch?v=lMsNh4uzinU&t=359s Checking responsiveness and font considerations

https://www.youtube.com/watch?v=lMsNh4uzinU&t=426s Installing the Framer browser extension

https://www.youtube.com/watch?v=lMsNh4uzinU&t=502s Selecting and copying elements from a live website

https://www.youtube.com/watch?v=lMsNh4uzinU&t=580s Pasting the footer into Framer and adjusting layout

https://www.youtube.com/watch?v=lMsNh4uzinU&t=671s Resizing and refining responsiveness

https://www.youtube.com/watch?v=lMsNh4uzinU&t=717s Responsible use and site protection

https://www.youtube.com/watch?v=lMsNh4uzinU&t=750s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00in this lesson we're going to cover two 0:01key tools that can help you move your 0:03existing design assets into framer our 0:06figma plug-in and our browser extension 0:09whether you're grabbing pieces of a live 0:10site or entire sections from figma these 0:13tools make it easy to take the hard work 0:15you've already put in and quickly move 0:17it on over to framer let's take a look 0:19at how each of these tools 0:22[Music]0:24Works let's start with how the figma 0:26plugin works here I've got framer open 0:29and I've also got open so to prevent any 0:31confusion when I switch over to figma I 0:34have changed my desktop wallpaper 0:36slightly to be purple so it's a little 0:38easier to tell figma apart from framer 0:41as I'm swiping back and forth but here I 0:43am in figma and the first thing we want 0:44to do is get the plug-in installed so to 0:47speak so I'm going to head down to the 0:49little toolbar and click on the actions 0:52icon you can also press command K on a 0:54Mac or control K on a PC at any time to 0:57bring this menu up and I'm going to go 0:58to the plugins and widgets Tab and here 1:01I'm just going to search for framer and 1:04the first thing that should come up is 1:06figma to HTML with framer that's our 1:08plugin this menu that appears gives us a 1:11brief description and the option to run 1:13the Plug-In or save the plugin I'm going 1:16to save the plugin so that it's handy 1:17for us to get back to later on because 1:20this isn't going to be a one shot deal 1:22we're going to go back and run the 1:23plugin each time we want to bring 1:25something over from figma to framer so 1:27I'm going to click save and now at 1:29anytime on the all tab I'm going to find 1:32figma to HTML with framer here and 1:34essentially all we need to do now is run 1:37the plug-in but while we have layers 1:39selected that we'd like to bring over to 1:41framer so essentially instead of hitting 1:43copy to copy layers from figma we're 1:45going to instead select them and run the 1:47plug-in the plugin replaces the copy or 1:51command C or control C function that you 1:53would normally do to copy things from 1:54point A to point B so like I said we got 1:57to get something selected first so I'm 1:59going to start small it's always helpful 2:01to start kind of bite-sized because not 2:04everything comes over 100% perfectly 2:07there are some discrepancies in terms of 2:09what's supported by figma versus what is 2:11supported uh by framer in terms of the 2:14overall feature set style properties 2:16components Etc so good to start small 2:19I'm going to grab the navbar and if we 2:21look at the layer list the hierarchy 2:23here is really simple we have the 2:24desktop which represents this whole uh 2:27sort of breakpoint the page the viewport 2:30um I've already got that going on over 2:32in framer so I don't need to bring that 2:34over I've already got my main parent 2:37frame it already has a white background 2:39so I don't need to bring that over I'm 2:40going to start with its immediate child 2:42layers so starting with the navbar with 2:45this selected like I said I'm going to 2:47come down here and I'm going to run the 2:49figma to HTML with framer plugin and 2:52that effectively copies my selection to 2:55the clipboard so now that I've copied 2:57the nav bar I can head over here to 2:59framer and I can just hit paste we don't 3:01have to run a plug-in or anything like 3:03that I'm just going to press command V 3:04on my Mac for paste and it has now 3:07imported those layers in fact the autol 3:10layout properties from figma came with 3:12it so I've got a semi- responsive Navar 3:15here right out of the gate easy as that 3:18and if we look over on the properties 3:20panel the width is automatically set to 3:22100% because the width was set to fill 3:24over in figma so that came over that's 3:27really handy but one thing that I do 3:29want to do before I add more stuff is I 3:31want to take my entire desktop 3:33breakpoint and I want to add a layout to 3:36it for a couple of reasons one I want 3:38each section to automatically flow from 3:41top to bottom so starting with adding a 3:43layout I've established a stack so now 3:47that this is a stack theoretically each 3:49section that I paste in is going to flow 3:51from top to bottom because it is a 3:53vertical stack and it's set to 3:55distribute from the start which is the 3:57top uh of a vertical stack the other 4:00thing I want to do is change the height 4:01from 1080 which is eventually going to 4:04be too small to fit content so now that 4:08I have it set to fit content it's kind 4:09of clamped down vertically to that 4:12navbar but when I paste in the next 4:14section it will expand to make room so 4:16let's do exactly that I'm going to head 4:18back over to figma I'm going to grab 4:20this main section here that's got quite 4:22a bit of stuff going on I've got a few 4:25text layers that are wrapped in a frame 4:27I've got an image and I've got a little 4:29stack of features that are comprised of 4:33several text boxes with icons Etc so 4:36pretty typical but a pretty complex set 4:38of layout elements that I have selected 4:40here by selecting this whole parent 4:42frame so now it's time to run the plugin 4:44again and a handy little shortcut to run 4:46the previous plugin again is option 4:49command P if you're on a Mac and that 4:52should be alt control P if you're on a 4:54PC so by hitting that shortcut I have 4:56run the plugin again you could always 4:57manually go back down here and click on 4:59the plugin to run it again but that 5:01shortcut is probably something that 5:02you're going to hit over and over and 5:04over again so worthwhile to commit that 5:06to memory so now that I've copied these 5:08layers to the clipboard I'm going to 5:10head back over to framer and here all 5:13I'm going to do is hit paste but before 5:15I hit paste I want to make sure I'm 5:17pasting into the correct frame so right 5:20now I have the desktop breakpoint 5:21selected that's good that's what I want 5:24because I want to paste this into the 5:25desktop breakpoint I don't want to paste 5:27this into the Navar and make it a child 5:29of the nav bar so desktop break points 5:31selected all good here command V to 5:34paste and there we have it here is our 5:36section it came right over since we have 5:39our desktop breakpoint set to fit the 5:41height it automatically got taller so 5:43everything fits everything fits really 5:45nicely if we look over on the properties 5:47panel though we can see that this 5:48section is set to a fixed width we don't 5:51want that so I am going to change that 5:53from fixed to fill so that that always 5:56fills the width as the browser gets 5:58bigger and smaller but to make this 6:00properly responsive we might have quite 6:03a bit of work to do let's actually 6:04preview see what we're up against by 6:06going into the preview window and making 6:08this a little more narrow you can see 6:10here that not everything is responding 6:12we have a little bit of that auto layout 6:15going on from figma that's automatically 6:17keeping the links on the right and the 6:18logo on the left uh but in the middle 6:20here we've got our text and our image 6:22not really responding and down here 6:24we've got some issues but in an upcoming 6:27chapter of this course we're going to 6:28get into responsive design break points 6:31making sure that everything's fluid and 6:32we're going to use this exact design as 6:35our guinea pig to go step by step 6:37through that process so we're not going 6:38to fuss with all that now just know that 6:40you might have to take some steps to 6:42make your design perfectly responsive in 6:43framer another thing I want to point out 6:45is that when it comes to text if you've 6:48used a custom font in your figma 6:49document a font that's stored locally on 6:51your computer you may have issues when 6:53you publish it to the web because other 6:54folks don't have that same font on their 6:56computer so I highly recommend combing 6:58through and replacing any of those local 7:00fonts with Google fonts or fonts that 7:02are available here in framer so that way 7:04they show up on the web if I scroll down 7:06to the bottom of this page you could see 7:08that we don't have a footer let's say 7:10hypothetically that the figma file 7:12didn't have a footer which it didn't and 7:14that's because this is a new page for an 7:16existing website and the website already 7:18has a footer but I still need to get it 7:20in here so this is exactly where the 7:23framer browser extension comes in so if 7:26I head over to Chrome I haven't 7:27installed the extension yet so we can do 7:29it here together together I'm here on 7:30the Chrome web store that's where you'll 7:32find the framer browser extension I'm 7:34just going to do a search for framer and 7:38you'll find HTML to framer that's the 7:40one then here I can click add to Chrome 7:43and then I get a little modal to confirm 7:45I would like to add the extension and 7:47that should be a done deal since this is 7:50a Chrome extension it of course works 7:51with chrome but if you're using Arc or 7:54Microsoft Edge it works with both of 7:56those as well because they're both built 7:57on chromium so now now that I've got 7:59this plugin installed the next thing I 8:01want to do is open the little plugins 8:03drop down and I'm going to pin it 8:04because again this is something I'm 8:06going to run over and over again each 8:08time I need to grab something from a 8:10live website cool now that I've got my 8:13little plug-in icon on the toolbar I'm 8:15going to head over to the live website 8:17that you can visit yourself if you want 8:19to test this plugin out and I'm going to 8:20scroll all the way down and find the 8:22footer and here that is now the browser 8:24extension is a little bit reversed 8:26compared to the figma plugin since we 8:28can't select layers on a live website we 8:31instead run the plug-in first then 8:33select what we want to bring over so I'm 8:35going to run the plug-in and with the 8:37plugin running we can Mouse over 8:39different elements that are on the 8:41canvas and this is basically the same 8:43kind of direct selection mechanics that 8:45you get on the canvas in framer it'll 8:47drill down the hierarchy to grab the 8:50bottommost element in the hierarchy so 8:51you can directly grab text layers you 8:54can grab images Graphics svgs Etc you 8:58just have to make sure you're hovering 8:59on the right spot and even when you are 9:01hovered on the right spot this isn't 9:03including the parent frame that has that 9:05black background so what we can do is 9:07press the Escape key to go up a level in 9:09the hierarchy then we can click to copy 9:12that to the clipboard and you can press 9:13the Escape key multiple times to go up 9:15and up and up the hierarchy as high as 9:17you need to go you can also hold the 9:19shift key if you want to select multiple 9:21elements at once but I do recommend 9:23doing this in little bits it's just that 9:25much more manageable so I'm going to 9:27click to copy this footer then I'm going 9:29to slide back over to our framer 9:31document and again before I hit paste 9:33I'm going to make sure I have the break 9:34points selected so I'm pasting into the 9:36right parent frame and boom there we go 9:39the one thing that happened here that 9:41might have been a little bit unexpected 9:42is that this nav bar came in at 1750 9:46pixels wide uh which means the breako 9:48actually expanded to 1750 pixels wide to 9:51make room for it so why the heck did 9:54that happen that's because my browser is 9:56that wide so you may want to make your 9:58browser with window smaller before you 10:01copy and bring things over because it's 10:02going to bring them over at the size 10:04that they appear so just a heads up on 10:07that back over to framer it's an easy 10:09fix and a good way to pressure test how 10:10this layout came over because we want to 10:12make sure that it expands and contracts 10:15successfully again we're going to get 10:16into much greater detail in the future 10:19chapter where we dig into responsive 10:20design but just so that we can collapse 10:23this without things going haywire I'm 10:25going to hold the option key and grab 10:27all of these little nav elements and 10:29then I'm going to press command return 10:31or control enter on a PC to wrap those 10:34in a frame then I'm going to do the same 10:36on the other side hold the option or ALT 10:38key grab all these elements and command 10:41return or control enter on a PC to wrap 10:44those in a frame and now that each of 10:46these are wrapped in their own frame 10:48I'll grab the parent frame add a layout 10:50to it of course defaults to a horizontal 10:52stack layout because these things are 10:54side by side but I'm going to switch the 10:56distribution from Center to space 10:58between 10:59so that way they get spread all the way 11:01out the one on the left goes all the way 11:03to the left the one on the right goes 11:04all the way to the right and we can 11:06solve the Rest by clamping down the 11:08height with fit content and then adding 11:12padding all around I'll do 80 pixels 11:14here so that way these things are 11:16dynamically pushed away from the edge 11:18and pushed out to the sides which means 11:19if this gets smaller they should stay 11:21pushed out to the sides but with that 80 11:24pixels of padding so now I can grab the 11:26desktop break point and I should be able 11:28to set this right back to 1,200 and we 11:31can see the footer is still a little bit 11:32messed up that is because its width is 11:34fixed so I'm just going to change that 11:36from a fixed width to instead fill the 11:39width of its parent which is the 11:40breakpoint itself so there we have it it 11:43squashed down pretty nicely again 11:45there's going to be more to it to make 11:47this perfectly responsive especially 11:49getting down to those narrow break 11:50points like mobile devices but we're 11:52going to get to that in chapter 5 one 11:55last little thing since you can grab 11:57things from live websites you canex 11:59technically take things that you don't 12:01have the right to use we created this 12:03tool so that you can migrate your own 12:05websites or websites on behalf of 12:07clients with their permission so use it 12:10responsibly please but one little trick 12:12and framer is if you do go to the 12:14settings tab for your sites we have the 12:16option to opt out of the HTML to framer 12:19Chrome extension so with that turned on 12:21others will be blocked from grabbing 12:23stuff from your site using the browser 12:25extension now you know how quick and 12:27easy it is to bring your existing design 12:29work over from figma and from live 12:32websites things will always need a 12:34little tweaking but with this lesson 12:35combined with what you've already 12:36learned in the course you'll have what 12:38you need to tidy up your layers and your 12:40layouts that's it for this one I'll see 12:43you in the next one

TeachesPlugins

Also coversBreakpoints Components Frames Keyboard Shortcuts Links Responsive Design Sizing Spacing Stacks Typography

Watch on YouTube ↗

‹ Transforming elements on scroll in Framer (Animation Lesson 8)

Framer Update: Text Highlights ›