Figma to Wix Studio Responsive Website

My first stab ever at going from a Figma design to a fully responsive Wix Studio website. The actual process took me at least a day, but I condensed the most important parts into 1 hours and 45 minutes tutorial!
Figma design to a fully responsive Wix Studio website. Get access to the Figma file below and follow along with me!
00:00 Intro
01:10 Figma File
02:50 Wix Studio Intro
04:45 Site Foundations
10:20 Section Grids
17:44 Advanced CSS Grids
21:43 Responsive AI
23:13 Mobile Responsiveness
29:20 Content Inside Containers
01:03:38 Repeater Intro
01:19:41 Repeater Card Design
01:33:26 Repeater Grid Recap
01:36:58 Connecting CMS to Repeater
01:43:14 Entrance Animations
01:48:09 Outro
#wixstudio #figma #startup #websitedesign #webdesigner #nocode
------------------------------------------------------------------------------------------------
Files for this tutorial:
Figma File:
bit.ly/3ZI0C0L
Wix Studio Reference
sitesbyomar.wixstudio.io/buil...
------------------------------------------------------------------------------------------------
⭐ Check out Wix Studio
Sign up here for early access → www.wix.com/studio
Facebook: / wixstudio
Twitter: / wixstudio
Instagram: / wixstudio
TikTok: / wixstudio
KZread: / @wixstudio
------------------------------------------------------------------------------------------------
Check out these videos next:
Wix Studio: An Agency's Dream
• Wix Studio: An Agency'...
------------------------------------------------------------------------------------------------
Follow me here for more content:
📱 TIKTOK ‧ / buildwithomar
📷 INSTAGRAM ‧ / buildwithomar
🐦 TWITTER ‧ / buildwithomar
🌐 LINKEDIN ‧ / buildwithomar
------------------------------------------------------------------------------------------------
Startups I am currently building:
👉 www.Glorify.com - A VC-backed SaaS design tool startup
👉 www.Collabify.Design - A productized UI/UX service platform
👉 www.Blitzit.app - a personal productivity tool that keeps you in flow state

Пікірлер: 25

  • @Sable_Street_Studio
    @Sable_Street_Studio4 ай бұрын

    Howsit Omar! Loving all the content on your channel. Could you please release a vid on how you build the Framer version of this site 🙏🏼 I recently switched to Framer from Wix and would love to see the process of building this in Framer. Maybe release the working file if you are feeling kind 😅

  • @MrGuru2023
    @MrGuru20232 ай бұрын

    Thanks for this video bro you just earned Another Sub

  • @BuildwithOmar

    @BuildwithOmar

    2 ай бұрын

    Thanks my brother 🙏🏽

  • @theresarose9185
    @theresarose91853 ай бұрын

    Super nice video! Killin it! I got a question! I am a designer and worked with webflow in the past, which does not come naturally to me but I can do it. I am currently looking into framer or wix studio for my freelancing career. Would you say go with framer over webflow ? Or take wix studio due to the advanced business functionalities ? Never thought this could be so confusing . Thank you a lot for all your value l🙏

  • @ramplexpeace
    @ramplexpeace4 ай бұрын

    THIS GUY DESERVES A MILLION SUBS

  • @BuildwithOmar

    @BuildwithOmar

    4 ай бұрын

    Help me get em!

  • @princevasimalla
    @princevasimalla3 ай бұрын

    Hi Omar, great tutorial. I'm doing my personal portfolio in wix and I'm just starting out. I have exactly the same kind of layout you have at 'my stuff' section. I wanted to add those little buttons right under my works which represent categories of my works, for ex 3D, VFX, Graphic Design, UI UX design .... so viewers can click one of them, and the works get updated under that section without visiting another web page or link. I'm wondering how I can do that, is it possible by embedding any html/css code? If you are clearly aware of that effect, could you please help me with few words. Thanks!

  • @spiritmolecules
    @spiritmolecules7 ай бұрын

    Great video! Framer just seems like the better option to me, apart from Wix’s responsive auto layout function. But I’m sure Framer will be integrating that in the near future. Perhaps you could do a vid on Framer vs Wix Studio?

  • @pongkosray5170
    @pongkosray51705 ай бұрын

    Bro can you give me figma file i just practice perpase?

  • @BuildwithOmar

    @BuildwithOmar

    5 ай бұрын

    It’s in the description my friend

  • @user-zb7kl6sj4n
    @user-zb7kl6sj4n4 ай бұрын

    Really good tutorial but waaaaaaay too many ads throughout the video. Even if kept at 1 ad per section would be 15 ads and that would already be a lot, but it has so much more than that

  • @BuildwithOmar

    @BuildwithOmar

    4 ай бұрын

    Strange didn’t realize there were times of ads playing! Let me check my settings. Thanks! 🙏

  • @keigorjai01
    @keigorjai015 ай бұрын

    I am using Wix editor, totally different than Wix Studio. Wix Studio is more powerful

  • @BuildwithOmar

    @BuildwithOmar

    5 ай бұрын

    It is decent. Requires a few improvements here and there, but overall it’s super pro.

  • @keigorjai01

    @keigorjai01

    5 ай бұрын

    @@BuildwithOmar For example, we only work on 2 different dimensions, desktop and mobile. That's all. 🥲

  • @ayan251

    @ayan251

    5 ай бұрын

    I did not know the difference before my wix editor purchase and now I am frustrated with many options unavailable in this editor app. :( so sad how painstaking it is to create a website.

  • @fantomette5415
    @fantomette54155 ай бұрын

    Is this a promotional video? I'm just asking because I see many on KZread. Doesn't seem very genuine.

  • @BuildwithOmar

    @BuildwithOmar

    5 ай бұрын

    It was a genuine process showcase ;)

  • @fantomette5415

    @fantomette5415

    5 ай бұрын

    @@BuildwithOmar Thanks for your answer. There are so many videos for Wix on KZread and too many commercials, it really looks like they are paying these channels. Or is it that they have a great affiliate program? I wouldn't be suspicious if Wix was amazing but there are much better and less expensive products out there.

  • @BuildwithOmar

    @BuildwithOmar

    5 ай бұрын

    @@fantomette5415 Let's chat on Instagram DMs @buildwithomar

  • @mason158
    @mason1587 ай бұрын

    Promo-SM

  • @peterbond12
    @peterbond12Ай бұрын

    I disagree with you about the quality of Wix tutorials. They’re shockingly bad!

  • @mae2309
    @mae23098 ай бұрын

    So what happened to EditorX?. Did WIX killed it?

  • @poppingjaz

    @poppingjaz

    8 ай бұрын

    No, its just been renamed Wix Studio. Basically the same platform upgraded