Event, CMS

Inside Framer: Build your Documentation Website in Framer

8:32

6.9K views

Aug 23, 2023

About this lesson

Join us as we delve into Framer’s features, presented by none other than the creators themselves. Meet our host, Matt, as he sits down with Hunter, our Product Lead, to unveil the tools empowering you to craft documentation within Framer.

Timestamps:

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

https://www.youtube.com/watch?v=bhR_Ea9WSDE&t=33s Easy CMS

https://www.youtube.com/watch?v=bhR_Ea9WSDE&t=65s Code Blocks

https://www.youtube.com/watch?v=bhR_Ea9WSDE&t=255s Site Search

https://www.youtube.com/watch?v=bhR_Ea9WSDE&t=441s Documentation Templates

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00thank you 0:01so on brilliant okay uh hi I'm Matt 0:05you've joined us in the frame at 0:07Amsterdam office today we're going to be 0:09looking at some exciting new features 0:11for people who want to make 0:12documentation websites as you might have 0:14noticed I am stood in front of a DJ 0:17booth but when you consider the 0:20deliveroo have a basketball court on 0:22their fifth floor office this looks a 0:24little less ridiculous so with that said 0:27let's go and see some features 0:30[Music]0:33okay so first of all let's take a quick 0:35look at the frame of CMS it's a game 0:37changer for creating dogs it's like the 0:40foundation of all your documentation 0:41whether it's managing specs API 0:43references wikis or guides framers CMS 0:46keeps everything organized and for me 0:48the nicest thing about frame and CMS is 0:50that when you make a a change you can 0:53hit the publish button and those changes 0:55are going to be online within seconds 0:57compared to other cms's that's so quick 0:59and efficient it's just nice to be able 1:01to make a change and then see that 1:03reflected instantly on the website 1:05okay so right now we're with Hunter he's 1:08a product lead and he's going to be 1:09showing us some exciting features in 1:12framer that are going to help you create 1:14documentation sites we're going to be 1:16looking at code blocks in search so 1:18Hunter what have you got to show thank 1:20you man yeah so we've released two uh 1:23really big features recently one being 1:25pulled blocks and inline code for liquid 1:27code documentation workflows and then 1:30just a bit before that was a site search 1:32the framework and the ones that we're 1:34really proud of and work towards is kind 1:36of 1:37documentation use case that we've been 1:39focusing on recently to allow people to 1:41uh with their documentation sites in 1:43framework I imagine that I'm the author 1:45of a popular open source motion library 1:47and I don't know much about frame uh 1:50let's just let's just really imagine 1:51think think card 1:53um what how show me the workflow like 1:55what how would I incorporate 1:57um some code blocks and and code 1:59highlighting into my into my website so 2:02you can do everything you'd expect on 2:03like a react.dev but without code in a 2:06visual UI tool and everything's included 2:09it's uh it's one of the batteries 2:12included experience and everything just 2:13kind of works out of the box you don't 2:15have to fuss with like a different CMS 2:17and then the front end somewhere else 2:19it's all just kind of together so you 2:21can design your front page you can sell 2:23the teacher you can do all the front 2:25pages things but then you also can get 2:27into the docs and deep into the content 2:30and use the CMS Editor to get all that 2:32stuff done so I think one of the biggest 2:34benefits is that it's gonna it's all 2:36there 2:37um in one spot so if I was to add a a 2:41documentation page and I wanted to add 2:43some like a a code example how would I 2:46go about that with both these features 2:47we really focus on that initial 2:51experience being super easy 2:53and you can ship it right away if you 2:56wanted but then you have that control 2:58later down the line if that's what you 3:00want so everything takes like a second 3:02to set up we open the get started page 3:04for instance 3:06all we have to do is go to the CMS 3:09editor the new line here and hit the 3:14code block button and I have some code 3:18ready to go here 3:19I could just paste in 3:22and that's essentially it you can be 3:23done now and I think what's really 3:25special that you don't get on a lot of 3:26other tools is say that's my entire docs 3:29and I just added this little code blocks 3:31I can just hit publish and 3:34the tangents are now live and now that's 3:36live on the site say someone who's 3:37asking for some better docs like that 3:39the workflow is like so fast and it's 3:41all optimized behind the scenes and it's 3:44uh publishes instantly and you get all 3:47those benefits of framework but in your 3:49documentation workflow as well as the 3:51designer of the website I can go here 3:52and I have full customization options or 3:54the code block and we even have stuff 3:56like Auto theme switching so if we go to 3:59dark mode light mode the code blocks 4:01switch right away you'll notice the 4:03colors the inline code switch right away 4:05I'm just going to stop you there because 4:06I have a very important announcement the 4:08lunch order is open 4:11foreign 4:15Ty for search and framer we wanted to 4:19focus on just making the easiest 4:22experience for that initial ad of search 4:25because we looked at the competition we 4:27looked at other searching Solutions 4:30so much config and we just 4:34we knew there was an opportunity to not 4:36have that because of the end-to-end 4:38uh integration that we have with 4:40framework where 4:41we have con we have the content and 4:44framework we have the build process and 4:45framework and it's all encapsulated so 4:47we knew we had an opportunity to to 4:50simplify the whole thing and get the 4:52config out of the way and still provide 4:54a really good experience so I will show 4:57you how long it takes to add search to 4:59yourself we go here to the insert menu 5:01we go down to Interactive 5:04we grab search 5:06and we insert it and that's it that that 5:10is if we wanted to to leave it here now 5:13we have search on our site so I can show 5:15you how that works we hit publish 5:19and we wait for this optimization 5:21process to end because this is where 5:23we're going through each page well we're 5:26building an optimizing our site we're 5:27actually grabbing each piece of content 5:29and indexing it and it's all 5:31multi-threaded if you want to get into 5:33the weeds of it so 5:35it will scale quite nicely even with our 5:38larger sites the lakeframer.com uses 5:40this and it added very little time to 5:42the total optimization process so let's 5:44take a look at the published site so 5:46everything is super fast you'll notice 5:47we can go in here we can go uh property 5:50controls and everything is built in all 5:53your pages show up you have keyboard 5:55navigation I can Select Property 5:56controls I can hit enter so the focus 5:59was everything super fast and no config 6:02by default it's just it's super easy to 6:04insert and if you want to dig into the 6:06weeds you can customize it with the 6:07animations I showed you the custom fonts 6:10but you don't need to it just it just 6:12works out of the box so we're we're 6:14super happy about how this one turned 6:15out great I'm super excited to use code 6:17blocks and search they both look 6:19fantastic thank you very much for 6:21sharing us those those features lunch is 6:24almost here so uh we'll I'll see you 6:27every burrito shortly sounds good man 6:30thanks for thanks for letting me talk 6:31through these things uh I hope everyone 6:34got an inside peek at how we think about 6:35these features and uh why we're we're 6:38happy about how they turned out I 6:40couldn't have done it without the team 6:41figuring at least super hairy problems 6:44um that I would have no idea how to 6:46solve and they just did it which is it's 6:48mind-blooded because I think they both 6:50these features feel great 6:52that I'm really impressed with what 6:54they've managed to pull off here because 6:56I love using these features and that 6:58that was the goal is uh that we'd all be 7:00able to love using them because they're 7:02so simple and so customizable and I 7:05think that's a really hard game to 7:06balance I want to give a shout out to 7:07the people who have made documentation 7:09templates so far I see there there's a 7:11few of them flying in that are super 7:13high quality and uh it's great to see 7:15how people are pushing these features to 7:17their limits which is super exciting so 7:20so in that chat with Hunter just now he 7:23mentioned that many of our users are 7:25already using our new search and code 7:27blocks features to make documentation 7:29templates we've got a ton of responsive 7:31documentation templates that you can use 7:33to kick-start your new documentation 7:35website it's especially great for bigger 7:37sites aiming for a cohesive look and 7:39it's super time saving we've got free 7:41and paid templates they give a 7:43consistent structure to your website 7:45saving you time and effort the nice 7:48thing about using a template is that 7:49everything's style coherently so you can 7:51just add pages or sections and you know 7:53that they're all going to fit in with 7:54the rest of your website 7:55my word that was some exciting stuff 7:59it's not the last you're going to see 8:00from us uh they will be doing plenty 8:02more videos about more exciting features 8:04over the weeks to come so until then 8:07stay Breezy oh my God 8:10you know on a personal note spend a lot 8:13of time in jail 8:15I didn't have much to do all I did was 8:18dream the day someone finally crack 8:21documentation websites and by Carly 8:24they've done it 8:25thank you Hunter and the rest of the 8:27team 8:29um I'd never do that again

Also coversFrames Keyboard Shortcuts Responsive Design Templates Themes Typography

Watch on YouTube ↗

‹ Framer Update: Quick Page Switcher

Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul Lapkin ›