Figma to Webflow Full Build 2024
Вставка
- Опубліковано 9 кві 2024
- 00:00:16 - Styleguide Setup
00:10:26 - Build Start
Figma File
www.figma.com/community/file/...
Webflow Starter File Cloneable (affiliate link)
webflow.grsm.io/tricks?path=r...
Completed Build Cloneable (affiliate link)
webflow.grsm.io/tricks?path=r...
Lumos Chrome Extension
chromewebstore.google.com/det...
Join my Webflow Wizards Community
/ timothyricks - Навчання та стиль
This is a very great tutorial Tim! Thank you so much for your dedication to teach us! I'm now much more confident with Webflow Lumos Framework workflow
Thanks so much for the kind words! I’m so glad this helps!
I've been chipping away at Lumos and it's framework over the last couple of weeks. You're an absolute legend Timothy.
agree
If you have some knowledge of HTML & CSS then you would understand the power and beauty of webflow. Switching over from WordPress to Webflow was the best experience ever. It's so powerful and wonderful to work with. Thank you for a good tutorial!
Totally agree with you there!
Spending that little extra time on set up with classes and variable really makes the build get faster and faster as you go. Even if the site had more pages you'd be able to race through in no time. Really great stuff!
Thank you! That’s a great point! The styleguide setup is so important
You Are A Legend ! I'm just starting with Webflow, because one of my clients wants me to get into it. Finally, a tutorial on how to use Webflow in a Business environment with all its features! Thanks
Thank you! I’m so glad this helps!
It's very nice, I have to watch it in 4 or 5 sittings, so much info! But great to have it in 1 build 1 video. Awsome work! I might finaly switch away from client first.
I am going to keep following your page build tutorials every time you add them to get used to all of your classes. I am a senior dev and I don't use Webflow for my day job but I am determined to start using it for freelance work on the side because watching you work makes me realise how much quicker I could be if I properly learn your way of thinking when it comes to class names. Once I have those memorised, I can overtake my coding speed with Webflow speed. Keep up the excellent knowledge sharing. Legend
Oh, awesome! It's always exciting to hear of developers trying Webflow. Freelancing with Webflow is definitely a great use case and something I've done for a while. Great luck with learning Webflow! If it helps, I have a filterable notion list of all the classes I use here.
www.notion.so/timothyricks/1561e2fbef3346258d5c99637042d47a?v=1388b5323ea84784a29ca32909399eec&pvs=4
@@timothyricks much appreciated sir. I'll keep trying to refer to this. It's funny being a developer who is very comfortable writing the eventual code but just trying to think how you would name specific classes. Your Notion list can only help 👍
Thanks Tim for this specific and tiny things under your build. So helpful.
Now I have finished building this out, I think I need to add some scroll movements and load-ins to this beast. I will be sure to share it once I have it via some form of social media goodness
This is exactly what I needed. Thank you so much. Gonna share with my sis who is also interested. Nice. Thanks again.
Tim, you make me better! Thank you 😊
Next Webflow feature: Themes, because this guy is a legend and assists all Webflow users. Nice vid Tim! 😎
This is absolutely a great build Tim, Thank you for this.
Time to get my hands dirty right away.
Thanks so much! I’m really glad this helps!
I was soooooo hoping you'd do this in time for my next build Timothy. Thank you so much for all that you do especially this walkthrough. Perfect timing🔥🙏🏻💜
Oh, awesome! I’m glad this was ready in time! Great luck with your next build 👊🏻
This is a really useful vid for getting to grips with the latest Lumos changes. Thanks Tim!
Thank you, Jordan! I’m glad to hear that!
Thank you a lot, Timothy for all you do for us! This is great help.
Thanks so much for the kind words! Really glad this helps!
Awesome work Tim. Will be back to watch this in full!
Hunting for your explainer on Lumos Chrome Extension
Update, found it! ☺
@@timdaff Thanks so much, Tim! I just added a page to the docs about the extension for easy access. www.notion.so/timothyricks/Chrome-Extension-4289157c16384fb3abef3f84a815045e?pvs=4
Simply remarkable! Thank you Timothy, this is so helpful, really outstanding.
Thanks so much! I’m glad this helps!
Thank you for this . Really wanted to explore Lumos 🔥
My pleasure! I hope this helps 🙂
Awesome vid! it work great
Thank you!
Man! You are the Lebron James of Webflow development. Please keep the tutorials coming. I absolutely love your process. 🧡🔥
Thanks so much for the kind words! Will do!
Although I'm from Bricks Community but found it to be such an useful video, really appreciate your efforts...really hope that you upload more such videos on modern and complex layouts.....even short format like one section at a time, but the process and logic behind it...new sub!👍.
Thanks so much! I’m really glad this is helpful and appreciate the tutorial ideas
Thank you Timothy, this video is amazing. I can use the Lumos framework much better now. Hoping for more tutorials like this.
Thank you so much! I’m really glad to hear that
4 days ago I used this design template to create a landing page for my client. I sold it for $150. lol
Maan this is so goooood!!!!
Thank you!!
Loved it, specially code override ❤
Thanks so much!
This is so awesome 🎉 Want to cancel all plans this weekend and dive in to this 😅😀🙌🏻
Haha! 😆Thank you!
This man at least deserve a NOBEL PRIZE 🏆
Design is amazing
Thanks so much!
Such a joy to see your workflow! Makes me sad to know that I'll never reach your level ;)
I feel privileged to have you as my tutor. Thank you
Thank you for the kind words! :)
Great video as usual. Loved it.. What did you use to create the footer and hero video?
Thank you! I used Spline to create the footer. Lummi.ai for the hero photo and runwayml.com to turn that photo into a video.
Awesome vid! How did you make the bold words in the headings different colors?
Thank you! Webflow has an option natively to style all bold text when inside of our rich text class. I set it up at this timestamp. ua-cam.com/video/Q76GPu9_DnI/v-deo.htmlsi=sI8WjvryOBKa42Vm&t=1755
A masterclass once again. Since the V2.0.2, Lumos became more accessible, and easier for new comers. But at the same time, the framework doesn't lose the high level of complexity we need for creative builds, and it makes me more comfy with the shipping because i know the client will not break everything. I just would know why the u-column utilities aren't used here, maybe to not stack classes and because it's more relevant to use flexbox ones.
Btw, i love the way you make it better and better, using what webflow provides, and make us step up on technical points.
Thanks so much for the kind words! I didn’t have a use case for the full width or indented column utilities in this design. I could have used the regular u-column utility for defining custom column spans, but it wouldn’t result in less code created since the grid-column property has to be overridden regardless. It would have been an extra class stacked with no purpose. That utility is more for people who are still learning the property names and values.
Great! I created a u-column-hflex and vflex to avoid the stacking issue in a precedent test build, so it makes a lot of sense to me. Can’t wait to build with it and see the next updates!
Oh, that’s interesting! Sometimes it might be helpful to have an extra div inside the column to handle flex layouts. It can help reduce class stacking and make the grid layout more reusable so that it can hold different types of flex layouts and components inside it.
@timothyricks Is there a way to add custom ratios to different images on a page? I'm trying to stack images in a column but some have different ratios. Can this be done in via the custom properties panel?
Outstanding work! Massive thank you for putting this together! Quick question...I'm following along with the Webflow clone and for some reason when I set the data-theme property for the nav_wrap none of the options are visible. Did I miss a step?
Thanks so much for the kind words! The buttons are added by the Lumos Chrome Extension if we include the word "Theme" in our component field name. Theme switching still works without the extension, but we'd have to manually type the value.
chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj
Excellent Tim this is a wonderful tutorial , I am fairly new to Webflow and this is so helpful. Thanks a ton again will this lesson continue to complete the rest of the pages, links etc ? Cheers again
Thank you for the kind words! I'm really glad this helps. I didn't design other pages for this site, but thank you for the suggestion!
Great content Tim! I see you have an overlay of column guides inside webflow and they are even numbered 1-12 at the bottom. How are you doing that? It looks extremely helpful to develop on webflow like that (just like in figma)
Thank you! The Grid Guide component is just made out of divs that are position fixed and pointer-events: none above the whole page.
Hi Timothy, I originally set up a previous version of Lumos in my website where I had set the variables for fonts and colours inside the code embed, is there a benefit (eg. faster loading) to using the Webflow variable system instead of keeping it all in my code embed?
Hi, using native Webflow variables instead shouldn’t change the load time, but native variables are more flexible allowing us to easily apply them to a selected breakpoint or element state.
Thank you so much Tim for all your work and for Lumos that skyrocket the process
please Tim when are you doing a complete course from beginner to advance on webflow using Lumos framework. i really can't wait because most of the courses out there aren't really recent. love your work a lot ❤🔥❤🔥
Does anyone know how he has those property buttons in the component properties area? where he can select between different theme options or button styles just by clicking a button?
Hi Michael, these buttons are added by the Lumos Chrome Extension based on the themes in our embed. chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en
Hi Tim, I'm having one trouble is that all the headings are not in the right font size, weight, line height... any reasons why? I tried to clone a brand new Lumos site but this still not work.
Hi, in the latest version all headings have no styles by default. We can add any heading class to them to apply the styles.
I love it! I've been wondering this as I've worked in Lumos, especially in 2.0.4: What's the benefit of the Global / Heading or Global / Paragraph components, especially having both the rich text and plain text versions? I was excited to use it at first (the novelty of it, I suppose), but I'm still confused about its benefits, especially at a sitewide level. Thanks, Tim!
Thank you! Great question! When we link a regular heading or paragraph to a component field, we can no longer bold or italicize words inside the text or make certain words a link. So using a rich text instead allows for more flexibility as the site grows or if the design ever changes. The Global / Heading and Global / Paragraph Components also have a max-width field built in which can only be set on the custom element currently. This allows us to set the exact line wrap we need for each text block. The plain text versions inside the component serve as a fallback incase we ever need to a section heading or paragraph linked to something like a cms name field or some other non rich text field.
Hello Timothy, your videos are excellent.
Do you have a video explaining how to import figma into webflow with its pligins?
how are you getting "button" options for the themes for the component starters?
The Lumos Chrome Extension adds them automatically based on the themes and styles in our embeds. chrome.google.com/webstore/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj
How do I change the styling of the " Bold " " g_header_text " after the " g_header_wrap " has been made into a Component (31:00 min) ? My Bold is not the secondary-text color that it should be. Thank you!
Hi, we would apply the g_header_text class to a rich text and style all bolds inside that class to have the correct color. I show that part at this timestamp
ua-cam.com/video/Q76GPu9_DnI/v-deo.htmlsi=sI8WjvryOBKa42Vm&t=1755
Thanks for the video, I learned a lot again!
Just a quick question: What's the reason for using the SVG Import plugin instead of just using an HTML Embed and paste the SVG code in there? Are there any upsides for the former?
So glad this helps! With SVG Import, it’s easier to set individual paths inside the svg to different color variables by applying a font color natively to the path. It also allows us to bypass the Webflow embed character count limit and to link attributes of the svg like stroke width to component fields if needed.
@@timothyricks amazing, thank you so much!
This is super helpful! Question... I have an existing Webflow site I want to introduce Lumos into. Is there an easier way to get it setup with Lumos 2.0 than manually copy/pasting elements, manually inputting variables, and reconnecting fields to variables?
Thank you! The CutCopy Webflow App can automatically add all the variables in, but the elements still have to be manually copied and relinked to variables and components
@@timothyricks Ok, thank you! Good to know it's not just a simple solution that I was blindly missing. Recreating everything will be a good way for me to get to know my way around all the pieces. Thanks again!
Hi Timothy! First of all thank you for such a great framework-I believe it will revolutionize the way we use webflow.
I do have two questions, though as I am perhaps missing something.
Around 0:19 in the "Lumos V2 is Live" video, you show how the sizes essentially scale down for smaller breakpoints. Whenever designing, would it be a good practice to keep documentation of what each size reduces to and tweak the custom code based on the project?
Also, where are the gaps defined? I see it is a utility class, but how do I adjust the gaps to my project? Again, am I missing something? Thank you!
Hi, the "size" variable folder contains all the adaptive sizes that can be used for font size, gaps, icon sizes, or anything else. I usually don't tweak these values between projects, but they can be adjusted from the responsive embed if needed. We can also create custom responsive variables similar to how the padding-horizontal/main variable is handled in the responsive embed. All of the gap utility classes in Lumos are referencing the "space" folder in the variables panel. Those variables can also be used directly in the style panel if we ever needed to apply them to margin or padding for some reason.
Hi Tim, i was wondering what is the best practice to use a video from UA-cam inside the Global Visual Component. I can't figure why it is not working.
Thanks a lot 👊
Sadly, UA-cam urls can’t be used in a html video tag’s source. We could either get the direct url of a video from a paid Vimeo account, AWS account, or copying the url from a Webflow background video.
@@timothyricks Thanks for your reply! Yes i was thinking using webflow video bakckground :)
Hi Timothy! Great video; thank you. :) One question: I wonder why you're not using the Figma to Webflow plugin. Do you, like me, think that as of today, it's easier and faster to make it manually, as what we copy via plugin many times doesn't work as expected, and we need to fix it anyway? Things like typography, for instance. I'm curious what you think. Cheers!
Thanks so much! I’m glad this helps! Yes, personally I find the plugin is too limiting right now for my projects
Hey Timothy webflow localisation doesn't work well with components as of now thoughts on this?
Oh, I didn’t realize that! Hopefully, it gets improved. The same class strategy from this video could be used with unlinked components. It would still allow for global style updates, just not global structure updates
my question is: why do we have the max-width set to 90rem and not 90vw? On large screens we have a problem with this approach
Usually if our container’s max-width is fluid, then the content inside needs to be fluid also. There are ways to do this while staying accessible but using VW directly isn’t one of them. It’s safer to keep everything in REM and then scale the html element font size disproportionally if needed.
Hey Tim! Love this.
One question though: this design is basically made with Lumos in mind, right? Would that same approach be much harder on a design that we don't have any control over?
I say this because now I mostly build websites but never design them, so I don't know how hard it would be to implement something like this.
Thank you! I often develop designs from other designers that weren’t built with a strong system. I usually ask to consolidate where possible. If there’s 20 different section spacings used throughout the design, can we narrow it down to 6 or so? If button styles are inconsistent, can we narrow it down to 4 different styles or so? The biggest thing I ask for designers to do is design with some type of layout system in mind. Not only does it make the project cleaner to build, but it also improves the visual consistency. That being said, most designs can be fitted into some sort of visual system in dev. Just the more inconsistent the design is, the longer it takes to setup a styleguide for.
@@timothyricks That makes a lot of sense! Thanks again Tim.
Make a video for how to connect theme mode toggle button into this website
On the figma side, did you use Token Studio?
Yes, but just for typography styles. I used Figma variables for everything else.
Hey Tim,
Do you ever change your Figma settings to display in rems instead of pixels? I think if you just click on the interface (off the design) you can change the units to rem's instead of pixels. Quite a time saver :D
Oh wow! I never knew that’s an option. Thank you!!
Will the REM values copy over to Webflow as REMs though? I thought the sync process worked in pixels only (could be totally wrong!)
@@gmcwhinney - If the pixel value is 16px on your figma. When copying over to Webflow you would divide the 16px by 16 to get your 1rem value. If you change your units in figma to rems. It does this for you. So instead of seeing 16px you'd see 1rem.
It just helps you skip that step of having to /16 each time in Webflow :)
@@geoffdawes6529 That's awesome, thanks. Lots of juicy Figma announcements this past week too, right?
I'm curious about your use of utilities in your builds. You mentioned that you use utilities to reduce the lines of code and improve the loading speed of the website. As someone with a limited background in web development, I'm confused about whether the utilities create the code themselves. I'd appreciate some clarification. Thank you.
Oh, good question! When we apply a style to any class, Webflow adds that class and its styles to our css file. And it runs that css file on every page. So even if a page doesn’t have the .about_img on it, it still has to load the styles created for that about_img.
So instead of this…
.hero_img { border-radius: 0.5rem; }
.about_img { border-radius: 0.5rem; }
.contact_img { border-radius: 0.5rem; }
We can create one class and use it across all of those images. So we have one line of css instead of three. The larger a site becomes, the more lines of code this can save. It’s especially helpful for utilities that apply a lot of styles instead of a single style.
.u-radius-small { border-radius: 0.5rem; }
@@timothyricks Makes sense. Lumos has been a blessing to me. Thanks for all you do for the community. I'm constantly rooting for you. ✨
@@reymiahthesun Thank you so much!!
Are you using something different than what is available in webflow for utility classes?
No, the utility classes are all native Webflow classes. The color mode switching still uses custom code data attributes until Webflow releases that natively
How is this different from your previous video on Lumos? You mentioned in that video Webflow isn’t really designed to utilize utility classes and that with the lumos extension you can just add utilities on the end of classes instead.
Just a little confused between the two videos.
Either way, I’m new to Webflow and your videos have been immensely helpful! Slowly learning CF and now what you’re doing here and deciding what’s best for me moving forward :)
Hi Lukus, Lumos uses all native Webflow utilities now whereas the nested utility classes from previous versions required custom code. At the time they were created, the only way to use most of these advanced grid features & variable features was through custom code. But as Webflow keeps improving, I'm able to make more parts of Lumos completely native. There's still some disadvantages to native utility classes in Webflow, but at this point, the pros outweigh the cons. I have a full comparison here.
github.com/lumosframework/lumos-v2/releases/tag/v2.0.2
@@timothyricks thank you for your response. I think I’ve just confused myself 😂
I’ll watch this video again.
Potential video idea… Adding additional themes other than just light and dark. I have a project where the client is several brand colours instead of light and dark, being able to create a theme for each brand colour would be awesome for the client and save them from messing up the overall branding styles created :) I know it would just be adding more code to the embed, but would still make for a good video for those not using just light and dark themes
@@LukusThomas Thank you for the great idea! It's definitely a needed video. I never have more than three themes in my projects: light, dark, & brand. Within each of those themes, we can dynamically switch between brand colors with a data-brand attribute. I have a cloneable example here.
webflow.grsm.io/tricks?path=lumos-brand-switcher
And here's a short video on it.
ua-cam.com/users/shortsC6ZNIvorlRs
@@timothyricks this video helps!!!
I think I MIGHT be able to piece something that would work for the project I’m working on. It would be a theme though, not a brand like in the short, as I would need to apply it to specific sections, not override the light and dark. I think this project is just a special use case, not the normal projects I’ll be working on.
I think most projects I will be working with will have a light, dark, primary and secondary theme.
But I have lots of ideas on how a “brand” use case could look with the people I plan on working with… My clients have blogs, podcasts and UA-cam channels… could have a brand for each different type of content they create
Hi! Just making sure that I need to pay for Webflow in order to change anything on the custom code, is this correct?
Yes, that’s correct. Color is the only code adjusted for this tutorial. If you’d like, you could clone the completed version that already has the correct code and just rebuild the sections inside that.
@@timothyricks you really are the man, damn
Okay, one more question... how did you make those videos you added on the landing page?
Digging a bit deeper on your thought process for components - I see that you've leveraged Rich Text to be able to have content blocks be pretty versatile. But on the styleguide I see you've made the base Rich Text element base styles all the same (h1, h2, h3, etc...).
What is the reasoning for this?
Hi, the heading tags have no styles by default even outside of a rich text block. This allows us to apply heading classes to the parent of a rich text component if needed to affect all headings inside. It also ensures that every heading gets a custom class and utility class which is important for being able to rename that utility class later and have it affect everywhere that combo was used.
Wow this is so incredible. I'm busy learning the Lumos system and it's pretty overwhelming but whenever I just watch you work I am reminded again about how much serious power it's got under the hood! One question I have is that I see you don't make use of text-wrap: balance here at all, is there any specific reason for that?
Thanks so much! I'm really glad to hear that! text-wrap: balance currently isn't supported in FireFox or Safari so I use a ch max-width on the text instead to dial in the exact line wrap needed.
@@timothyricks Ohhh OK got it. I figured you'd have a reason because I highly doubted it was an oversight haha. Thanks man. Love your work and definitely going to be investing time into getting this system figured into my workflow.
Hey just curious to ask, is there a reason you dont use the figma to webflow plugin? The one webflow made?
I find Figma has too many limitations like a lack of aspect ratio, grid, or other css properties that are needed to build a real website. For me, the cleanest and most efficient solution has been building the redesign directly in Webflow.
ohh thank you for your insights! It makes a lot of sense to just restructure it now that you point that out
Hey Tim, sorry to ask this, but can you explain the difference between applying class and change the the index based on the variable. For example at 14:07, adding the gap with small gap in variable won't make any difference right. I assume you added just class just to be faster and also understand the indexes without scrolling down. Love your videos btw, I'm new to webflow and decided to dig in your videos to start. If you have any advice like the order of the videos, which course should I learn first... that would be great. Thanks, man!
Hi, great question! If we click in the style panel to add a gap, an extra line of code will be added to our css each time we do this. But if we use a class that already exist, we're able to keep our css file smaller which can help our site load faster. This is more important for larger sites since Webflow currently loads all styles in the css file even if they're not used on the current page.
Also for the order of videos, I'm building a playlist of Lumos related videos in the best order to watch them here. ua-cam.com/video/Q76GPu9_DnI/v-deo.html
@@timothyricks wow, I didn't expect you to be answer so soon. The answer makes perfect sense too, thanks for the list as well, will watch them all 🙌. You are the best man!
P/s: hope you don't mind if I keep asking some newbie questions like this in your videos!
oh is this also means with sites that I've finished developed, should I remove all the class that not being used to make the site speed faster?
@@nhato4644 Yes, cleaning up unused classes can help. If classes don't have styles applied to them (nothing blue in the style panel), then they aren't added to the css file regardless. But classes with styles attached that aren't being used will be in the css of every page.
Hi. Is this beginner friendly? I’ve never used webflow before but coming from Framer.
Hi, so glad to hear you're trying Webflow! This is more of an intermediate to advanced tutorial. Here's a more beginner-friendly tutorial. ua-cam.com/video/GdeQKGhPKpQ/v-deo.htmlsi=GLu_X24lukZgcgDg
@@timothyricks thanks. I appreciate the response.
Tim, I'm curious how do you name your class super fast without copy pasting it?
Hi, Fast Class Naming is one of the Lumos Chrome Extension features. If we press the right arrow key inside the class field, it will return the class name of the parent.
chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en
@@timothyricks Thank you so much - This is super cool!
very useful and will saves so muchh time!
Hi Timothy, would you consider recording the Figma design process as well? 😊
Thanks for the great idea! I have one here but for a different design. I know more of these design tutorials are needed
ua-cam.com/users/livexvs3diSfVPg?si=gSJcNHaidxI6c9Mb
How to give this to client? Client have to pay for plan or what? No one is talking about it! Help pls.
Yes, usually I would build this on a new Webflow account that I can give to the client once the project's completed. The client would usually need to pay for the CMS Plan and purchase a domain name from a third party service like GoDaddy. Webflow has some great lessons on their channel for setting this all up.
ua-cam.com/video/s-4jJfk3ifo/v-deo.html
@@timothyricks Thx!
Hello.Thank you very much for your work.I am a beginner,is it possible to replicate this on a starter plan?
Hi, the free plan doesn’t allow for editing custom code so we wouldn’t be able to adjust our color modes. If you start from the completed build cloneable though, the color code will already be setup, and you could delete the sections and rebuild them on the free plan.
Dang im so early
That might be a dumb question but why not using the Figma to Webflow plugin ?
I find it’s too limiting currently for real projects. Maybe for a lower budget, fast turnaround project it could work. But there’s too many properties like grid, aspect ratio, and more that Figma doesn’t support so an automatic transfer from Figma to Webflow isn’t as clean.
@@timothyricks oh ok ! Thanks for your answer! I am a beginner in Webflow so sorry for asking this. Thanks for sharing your knowledge.
@@Omzing It's a good question! Happy to help :)
Hi Tim. Any plans to release location based pricing for your Patreon subscription? $40 is about 10% of the price of a 1 bedroom apartment in a third world country like South Africa :P
Do I understand correctly that the 👎1⃣ was put by a resentful Wix user?🤔
Haha! No telling
the "u-hflex-nowrap" utility isn't inside the webflow template
In the latest version, the flex utilities are set to not wrap by default. So only the "u-hflex-wrap" utility is needed to override the default style.
@@timothyricks thanks Timothy!