Converting a Figma design to Webflow - My process

Process, tips, little cheats & working out interactive ideas in Webflow. I recently live streamed the whole process of converting a design in Figma to a build in Webflow, and this is the beginning of that process! The original stream was on my Twitch channel, which you can find the link for below. 🚀 CharliMarieTV is now powered by Figma! https://bit.ly/figma-charli Figma is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :) Please remember to click subscribe if you'd like to see more of my videos. Watch the whole process in the uncut streams here: https://youtube.com/playlist?list=PLiRtqMWCjd8L6nKo_0SvSiV8OecFHsR8X TIMESTAMPS: 00:00 Intro 00:36 First steps 02:18 Adding a style guide page 03:10 Using a flexbox (my fav) 03:49 Background & navigation 06:38 An interactive idea & fleshing it out 10:25 Tabs box (Instagram & Twitter) 13:21 Arranging insta/tweet examples 14:47 Containers & layout 15:50 Animation 16:42 CMS collection set up 17:28 Footer 18:50 Tidy up & video input 19:33 Overview ----------------------------------------------- // ENJOY MY VIDEOS? My videos don't have pre-roll ads because ads are annoying and I don't want you to have to sit through them. If you want to support me and my channel the best thing you can do is join my Patreon! You'll get extra content and ways to learn, like behind-the-scenes process info, downloadable assets and a patron-only podcast! Sign up here: https://ift.tt/2LM0Lsk ----------------------------------------------- // ABOUT ME Hello there! I'm Charli and I'm a half-British, half-kiwi web and graphic designer currently living in Valencia and posting design videos about tools, projects, and concepts as well as vlogs of my life as a designer. Please subscribe and say hi in the comments so we can be friends :) ----------------------------------------------- // MORE Buy my font: https://ift.tt/3lKtDnV My site & blog: https://charlimarie.com Design Life podcast: http://designlife.fm Inside Marketing Design podcast: https://ift.tt/3eNV6RX // SOCIAL Twitter: https://twitter.com/charliprangley Instagram: https://ift.tt/1PoUqkV Facebook: https://ift.tt/1ykd6uy Twitch: https://ift.tt/3q0s1c0 ----------------------------------------------- // MUSIC & TECH Music from Epidemic Sound. If you want to try it out, sign up using my link! https://ift.tt/3046HYM Intro & end card animation by hand lettering animator Austin Saylor: https://ift.tt/1OluqYJ Video editing by Nancy Palm: http://nancypalm.com/


View on YouTube.