Build your Figma design in Webflow - Figma to Webflow (Part 5 of 7)

Enroll for the full course at Webflow University: university.webflow.com/figma-...
Publish your site to a custom domain (Part 6 of 7): • Publish your site to a...
Now that we have our wireframe designs and 3D assets, we'll now build our site in Webflow. We use our Figma wireframe design and 3D Lottie files to build out the site in Webflow with rich interactions to engage our customers.
Share your progress #figmatowebflow
In this lesson, we'll build these parts of our website:
00:00:00 - Introduction
00:02:36 - Hero section with a responsive background image
00:28:14 - Navigation bar (navbar) including our logo
00:41:37 - Product features section using classes & Webflow Interactions
01:18:40 - Featured logos section using CSS grid
01:24:15 - Contact us featuring a Form block
01:31:09 - Footer with links and more grids
01:48:38 - Accessibility check
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community:
webflow.com/community
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@jugglerfox]

The chemistry between these two is ELECTRIC

[@Who_Is_Yasir....]

agree sir!

[@ux4861]

I like how this is like a cooking show, but you are cooking website 👍

[@johnasare3628]

Wow, you literally gave a full course about webflow in two hours 👏🏿

[@Webflow]

Glad it was helpful!

[@mimosa_daddy]

Again, if Bob Ross did web design, this is how his show would have been. Kudos

[@loganbenjamin8922]

Thought that for years! #Win

[@inferno25znc]

Those drops of goofiness interspersed in the tutorial make it so engaging and keep the attention in. This is a masterpiece, guys.

[@Cyrus-Estavillo]

This is one of the most helpful and engaging tutorials I've ever seen. Thank you guys

[@StepanHKA]

Wow, just beautiful work on the explanation. So smooth

[@the_end_boss]

I upgraded my free subscription after watching this video. Thank you for making it fun again.

[@ChauNguyen-nb5so]

Very nice tutorial. Good job you two and good job to webflow!

[@liluterKA]

Grate work in teaching. Great team. Good work. Nice fun. Amazing style and atmosphere. Good sense of humor.

[@dannidrenovci894]

Can't thank you guys enough! 👏🏻👏🏻

[@vamosaprenderlol1163]

It's absolutely amazing how Webflow is making me like Web Design. I was using Wordpress, but I was so limited as a Designer that I even got discouraged. With Webflow creativity goes a thousand ways and I feel like using Figma to create a website. Also, I gained a lot of time using it to create a website. Thank you very much to the Webflow team for having developed this wonderful site and even more with this course with the best possible quality! Hello from Brazil😁

[@charlie-george]

This is GOLD DUST. Production quality and general persona and camera presence is second to none.

[@liludallas606]

your duet in this video is amazing) thank you for tutorial

[@chloedesigns]

Thank you so much! I've learned so many things!

[@yunestaghizadeh8893]

it's full of information and yet it is interesting to watch. Thank you, Great job!!!!

[@kevinnndu30]

Awesome, I just purchased a plan to Webflow just because of those videos ! Thank you sooooo much

[@aakashyamba]

What a journey. What a tutorial. Kudos to the entire team 🙌🏼

[@Webflow]

Thank you to the moon and back!

[@RustRobster]

Nice workshop, i would suggest getting a course in ui design and study material design for a few tips on minimal button size etc.

[@remyaugmento]

Very entertaining tutorial haha!

[@someshkumar2373]

i just love the whoiole video editing team

[@JoseHernandez-wx8nj]

I love these guys

[@billburrfans]

Beautifully made, very informative , funny as hell this is the best tutorial I've ever seen by miles

[@WillSlaton]

You should set 8 variable colors (matching bottles) for the "sign-up" button, so that it changes every refresh...

[@malu.maluqui]

Love you! 🤩

[@ahmetloca]

Thank you🙏🙏

[@aaronlobo3896]

execution on this video is 100

[@Ricardo-vv8sy]

What a laugh these two 😆 This is the best way to learn Webflow

[@Kim-hv8ri]

perfect tutorial. i appreciated😀bb :)

[@redaizo]

Hahaha I’m so dead. “This team is extremely skilled to ed-“ I laughed on the train love your tone and format. One of the best from a brand on KZbin 👍🏽

[@AntwonTerell]

🎯 Key Takeaways for quick navigation: 00:32 🌐 In this lesson, they start from a blank site in Webflow to build a full-page design, covering the fundamentals. 01:00 📐 When transitioning from design to development, there are different approaches, but they use Figma to develop a mid-fidelity design in this example. 01:56 🧰 They break the lesson down into six parts: hero section, navigation, product features, featured logo section, contact form, and footer. 02:24 🖥️ They emphasize that the principles they teach are applicable regardless of your development environment. 15:09 🎨 Classes in Webflow help maintain consistency in styling and reduce the total number of styles to manage in a project. 17:00 🎨 Styling in CSS goes beyond just font color and weight; it includes anything in the Style panel. 17:29 🖼️ You can set background images in Webflow, adjusting settings like cover and position for responsive design. 18:27 💻 You can preview and test the responsiveness of your design in Webflow, making adjustments for different breakpoints. 24:14 📐 CSS styles can be inherited, so setting top-level changes for typography in the parent element can save you from styling each element individually. 32:46 🖌️ You can apply and customize styles to elements like text and backgrounds in Webflow, and changes made to one element with a class can affect all elements with that class. 33:42 🖌️ You can create combo classes in Webflow to apply specific styles to elements without affecting others. 35:07 🧩 Combo classes in Webflow allow you to make more specific styling changes while inheriting some properties from the base class. 37:58 📏 You can use margin and padding adjustments to control spacing and layout in Webflow. 39:25 🎨 You can easily change colors and styles in Webflow using swatches and combo classes. 46:35 📦 Div blocks in Webflow can be used to group and style elements, allowing you to control layout and apply styles effectively. 50:43 📝 When duplicating elements with shared classes in Webflow, changes made to one element with the class will affect all instances of that class. 52:39 🎨 To create visual differentiation between sections in Webflow, you can use gradients or blending modes to control how elements interact with their backgrounds. 53:36 ⏭️ You can use negative margins to adjust the positioning of elements in Webflow, allowing them to overlap with previous sections. 56:27 🔄 You can create scroll animations in Webflow by using element triggers and defining animations to occur at specific scroll percentages. 01:06:41 📱 When designing for responsive layouts in Webflow, you can adjust font sizes and other styles on child elements to inherit changes from their parent elements, maintaining consistent design across breakpoints. 01:08:01 📐 Text inheritance is a powerful technique used in web design for consistent styling and layout. 01:09:00 📱 When designing for mobile, consider adjusting maximum widths and margins to ensure responsive design. 01:11:51 🖼️ Utilizing base classes and combo classes in design tools like Webflow can help maintain consistency and simplify future changes. 01:15:11 🧩 CSS techniques like using viewport width (VW) can be applied to create responsive layouts. 01:18:00 🌐 Adding alt text to images is important for accessibility and search performance in web design. 01:25:44 🎯 Use the Command+E shortcut in Webflow to add elements like sections, div blocks, and form blocks efficiently. 01:26:39 📏 Adjust element width in Webflow to ensure it fills available space up to a maximum width, allowing for responsive design. 01:27:08 🖍️ Create and apply CSS classes to style elements consistently in Webflow. 01:29:04 📐 Use Flexbox in Webflow to align and position elements within a container for better layout control. 01:42:40 📱 Ensure responsive design in Webflow by adjusting padding and layout for different screen sizes. 01:43:10 📐 Adjusting footer grid: In Figma to Webflow design, you can modify grid columns and row gaps to fine-tune your layout. 01:44:07 📏 Increasing tap target size: To improve user experience on mobile devices, consider adding padding to increase tap target size for links. 01:45:32 🧩 Responsive design control: Building with responsive units allows complete control over design and ensures it looks good on all devices and screen sizes. 01:47:28 📱 Single-column layout for mobile: Adjust your grid to a single column layout for better mobile portrait display. 01:57:01 🍀 Utilizing sticky navigation: Make your navigation bar sticky to enhance user experience and provide easy access to site sections. 02:01:38 🛠️ Customizing form error messages: You can personalize error messages on your forms to match your brand's tone and provide contact information for assistance. 02:02:08 🌐 Testing and publishing: It's essential to test your website on different browsers and devices before publishing. Make sure your design responds well in various conditions. 02:03:05 🚀 Preparing for domain connection: In the next lesson, the video will cover connecting the website to a custom domain for publication. Made with HARPA AI

[@NavesNiche]

That's a whole other level of a tutorial

[@DrWoT-uh9zm]

You should adapt the tariffs for the CIS countries. For our region, the prices are expensive. I hope you will think about this question.

[@rickardrisberg6999]

Been looking forward to this!

[@Webflow]

We hope you enjoy and it bring you tons of value!! 😁

[@dinanoya2655]

Hi Webflow, I was just wondering how the smooth scroll effect was achieved when you covered the section to jump to different sections on the page. Mine is a bit jumpy at the moment. Thanks so much for the tutorial!

[@Webflow]

Hi! You can control the speed of the scroll in your Element Settings panel. Check out how here: kzbin.info/www/bejne/e3qWcoKZqLRrodE Let us know if that helps!

[@afolayanolajesu1599]

Hi guys, this is a very beautiful tutorial, please how do I add a sort of black overlay to improve contrast on text-image backgrounds

[@1filmpjesmaken]

Great sources! Perhaps, that you offer the link to the design in Figma file for a download? Thanks a bucnh!

[@todd_bracher]

webflow, you folks amaze me.

[@alexanderbrandt8342]

Hey guys, I'm following along using your asset folder. And I have problems with the lottie animation. First it became smaller when I used preview mode and with instant preview the animation was laggy. Now I tried to import everything again and redo it. The animation is visible in the assets tab, but it doesn't show at all when I pull it into the page. I tried different containers and sections already... Maybe somebody can help? Amazing course by the way ! Very on point aaand entertaining. Every learning experience should be like this! If the rest of your academy content is like this I'll know everything in a week!

[@alexanderbrandt8342]

Ok, I closed my Macbook Pro and finished this part on my desktop PC (chrome) and it worked without any problems. Nice that it's browserbased and switching is so easy and fast. Aftewards I tried opening it on the Macbook again and after cleaning caches it worked aswell. A little bit of Wordpress feelings coming up ;)

[@liz6245]

Came here for te knowledge, stayed for the plot

[@unofficialnickcantu]

I have an issue Im a little stumped on at the moment. I've followed along precisely and when I preview my dropdown navbar menu, the menu items show up below my herobox. in the navigator the "nav menu" is above the herobox. Is it something to do with new default settings when creating the navbar? I'm feeling a bit lost. When I edit the nav menu in editing mode, it is under the burger menu in the navbar. It is only in preview mode that I have this issue.

[@al-ft1ng]

32:48 Wow. Numbers are now colors. Learning more everyday 😂

[@LightslicerGP]

0:43 amazing cutoff, also ima grab my popcorn for this one lol

[@WillSlaton]

I equate Z-Index to building a sandwich. Layer 1 (the bread slice) is always on bottom and starts the sandwich, moving upwards. Every man loves a sandwich metaphor.

[@tifacola]

Wait, i thought we could copy/paste the figma design in there or upload it via master componants

[@cmadd498]

Can you export files from the free account? I work with developers and they will bring this into Angular or React and will want the htmls files as a zip.

[@Andsventure]

How do I change where the value comes from?

[@angeloseconomopoulos8918]

whenever I start a new project (blank site) I don't have the body its completely blank and I cant throw anything in there. Why it is not already there ? that's odd.. What should I do ?

[@goldenant9450]

classes are the bane of my webflow experience. You end up creating so many they become unusable and create clutter. I wanted to watch this tutorial bc i felt like i must have been doing something wrong, but then i saw you doing the same thing i do, making combo classes for one time use, "negative margin", "extreme negative margin" seems like there's no way around it. Eventually it'll be "negative margin [keyboard mashing]"

[@antonalexandrovich2728]

Love to the edit team 🥰

[@Webflow]

Ditto to you and our community!

[@nikkipapas2636]

Hi, I have been following this tutorial to create my front page and I just cant figure out why no matter the size in desktop mode the content is left justified. Any ideas as to why?

[@Webflow]

If you can, please post your question and a read-only link to your project over on our forums: discourse.webflow.com

[@flambergian]

Hello, at 2:50, I'm notified that I need to add hosting or upgrade my account. Does this mean I need to be at least on the Standard plan to be able to do this?

[@Webflow]

To upload images, you do not need to upgrade your account plan or site plan. If you are still getting this prompt, please contact our support team at support.webflow.com and they'll be able to help you with this.

[@gabrielfigueroa4886]

So when someone does "sign up" where does that information go to? What would be the best place to link it to?

[@Webflow]

If you're referring to signing up for this course, you'll just need to have a Webflow account. If you haven't yet signed up for Webflow, you can do so at webflow.com . Hope this helps 😀

[@gabrielfigueroa4886]

@@Webflow I’m talking about the “sign up” option in the Created website. Not for Webflow University. Sorry for the confusion

[@priyashkadu3985]

where can i find Figma file and other assets?

[@spookymv]

omg she is very beautiful 😍

[@simonhutchings6547]

Sara was right, it’s mobile in British, not moble!

[@rashman6691]

For the contact form, how do I design a floating label on webflow?

[@renditefuchs]

The comments of the woman are 100% fire

[@hasnainriaz708]

Can I get assets folder?

[@Webflow]

You can clone the project and download the assets here: university.webflow.com/courses/figma-to-webflow?video=sQnPzTohwfM

[@rukaiya8706]

39:22

[@user-ec1gw2th3f]

now i noticed that it's not a course of using figma to webflow plugin...

[@MrMattsMedia]

What was the point of designing in Figma only to rebuild everything again in Webflow? I thought you were going to import CSS from Figma or something like that and then add functionality to the design with Webflow.

[@corywatilo]

Agreed, and it took me 15 mins to realize 😫

[@Belisiario]

In the designing process we always begin by sketching, then building up from there > low fidelity > mid fidelity > high fidelity prototyping > development (of course there are several other steps we take into consideration when building a website in the "real world") but the way they tackled the construction process from figma to webflow were really spot-on

[@modisana]

Webflow is a development tool and is best for actual development/ deployment. Figma, Adobe XD and Sketch are for layout design and this is where you can try out different layout ideas. This was showcased in the first video. Designing in Webflow should generally be avoided especially on real-world projects where clients make changes.

[@robertocoladomenico5426]

Life is never easy

[@kirkgraham1]

Figma is for planning + layout design, Webflow is for development and actually bringing that design onto the web

[@yurgentartour]

What's the purpose of doing all your design on figma if you have to do it again in Webflow? I watched 6 episodes of this and was expecting some kind of a technique to simply transfer work done on Figma to Webflow... This is just doubling the amount of work...

[@takashi9749]

I just do my designs in webflow

[@dmitry9771]

pozorische...

[@Belisiario]

12:29

[@Belisiario]

1:16:11

[@Webflow]

Unitless line height is magic!!! ❤️

[@mrCetus]

Reda Izo

[@pratikrajsah]

My man has $1000 Apple Srand ._."

[@xiomaramorena8316]

this is too fast.

[@andynonimuss6298]

So, you basically just copied text from Figma? And you call this going from Figma to Webflow?