Ever designed a full site in Figma and thought… “Cool, but how do I actually make this live?” 👀 In this tutorial, I’ll show you exactly how to bring your design to life in Framer — using the Figma to Framer Website plugin and just a few clicks. No code needed. I’ll also walk through key best practices to make sure your layout transfers smoothly, plus how to set up responsiveness and interactions.
Perfect for designers ready to turn their static mockups into real websites! #ad Watch now to see how simple it is to go from Figma to Framer!
#figmatoframer #webdesign #framer
0:00 welcome!
0:30 why I like Framer
2:35 client background
3:30 preparing Figma for export
6:00 Figma to Framer plugin
8:20 designing on Framer
12:40 button components
14:00 adding animations
16:00 the results!
16:45 thank you 🙂
Join the Patreon community here for weekly exclusive graphic design tutorials and to connect with other creatives!!!
use code: YOUTUBEFAM for 15% off: https://patreon.com/curatedcollectiveco
—————————————
// WHERE TO FIND ME //
join my community or take my courses:
https://curatedcollectiveco.com/
instagram:
https://www.instagram.com/meganweeksdesign/
pinterest:
online portfolio:
collaboration or business inquiries:
support@meganweeksdesignco.com
—————————————
// MY FREE GRAPHIC DESIGNER RESOURCES //
GET THE FREE WEBSITE DESIGN PROCESS GUIDE HERE:
https://view.flodesk.com/pages/6333c1377a59217f2325625c
PRE-WRITTEN EMAILS FOR YOUR GRAPHIC DESIGN BUSINESS:
https://view.flodesk.com/pages/6438202be83ecbda70778483
WEBSITE IN A WEEK PROCESS GUIDE:
https://view.flodesk.com/pages/64c0bb6ad206cffe61186544
BRAND DESIGN ROADMAP:
https://view.flodesk.com/pages/645bf9ca2efd35a7e39194b6
FREE LOGO DESIGN QUESTIONNAIRE:
https://view.flodesk.com/pages/63edbe7c8e06d4dae949448a
PROJECT MANAGEMENT WORKFLOW:
https://view.flodesk.com/pages/64aefc19e181ddda00ff25f5
HOW TO GO FROM HOURLY FREELANCER TO TRUSTED DESIGNER
GET MY FREE TRAINING VIDEO 💥
https://view.flodesk.com/pages/62f40298e5ea6b3d8aea4bf3
—————————————
// TAKE MY COURSES //
LOGO DESIGN: SIMPLIFIED
https://courses.curatedcollectiveco.com/courses/logo-design-simplified
DUBSADO DECODED: PROJECT MANAGEMENT
https://courses.curatedcollectiveco.com/courses/dubsado-decoded
GUIDE TO: LANDING GRAPHIC DESIGN CLIENTS
This course has 5 video led modules, a downloadable e-book and you will be able to join my community as well 💕
https://meganweeksdesignco.thinkific.com/courses/guide-to-landing-graphic-design-clients
✨ WordPress Website Design Course ✨
https://meganweeksdesignco.thinkific.com/courses/wordpress-website-design-course
✨ Custom Branding Process Course ✨
https://meganweeksdesignco.thinkific.com/courses/custom-branding-process/
NOW OFFERING BRAND + WEB DESIGN COURSES IN A BUNDLE 💥
https://meganweeksdesignco.thinkific.com/bundles/branding-and-wordpress-web-design
—————————————
// OTHER HELPFUL LINKS //
Join my email list for more helpful design tips:
https://view.flodesk.com/pages/61eed0f36114df05454c386a
LIKE MY EMAIL STYLE?! JOIN FLODESK FOR 50% OFF
https://app.flodesk.com/sign-up?ref=80647W
GET DUBSADO (my project management system):
https://www.dubsado.com/?c=meganweeks
SITEGROUND (my favorite website hosting for WordPress):
https://www.siteground.com/go/meganwdesignco
—————————————
*I do make a commission on some of the links in this description box. Thank you so much for the support.*
#graphicdesign #wixstudio #webdesign #websitedevelopment
