Event, Framer Interviews

Framer Community Show & Tell July 6, 2023—Cédric Moore, Madhuri Maram and Arjun Phlox

42:11

2.2K views

Jul 7, 2023

About this lesson

In our very first Show and Tell, we'll be hearing from Cédric Moore on how and why he built framer.money – the ultimate guide to creating and distributing Framer templates, and Madhuri Maram and Arjun Phlox on their recent site build for Jack Strategy – a strategy and design studio powered by insights and driven by results.

Join us for Show and Tell and get inspired for your new Framer builds ✨

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

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

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

0:00all right let's kick things off just so 0:04we're not wasting any time here get 0:06right into it uh first off thank you so 0:08much for joining us for our first ever 0:10framer Community show and tell I'm so 0:12happy to have you watching 0:13um I started as your community and 0:15Partnerships manager here at framer just 0:17under a month ago and I'm already so 0:19blown away by the talent and the passion 0:21that you all show towards your craft I'm 0:23really happy to be here to help grow and 0:25nurture this community as framer 0:26continues to scale just a bit of 0:29logistics before we get into 0:30introductions uh please ask any 0:32questions that you have for our 0:34presenters in the chat I'm going to 0:36moderate them and put them to our 0:37co-hosts uh once they finish their their 0:40show and child presentations 0:42um so today I'm joined by Cedric who's 0:44going to be showcasing framer money uh 0:47majorie and Arjuna are going to be 0:48showcasing the new Jack strategy site 0:50and I'll pass it over to them to do some 0:52quick introductions Cedric do you want 0:54to kick us off 1:01so uh first of all um thanks thanks a 1:03lot for for having me I'm really excited 1:05for this round today 1:08um yeah maybe some of you know me 1:10um from Twitter or maybe elsewhere so um 1:13yeah I'm Cedric I'm a product designer 1:17um since yeah roughly 12 years right now 1:20um always have worked uh for the web but 1:22also Beyond I'm also like a huge no code 1:27fan and also using uh yeah using local 1:29technology yeah probably for over half a 1:32decade already so I'm also really into 1:35that that's also why I landed more or 1:37less in this round here I guess 1:40um and yeah I'm like building uh 1:43projects and tools and assets uh like 1:46framework templates uh where you maybe 1:48know me uh most of 1:51um yeah for more than a year already and 1:53doing that pretty successfully and um 1:56yeah 1:57maybe passing it passing it over again 2:00sweet but Jerry Johnny go next 2:03yeah happy too uh hey everyone uh I'm 2:07Madhuri who must have seen me online 2:08somewhere tweeting like crazy 2:11I'm essentially a product designer been 2:13doing this for a decade now and I had a 2:17lot of fun making this thing in my sweet 2:18spot is prototyping it says prototyping 2:21to no code I think it's kind of a 2:23no-brainer so we are here and I'm 2:25excited about exploring the 2:27possibilities and stretching them 2:29um yeah Arjun we'll go next 2:38but we got our juice 2:41I think he's Frozen Ozzy 2:47one seconds 2:51let him get back up and running 2:56uh I was just thinking 2:58okay perfect no worries 3:01oh I think he's back are you back Arjun 3:06hello 3:08are you only able to hit me up here yeah 3:10we can hear you perfect 3:15would you like to introduce yourself 3:17Arjun just let folks know uh who you are 3:20where you are why you are here working 3:22on framers 3:31all right I think our dreams have been a 3:33couple days 3:43can you hear us okay RJ 3:47I guess he's having something oh I think 3:49there's a bit of a lag on my side 3:51no worries no worries or we can jump in 3:54uh with Cedric on forever money 3:56um and then hopefully Arjuna can get 3:58your your internet sorted out you have a 4:00few minutes anyway so don't worry about 4:01it 4:03cool Cedric would you like to take it 4:06away on forever money 4:08yeah for sure 4:09um 4:12share my screen where is it 4:18all right 4:20hope you guys can see see my screen 4:23right now 4:28um all right seems like cool um yeah so 4:32probably 4:33um first little background on how that 4:36all actually 4:37um yeah happened 4:39um so as you all know and also as I said 4:41a few minutes ago uh I really much 4:43focused on building uh foreign templates 4:46for the last um yeah one and a half 4:48years and 4:50um yeah I put out a bunch of templates 4:51already and making uh quite really good 4:54money with it and so since I started I 4:58think it was this year in February or in 5:01January 5:03um I started just to like experimenting 5:05and um yeah I started to posting some of 5:08these figures that I'm making just to 5:10show and motivate other people to 5:13actually do the same 5:14um 5:15and yeah props to Yuri that's actually 5:18uh yeah thanks to him and 5:21um that actually 5:23left like a huge wave of 5:26um yeah really kind fox actually asking 5:28me how I've done it and asking a bunch 5:32of questions and at some point it just 5:34got like too much for me to handle it 5:37once and 5:38then I have like I had a few thoughts on 5:41how maybe I can help more people and I'm 5:44General a huge fan of of courses so I've 5:47made yeah probably five to ten courses 5:49already so I'm really 5:51um positive about that 5:53and then yeah maybe the the idea of 5:57launching a course that yeah is more or 6:00less bringing people from zero to one uh 6:02when it comes to selling framework 6:04templates 6:05and um yeah there was this was really a 6:09ton of work and 6:11um yeah in the end I launched um 6:13framework.money I think 6:17um yeah a few weeks ago so maybe it's 6:19not even a month old so it's quite new 6:22and 6:24um yeah first it was just the course 6:26but uh my plan is not really to actually 6:28yeah just have the course so my really 6:31the vision for this is more 6:33to help people also maybe who are on a 6:36low budget for example and that's why I 6:38also introduced 6:41um like free guides this is something 6:43this which is new and came this week 6:46um and this is basically like three 6:48articles that I'm writing every two 6:50weeks and sending them as part of my 6:52newsletter which is called creative 6:54prosperity 6:56and um yeah so this more or less is 6:59extending the platform as you can see 7:00right here so we now got um yeah guides 7:03then got coaching and of course the 7:05course itself 7:07and I think 7:08um yeah for today what I want to focus 7:11on 7:12um is not really it's not really like 7:15okay how to set up a CMS for articles 7:17like that and also not 7:20um yeah about about the coaching and 7:23also not how to set up a landing page 7:26um but because the most important and 7:29maybe also most interesting fact of this 7:31platform is that it's completely built 7:34and hosted in framer 7:37and um so this means that it is really 7:39more or less a full-blown membership 7:42site so all the content from the course 7:45is basically available inside of framer 7:49so it's hosted in framer and it is gated 7:52or protected with the login and 7:54registration 7:56um by outsetter and I think this is yeah 7:59probably 8:00the most interesting thing I could show 8:02today 8:04and so that you guys can also maybe have 8:07a small glimpse of how to build a 8:09membership site 8:10and yeah what this actually enables us 8:13is to have a login and account 8:16information and stuff like that as you 8:19can see this is all 8:20um 8:21perfect this is all um made in frame so 8:25I'm probably just 8:27switching into framework as well so this 8:30is a little bit more clear to you guys 8:32how it works 8:35um yeah so I said basically 8:37um you can think of it like the front 8:39end is completely done 8:41um inside of framer also this means all 8:45the assets and the the audio recordings 8:47and everything that comes with the 8:49course is also made in framer and um 8:52as you can see right here this is the 8:55landing page and then we also have this 8:59um yeah let's say the course page itself 9:01which is basically all the content 9:04and what I did I have like for the 9:07for the content of the course I just 9:09have um using overlay and which has a 9:13recording and also soon 9:15um videos in it 9:17and I think the special part of it 9:18because like protecting a page with 9:21outside is not so complicated so you can 9:23just add your your URL in outsetter and 9:27it will actually protect you this 9:29specific page of getting uh seen when 9:33someone is locked out 9:35and so the special thing about here is 9:37that I also have built in and this is 9:40done with uh with much help of a good 9:42friend of mine 9:43um 9:44then we also added as you can see here A 9:47bunch of code overwrites it actually let 9:50uh the lesson status sync with the 9:55account from this specific user so you 9:58can actually also 10:00just uh tick or check each lesson 10:03afterwards you're done with it 10:05and 10:07um yeah this in the end will will 10:09actually set its status uh to finished 10:12and then you'll just have this small uh 10:15yeah state or changed state 10:18um available 10:20um 10:21and yeah this is probably something that 10:23is quite uh nice but also as you can see 10:26right here 10:28um yeah needed quite a lot of code so 10:32um of course I will not really announce 10:35I'm not able to actually explain you all 10:37of this 10:38um but I just want to show you uh like 10:40the possibilities in case you would like 10:42to uh yeah go go further further with it 10:47and 10:48the other second thing that is also 10:50quite interesting and it's not so much 10:52more difficult so 10:54as you can see on the landing page I 10:56have uh three tiers so I have like just 10:59the course of mentoring and I have a 11:01co-pilot which is basically just um 11:04yeah more value you get in the end and 11:07of course with that I also have sections 11:10inside of this course page here that 11:13should not be shown 11:15in some tiers so as example the template 11:18review is only available for the for the 11:20most expensive tier that's why I also 11:23had to 11:24um to somehow make this locked and this 11:28is 11:29um a little bit easier so also I use 11:31that 11:32um maybe a year ago for my my let's say 11:37my first Venture in this framer Universe 11:39which was Godlike 11:41um 11:42and God like it's just a component 11:44library and the trick there was really 11:46to hide 11:48um the the copy component link 11:51to no non-members and make it available 11:55for members again 11:57and this is also really easy it's 11:58actually only having an HTML attribute 12:02and a value in it 12:04and with that 12:06um select the one here and behind is the 12:09plan ID in outseller and this one here 12:11is just a custom attribute which is 12:14needed to actually hide this whole 12:16element here 12:18and um yeah in the end this is basically 12:22all all that was needed to 12:26to build this course 12:28um yeah which is completely frameless 12:29you just saw 12:31and 12:32um 12:33yeah now also maybe can give you a short 12:37Glimpse on that as well 12:39um as you might also know I'm a huge fan 12:41of uh productizing my own work or my own 12:45projects and so this will be again done 12:49with this course website 12:51so I'm also planning and proceeding 12:54already with this course OS template 12:56which is a framework template to build 12:58exact the same course structure that I 13:02just showed you on framer money 13:04except with uh yeah the only exception 13:06that it will be even a little bit better 13:08because I also learned from my own 13:11failures and also like uh yeah I won't 13:14just make it have a better experience 13:18um yeah for for the customers that maybe 13:20buy this template and that's why I for 13:23example I have um yeah not overlays for 13:26the content of each lesson but really 13:28whole 13:29um 13:30whole pages and so that's uh and maybe 13:34some of you are also asking now why you 13:36did we you did not use the CMS for that 13:39because it would be basically a perfect 13:41use case 13:43um 13:44and so yeah the reason is is quite 13:47simple so first of course it would be 13:49really easy to just has this this basic 13:52information and maybe a video and a 13:54summary or a rich text in the CMS 13:57um but a problem and there are two 13:59problems so first one is that we do not 14:02yet have some way to display like 14:05modules and also like a flexible amount 14:08of modules in the CMS so as an example 14:11if I would like to have five links here 14:13or only one this could yeah get really 14:16complicated 14:18to build and the second uh 14:21the second reason is actually that this 14:23button here which you also have just 14:25seen in frame or money 14:27um 14:28yeah it does need to have a special name 14:31otherwise the override will not work so 14:33as you can see here 14:35always we have each lesson number that 14:38needs to be in this button otherwise 14:40the execution of the code will not work 14:43and it will not sync with the outside 14:46account and so 14:48those are basically the two reasons uh 14:51yeah why I built those pages as static 14:55pages and not as CMS pages and 14:58yeah if we go back uh to frame of money 15:01I think 15:02this is more or less it already I guess 15:06and um I would like to pass over to Kate 15:09again in case there are any questions 15:13totally thank you so much Cedric that 15:15was amazing I know we've got hunter in 15:18here in the chat taking notes so that's 15:21a great way to get a problem with you 15:22back for sure 15:24um Cedric I think we had one question 15:26from other Cedric 15:28um if the owner is connected to the 15:30user's account I'm assuming that's I'd 15:33set up 15:36um 15:39the override so like how it's working 15:42it's you basically have the big script 15:45that I showed in the beginning 15:47in there you have your Outsider ID 15:49select the overall account ID 15:51and this is automatically 15:54um syncing 15:56um the 15:58um the account data so in case someone 16:00is uh 16:02is just joining as a member it will add 16:05actually new properties in this account 16:10and then as soon as you're changing one 16:13of those properties so each each lesson 16:16status so I have like 30 lessons so I 16:18have 30 properties and as soon as this 16:22user is clicking 16:24um complete it will also complete and 16:26change the status in this property on 16:29outside and this is how um 16:32yeah this is working more or less 16:36I hope that's um yeah clear for your 16:39Cedric 16:41great thanks so much 16:45um I'm curious 16:47I started using I'd set up for 16:50framer.money 16:52um were there any issues that you run 16:53into that you didn't foresee to come up 16:56and how did you kind of get around them 16:58or was it pretty much smooth sailing 17:01um 17:02there were not really many issues so the 17:05a Godlike website which is already over 17:08a year old is built on member space so I 17:12I used uh outside of the first time for 17:15that one here 17:17um I must say it just has like more 17:18features so that's even one advantage uh 17:21compared to it it also feels way more 17:23modern 17:24and their Foundry is also really open uh 17:28exactly like the ones from framer so uh 17:30enjoying that just a lot and 17:34um yeah they're not really had much 17:37issues uh probably uh to create all this 17:40code uh which was not done by myself uh 17:44that was maybe 17:46um yeah a challenge but as I know they 17:48have really good uh specifications and 17:50guidelines on there 17:52so um yeah I mean if you want to really 17:56build some some kind of membership site 17:58I'll definitely recommend going with 18:00outsider 18:02now so I think there's some some 18:04collaboration going on uh 18:07in in the back so yeah stay tuned 18:10life like we have one more question 18:13there from Roz Cedric so feel free to do 18:16however many plugs you would like in 18:18here it's uh could you share with us 18:20your other frame or projects or direct 18:22us to where we can find out more I 18:24already linked your your newsletter if 18:26there's anywhere else people can uh can 18:28find you online feel free to to plug 18:30away 18:33um yeah I think so like my my main 18:35website or personal website is available 18:36on cedric.design 18:39um and I got like um most of my projects 18:42on there so I have uh cameras dot 18:44supplies my my template business I got 18:46frame without money of course 18:49um then there's godlike.so that's 18:52probably a little bit outdated already 18:53but in case you're interested in some 18:55Tailwind style components that maybe uh 18:58is something for you 19:00and um yeah that's that's basically like 19:03my main focus for now there's way more 19:06uh stuff that is also going on more on 19:08the freelance side but that's unlike my 19:11uh 19:12my focus now 19:14amazing thank you so much Cedric really 19:16appreciate you running through those 19:18those projects with us and getting uh 19:19giving us an insight into what it looks 19:21like from from your end 19:23um for those of you as well who might 19:25not know just letting you know that 19:26Cedric also worked on the 10x designer 19:29site that went live this week be sure to 19:31check it out if you want to see another 19:33like forever website from Cedric 19:37thanks a lot oh of course thank you 19:42Dory and Arjun hopefully he his internet 19:45is a little bit better uh if not 19:47literally let's let's figure out the 19:49best way to do this here but I'm gonna 19:51hand it over 19:52yeah thank you so much Kate uh so 19:55luckily Arjun is just sitting in the 19:57other corner so I'll just pull him into 19:58the screen I mean 20:00[Laughter]20:04and let me just go ahead and present so 20:07that we can get started 20:10okay let me know if you can see my 20:11screen 20:13awesome 20:14um so we've prepared something for all 20:16of you so we can be on time and concise 20:19hopefully right 20:21um let's introducing again this is our 20:24agency for anything no code 20:26um this is a tiny team it is a 20:28three-member team doing a lot of work 20:31but we want to be specific about no code 20:33and stuff 20:35um apart from me and Arjun who you have 20:37already met there's obviously Himachal 20:39who is behind the scenes uh killing it 20:42away on components and other things that 20:44we are doing with 20:46um besides this we've been actually 20:48tinkering with Prema since 2015 ever 20:51since it launched it's its first 20:53iteration of prototyping to now you know 20:56continuously making websites and stuff 20:59it's been so much fun for us apart from 21:01just clicking on prototyping and stuff 21:03we feel like no code is a natural 21:05extension of us getting into design and 21:08you know taking it forward in terms of 21:09responsibility 21:11imagine that there is product design and 21:13education which we love so there are a 21:15lot of things we work upon but here's 21:18where I want to hand it off over to 21:20Arjun who led the Jack project 21:22specifically when it came to Leading the 21:25design and the no coding with that Parts 21:28the context here is we worked with Jack 21:30brooklyn-based agency and they're a 21:33strategy Studio they had a lot on their 21:35mind they had clients like Nike's 21:37daycare and you know blue apron and they 21:40initially approached to us in 2019 2020 21:43getting the original Jack website up we 21:45didn't do the design at that point in 21:48webflow and we were able to finish with 21:51workflow the line animation Works 21:53smoothly very similar to how we were 21:55able to make that framework and then in 21:572023 we kind of started collaborating 22:00with Jack at a deeper level and we said 22:03let's take a new stab at how Jack offers 22:06its office so we kind of work with the 22:09business work with the design a lot of 22:11other things product strategy and all 22:13and that's where we did the design and 22:16then the build so this is one of the 22:18times where the design and build were at 22:21its fastest because we did five plus 22:24five weeks whereas in webflow just to 22:26build alone 22:29and this uh was an achievement I would 22:32say kudos to Arjun he actually pulled 22:35out the whole aspect of Designing 22:37setting the brand Direction and even 22:39actually building out and figuring out 22:41the animations and stuff 22:43I'm going to be pulling Arjun in he's 22:45just beside me so he can kind of get 22:48started there okay I just literally 22:50passing the computer up 23:01thank you so much 23:06all right I hope you are all able to 23:09hear me okay see me okay 23:12awesome 23:13so uh as Madhuri has introduced 23:16um so the Jack website there is a 23:18twofold work that has gone into it so 23:20the first fold is where uh we were 23:22trying to launch a one pager which was 23:24introducing Jack as an agency uh so that 23:27was done in webflow uh at that time uh 23:30filmer wasn't there it hasn't yet 23:33pivoted to its newest super cool 23:35offering so and then uh coming to this 23:39year 23:40um so Jack approached us again because 23:41the team has grown and the offerings 23:43have you know matured as well so for 23:47those reasons um they also wanted to 23:49work with us on strategically 23:51positioning um Jack a certain way so for 23:54those efforts we had to choose something 23:56that is very fast because it was also 23:58challenging on the timeline so 24:01um I was also tinkering with framer as 24:03Madhuri has introduced 24:05right from 2015 onwards I've been 24:08um looking into the framer and using 24:10framer for different projects from 24:13prototyping to uh the actual real real 24:16world projects and then we have the Jack 24:19so for Jack there were a couple of 24:22considerations that we have done from a 24:24bill point of view broadly I would like 24:26to categorize these considerations as 24:28something that has got to do with the 24:31fluid brand expression because not every 24:33tool allows for a full-fledged brand 24:36expression that is very seamless and 24:37that's very high fidelity and 24:39interactive so those for those reasons 24:42uh one of the things that has checked 24:45off on our list is uh with framer is the 24:47fluid brand expression the second one is 24:49about of course the fast and easy 24:51because when we are talking about no 24:53code uh it's actually Bridging the Gap 24:55between what we are imagining and what 24:57we are putting it out and that also has 24:59uh checked our boxes and uh async and 25:02collaborativeness is something that we 25:04wanted because being in different time 25:06zones we wanted that to be uh more of a 25:09default and more of a given thing so 25:12async and collaborative aspects um for 25:14the tool to be addressed was very 25:16important for us to really get um you 25:19know collaborating on the most important 25:21nuanced aspects 25:23so for each of these things I'd like to 25:25Showcase a couple of them uh in a very 25:27quick way and then we can getting into 25:29the detail on the question and answer 25:31stuff so starting with the fluid brand 25:34expression there are a couple of uh 25:36aspects like for example if you load the 25:39Jack strategy.com so you will see the 25:41intro section has a very beautiful way 25:43where it makes a statement and and says 25:46what jack is all about in a very crisp 25:48Manner and for this to come through we 25:50had to play with the 25:52um the animations and the sequencing of 25:54the animation and the timing and all 25:57um I don't know if you're able to see a 25:58screenshot here uh while I'd like to 26:00walk you through the actual framer 26:03project file one of the things I wanted 26:05to point about is the sequencing path so 26:08framer has allowed us to sequence these 26:11animations very well so you are able to 26:13play with the storytelling aspects and 26:15exactly when you want to introduce 26:17certain elements in certain text uh 26:20visual 26:21um or verbal this is worked out very 26:24well for us so that is one aspect and 26:26the second aspect is about going on the 26:28same lines of food brand expression it's 26:32the most talked about it's the Jack 26:35guiding line so the guiding line was a 26:38very important aspect of the 26:40um the very important element for the 26:42brand itself so if you see the identity 26:44of Jack the J actually Trails into a 26:47line and the line is supposed to act as 26:49a as an element that can take the story 26:51forward and so here on the website we 26:54have used the line to tell a story in a 26:56very sequential manner where it kind of 26:59um follows the viewer and guides them to 27:01the most important aspects of the 27:03sections and it's also a fun element and 27:06a way to engage the viewer 27:08so that is something that was possible 27:10uh with a combination of positioning 27:13this was a little tricky part because in 27:16webflow 27:17um in on the counterpart there were 27:19there is a different way of achieving 27:21this but but with framer 27:22um a very simple tinkering and um a 27:25proof of concept kind of a thing uh has 27:27allowed us to understand exactly how we 27:29can train these uh you know lines so 27:32it's a combination of positioning and 27:34the scroll animations that were done and 27:36as you can see that these are the 27:38properties that I have set up where when 27:41it when a certain sections goes into 27:43view then that particular line uh is 27:46actually moving 27:47um so while it looks like the line is 27:49actually growing the trick here is 27:51actually the line is moving from 27:53um you know a minus x axis or minus y 27:56axis depending on the context so that's 27:58what's Happening Here 28:00and the next aspect is the offerings 28:02themselves and we wanted to highlight 28:04and land like the offerings a certain 28:06way so the visual metaphor of the 28:08hanging posters has been used uh here 28:10and uh to bring it alive there's a much 28:14more subtle animations that are needed a 28:16very nuanced way of approaching so for 28:19that thanks to the loop animations uh 28:21for framework so that has been very 28:23helpful in terms of giving 28:25um these posters uh live and it makes it 28:29feel like okay they're actually the 28:31entire site is you know uh feels alive 28:33so that's a bit of components and loop 28:36animations that's the combination that's 28:38been used here 28:41and moving to the inner sections of the 28:44website uh where we detail out on uh 28:47specific conference there are quite a 28:49few things that are happening on the 28:51introductory section you will see the 28:53there is still that switcher which 28:55allows you to move between one offering 28:56and the other and most importantly 28:59um it's actually the details of what 29:01kind of activities are involved in each 29:03of these offerings because some of them 29:05are high on strategy some of them are 29:07high on execution and we wanted to show 29:10um that in a very fun and engaging and 29:12interactive way and with thanks to 29:13scroll animations uh and components 29:16that's very much easy uh to make through 29:19once you nail the graphic the rest is 29:21about setting up your Radiance and uh 29:24giving your scroll triggered animations 29:29and then we have some things like this 29:31which are still in the brand fluid brand 29:33expression which is when you hover uh 29:36near the footer there's a very fun and 29:38engaging way of looking at the other 29:40sections of the website 29:42um the metaphorically we are just 29:45showcased the offerings and the theme 29:46and the POV uh in terms of the simple 29:49shapes so the shape associations and the 29:51Very interactive way of looking at what 29:53are the sections that one can what is 29:55the pieces of information that one can 29:57find in those pages even without 29:59navigating to them that's a very uh 30:01engaging one again components and 30:03variants have been of a heavy use here 30:06and then we have the most important 30:09element on the site which is the table 30:11stack navigation this is also coming 30:13from a brand expression but it's more 30:15about 30:17um the how fast it is and easy it is to 30:20implement such things so if you if 30:21you're if you are able to set up one or 30:24two variants then the rest of it is 30:26automated uh using the animations in the 30:28framework so that was very very helpful 30:30and just setting this up on desktop and 30:33mobile both of those variants are 30:36switching them between them is very easy 30:41and then we have uh because the entire 30:44process uses uh two tools majorly one is 30:47figma and the other is framework so one 30:50of the most important things as we all 30:51know that we bring in our sides what has 30:55been imagined after a lot of iterations 30:57uh how are we able to bring that to 31:00framework so using the site Styles and 31:03the copy paste using the framework 31:05plugin that has made it very very easy 31:07to bring exactly how we have designed uh 31:10to set it up there's a bit of a setup 31:12that is involved post uh you know 31:14copying the things from the figma into 31:17the framer but it the process itself is 31:19very quick although it is a little bit 31:21manual 31:23and then under fast and easy uh there's 31:26also the site performance all of this is 31:28good excellent animations but if the 31:31performance takes a hit then nobody's 31:33going to actually see those animations 31:34and actually 31:36um we will not be able to position the 31:37viewer in a place where we want to so 31:39for those reasons thanks to the native 31:41optimization that framework does on all 31:43the images and graphics and also the 31:45instant publishing uh it does a lot of 31:48heavy lifting on the background to 31:49ensure that the fight is you know very 31:52performant and that is something that I 31:53loved about this particular tool and how 31:55quickly it is able to bring the most 31:57interactive and High Fidelity animations 32:00in a very very fast performant way 32:04and then we have some of the things 32:06related to the CMS aspects we have the 32:09testimonials uh the co-ops and the theme 32:12information all of that under CMS 32:15collection which allows many of uh the 32:18team members who are involved in the 32:19project to asynchronously work and on 32:22different aspects while one person is 32:24actually working on the design the other 32:25person can actually add in the 32:27information and then both of them can be 32:29linked together later so this way of 32:31asynchronous and collaborative way of 32:33doing that has actually helped the team 32:35move much faster 32:37and then we have the fast iterations 32:39using the contextual comments so one of 32:43the things that we have done here 32:45particularly on the on this project is 32:47we've moved we've not uh kept the 32:50comments on figma alone we have kept the 32:53comments onto the framework when it 32:55comes to the higher Fidelity because 32:57that's where we will actually get to see 33:00things uh in a holistic way uh how it 33:02works how it is actually displaying how 33:04it is performant is it working on the 33:06device that the person is actually 33:07owning so all of those things taken into 33:10considerations it has given the team a 33:12lot more nuances to look into to bring a 33:15fully finished and Polished website so 33:17all because of the contextual comments 33:19because people are able to see it in 33:21real time and comment there 33:24thank you 33:24so that's pretty much it on I've just 33:28looked into the most important aspects 33:30and because it's also a very short time 33:33um so if you have any questions of 33:34course you can drop it in the chat or 33:36you can also reach us out on our Twitter 33:38handles 33:39and uh 33:41there are a couple of resources and 33:43tools that I wanted to just bring it to 33:45the four where uh this have been very 33:48very helpful in terms of executing these 33:50uh this particular site in a highest 33:52Fidelity of course framers here there's 33:54also the color box which allows you to 33:57set the color systems for this 33:59particular site and Pinterest.com of 34:02course visual mood boarding and 34:04metaphors and noun project.com for again 34:07visual metaphors and icon Inspirations 34:11and then phosphor icons for very 34:12utilitarian way of you know using the 34:15icons very functional way of directing 34:18um using it on actions and buttons and 34:20stuff like that 34:21and yeah if you want to uh know more 34:24about famous yeah we are doing more 34:26efforts on this particular front uh 34:29himanshu my colleague has been working 34:32on framer flex and we are also bringing 34:35um something uh called meeting frame a 34:37workshop where you all be able to get 34:38from zero to one on understanding 34:41framework and setting a very strong 34:42solid foundation on you know exactly how 34:45to use framework this is just beyond the 34:47YouTube way of consuming the content 34:49because there's a an experiential way of 34:51learning so that's a bit what we are 34:54trying to bring so thank you so much 34:58um 35:00thank you so much Arjun I'm so happy 35:02that you're sitting opposite um a 35:04computer could be past you because that 35:06was incredibly valuable thank you uh we 35:09do have a couple questions in the chat 35:11and I think your colleague is actually 35:12in here answering a few as well uh but I 35:16think one that has not been answered is 35:18did you face any challenges when you 35:20brought this to from figma to framer 35:22using the Plugin or how is that process 35:24for you 35:26yeah 35:27um so I'd like to answer this in a very 35:30crisp way uh we can get into the details 35:32but one of the most important things we 35:34need to understand is because how web 35:36works is fundamentally uh slightly 35:39different from how we are trying to 35:41design in figma so there's always this 35:43way of quickly prototyping and seeing 35:45whether whatever you have imagined on a 35:47free floating uh you know Infinite 35:49Canvas uh such as your figma 35:52um is that imagination coming through uh 35:55in actuality so that is something where 35:58um so before we actually finalize on any 36:00of the interactions and the sections we 36:03always do a little bit of a testing so 36:05that is something that has worked out 36:07but from copy and paste there's a little 36:10bit of um you know work that we need to 36:13do in terms of setting uh the 36:15responsiveness and all of that it's 36:16better handled on framer than on figma 36:18anyway so yeah other than that it's been 36:21super fast 36:24amazing 36:31little animations I think that's a 36:32particularity and related relation to 36:34the guide feature that you had on that 36:36flight 36:37um I know you had screenshots of that in 36:39this presentation so would you mind 36:41sharing that presentation 36:43um is that okay 36:47yeah absolutely 36:49thank you so much 36:53folks we've got a few more minutes left 36:55here if you do have one don't feel like 36:57we're too tight on time please ask away 36:59if you have a question 37:02I actually have a quick question uh 37:04while we're while we're in a welder I 37:07know that Jack's Prodigy was built on on 37:10a web plug beforehand how did you 37:12convince them to move to to frame or how 37:15did that conversation go were they were 37:16they open to it 37:19happy to share that uh one of the most 37:21important conversations again so one of 37:24the things that has given me the 37:26confidence to move into flavor is the 37:28way the Philippine has been actually 37:29shipping the features I'd like to give a 37:31lot of credit to the framework team 37:33because without those features being 37:36polished and in place uh it's it's not 37:38possible for me to even consider this 37:40tool 37:41um but between webflow and framework if 37:44the choice is very easy because it 37:46fundamentally framework takes a very 37:48different approach uh to building a tool 37:50like this uh it's if you are a designer 37:52already it's a designer's tool because a 37:55lot of things have been considered and 37:57borrowed from the best design tools that 38:00we already use whether it displaying 38:02whether it be Sigma so there is a 38:03metaphorical way of looking at these 38:05tools and interfaces so they've done a 38:07fantastic job in terms of making the 38:09interface very usable so that makes it 38:11very very fast so faster than what of 38:15course webflow is today I hope they will 38:17be able to bring more improvements on 38:19the that side as well while webflow is 38:22more powerful it's very important to 38:24look into the context of this particular 38:26project so what we really wanted was not 38:28more on the integration side not more on 38:31the user setup side but more on the 38:33expression side and the way of in making 38:36it very interactive and engaging and 38:38high on the storytelling parts so 38:40framework makes it naturally more easy 38:43to address these aspects specifically in 38:46a very fast paced manner so the power 38:48tools are there but the power tools also 38:51carry a little bit of a complexity uh 38:53what framer Nails is bringing the 38:55complexity down and making it very 38:57simple 38:58and also the parity pricing and uh the 39:02the comparative pricing of framework 39:05also makes it very easy to make it very 39:07cost effective to you know continuously 39:09maintain and ship sites for many 39:11different team sizes so that's also been 39:13a point of uh want to take interview 39:18amazing that's great thanks arjune for 39:21the insights 39:22so I will kind of die and I'm just gonna 39:25give five seconds if anyone else has 39:27another question and if not we will call 39:30it for today 39:34all righty just want to say a huge thank 39:37you again oh we have one more question 39:40right on time what is your typical 39:42workflow from figma to frame rate look 39:44like Arjun yeah so I'd like to actually 39:47split these two things in and because 39:49they also fit into nice buckets it's 39:52very important to understand how we uh 39:54how designers work in terms of Imagining 39:56the things and uh before you know uh 39:59even getting into the build process so 40:01uh while figma is very good at 40:04Imagination a lot of considerations have 40:06been done in terms of uh thinking what 40:09should be the story how we should tell 40:10it and what are the various options on 40:12how we can show it uh so I don't know if 40:15I have time enough to Showcase uh a very 40:18glimpse of a project website but the 40:19slides are anyway shared so probably 40:22there's a way for all of you to actually 40:24look into those things where I will 40:27include a screenshot of that but the 40:28idea is to have a lot of options and 40:31then freeze on a couple of them which 40:33are which are potentially very high in 40:36terms of delivering what we want to in 40:38terms of the story in terms of making 40:39people take action on the site and then 40:42bringing that onto framework uh there 40:46are two parts to it one is the easier 40:48Parts where you know you are able to 40:50copy a lot of The Styling elements the 40:52second part is actually where you are 40:53able to understand the fundamentals of 40:55the web and uh cater to that uh which 40:58framework makes it very easy in terms of 41:00the stacks in terms of 41:02um you know setting up the interactions 41:04using the variants and setting up the 41:06SEO and all of that is you know brought 41:09together and in a very simple and uh 41:11intuitive way so that makes it very easy 41:14there is a bit of a style fitting and 41:16all of that you have to do 41:18um I hope framer theme is also looking 41:21into those aspects so yeah 41:24the future is bright that's much for 41:26sure 41:27I agree with you on that one there is 41:30absolutely bright over here on the 41:31primary team 41:35for for joining our very first show and 41:38tell just kind of questions thank you as 41:40well to our co-host Cedric majority and 41:42Arjun for selling off your workflows 41:45showing us how you work showing us your 41:47your outputs as well it's been 41:49absolutely incredible to learn from from 41:51folks who are such trainer Pros 41:54um the recording for this will be posted 41:56into the community once it's available 41:58um I hope you all enjoy the rest of the 42:00day wherever you are in the world and I 42:02will see you all online thank you so 42:04much 42:05thank you so much everyone thank you 42:07very much bye guys

Also coversCMS Pages / Dynamic Content Collections Component Variants Components Frames Hover & Press Links Plans & Pricing Plugins Responsive Design Scroll Animations Stacks Templates Themes

Watch on YouTube ↗

‹ Navigations: Mobile Menus 2

Navigations: Horizontal Side Scroller ›