Layout & Design

Getting familiar with the Framer interface (Fundamentals Lesson 1)

Joseph

5:16

137K views

Jul 22, 2024

About this lesson

Before we dive into building anything, it’s a good idea to get familiar and comfortable with the Framer interface.

From a birds-eye view, you can think of this as being made up of four main parts:

• The toolbar across the top

• The left sidebar, which can display several different panels.

• The right sidebar, which will show the Properties panel the vast majority of the time.

• And the canvas in the middle.

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

https://www.youtube.com/watch?v=GnN5MqiXraw&t=27s The Toolbar

https://www.youtube.com/watch?v=GnN5MqiXraw&t=168s The Left Sidebar

https://www.youtube.com/watch?v=GnN5MqiXraw&t=192s The Right Sidebar

https://www.youtube.com/watch?v=GnN5MqiXraw&t=220s The Canvas

https://www.youtube.com/watch?v=GnN5MqiXraw&t=286s Framer Academy and Community

🌞 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:00before we dive into building anything 0:02it's a good idea to get familiar and 0:04comfortable with the framer 0:06[Music]0:08interface from a bird's eye view you can 0:10think of this as being made up into four 0:13main parts the toolbar across the top 0:16the left sidebar which can display 0:18several different panels the right 0:21sidebar which will show the properties 0:23panel the vast majority of the time and 0:25the canvas in the middle let's unpack 0:28each of these main parts starting with 0:30the toolbar furthest to the left we have 0:33a button with a little framer logo this 0:35opens the main menu where you'll find a 0:37ton of actions and preferences for all 0:40intents and purposes this is the menu 0:41bar you'd find across the top of the 0:43screen on a Mac or across the top of a 0:46window on a Windows PC a lot of these 0:48things can be accessed other ways so a 0:51lot of the time we won't even need to 0:52reach for it but it's a good time to 0:54take a moment to familiarize yourself 0:57with what's here next we have a few 0:58buttons that allow us to insert elements 1:00into our project starting with a button 1:02to open the insert panel which is packed 1:05with Pages page sections Design Elements 1:08and components to build some super 1:10Dynamic functionality into your site 1:12without writing a single line of code 1:14pressing I on the keyboard will bring 1:16you directly here so that's a great 1:18keyboard shortcut to commit to memory 1:20early on and for the most fundamental 1:22building blocks we can use the layout 1:24menu and the text button to add basic 1:27elements to the canvas then we have the 1:29CMS button which takes us into a whole 1:32other view to create and manage 1:33Collections and items for the built-in 1:36content management system but we'll dig 1:38into that in another course the last 1:40item on this side of the toolbar is a 1:42huge timesaver the quick action bar 1:45which you can pull up at any time by 1:47pressing command K on a Mac or control K 1:49on a PC then start typing the name of a 1:52menu item without having to dig around 1:54for it the quick actions menu is also a 1:57great place to learn keyboard shortcuts 1:59for actions you find yourself doing 2:01repeatedly in the middle of the toolbar 2:03you'll find the name of the project you 2:05have open and you can click to rename it 2:08or move it to a different folder and if 2:10this site has been published beside the 2:12name of the project you'll find the url 2:15which you can click to quickly open the 2:16live site in your default browser then 2:20on the right hand side you'll find 2:21avatars for any collaborators in the 2:23project localization to customize your 2:26site for different languages and regions 2:28settings to access a variety of settings 2:30for your site and its Pages preview mode 2:33to get a look at how things will look 2:35and behave in a browser invite where you 2:38can bring in collaborators to design 2:40manage content and publish changes and 2:43finally the publish button where we can 2:46take our site live or publish changes 2:47with a click next we have the left 2:50sidebar where you can toggle between 2:52three important panels Pages where we 2:55can view create and edit the pages of 2:57our site layers which show all of the 3:00elements on the current page along with 3:02a handy little page switcher at the top 3:05and finally the assets panel where 3:07you'll find the components Styles and 3:09code files within your project next we 3:12have the right sidebar which is where 3:14the properties of the selected element 3:16will show up this properties panel is 3:19contextual which means it will show the 3:21properties that are relevant to what's 3:23selected at the moment for example 3:26selecting a breakpoint shows only what's 3:28relevant to a break Point whereas 3:31selecting a text box shows things like 3:33font family weight spacing and Alignment 3:37which weren't there a moment ago last 3:39but not least the whole middle of the 3:41screen is the canvas where the magic 3:43happens everything we design happens 3:46here on an infinite free form canvas 3:49that feels just like the design tools we 3:51know and love the content of our web 3:53pages will be within these top level 3:55frames called Break points but we'll dig 3:57into the anatomy of a project in the 3:59next lesson here at the bottom we also 4:02have some helpful canvas tools you'll 4:05find the pan tool which you can also 4:07switch to by holding the space bar the 4:10comment tool to click and add comments 4:12anywhere on the canvas as well as View 4:15and reply to all of the comments in the 4:17project on the right side bar then we 4:19have a toggle for day and night mode 4:22which not only changes the framer 4:23interface but will also toggle the 4:25content of your site once that's been 4:28set up we'll get to that that and some 4:30Zoom controls with shortcuts that make 4:32navigating the canvas a whole heck of a 4:35lot quicker and easier you'll see me 4:37using the shortcuts for Zoom to fit and 4:39zoom to selection all the time along 4:42with zoom to 100% to be sure I don't 4:44lose track of the true scale of things 4:46it's very possible you're watching this 4:48directly on framer Academy but if not be 4:50sure to head to framer 4:52dcom to see our growing library of 4:55lessons like this one also be sure to 4:57join the conversation on framer 4:59community 5:00where we all come together to help each 5:02other out that's it for this one see you 5:04in the next one

Also coversBreakpoints Collections Components Frames Keyboard Shortcuts Locales Spacing Typography

Watch on YouTube ↗

‹ Framer Design: Design on an intuitive Canvas

Introducing Framer Fundamentals ›