Stunning SaaS Website Design In Figma (2023)

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ม.ค. 2025

ความคิดเห็น • 152

  • @webprodigies
    @webprodigies  ปีที่แล้ว +27

    I saw a bunch of comments about icons not working. Unfortunately the previous icon pack was removed, but I updated the link with another pack that I personally feel is much better! the New video is coming out this week. Do yall want a sneak peek?😏

    • @pjborowiecki2577
      @pjborowiecki2577 ปีที่แล้ว +3

      When can we expect the dev part video to be released, give or take? Is it still on?

    • @webprodigies
      @webprodigies  ปีที่แล้ว +4

      Update new video coming out this week 🔥🙌🏼🙌🏼

  • @abdulrahmanhashem3426
    @abdulrahmanhashem3426 ปีที่แล้ว +5

    Suddenly TH-cam recommended your channel and WOW I found A great resource, Keep It

  • @madangopalpaul6534
    @madangopalpaul6534 ปีที่แล้ว +6

    Suddenly TH-cam recommended your channel and I HAVE NEVER BEEN HAPPIER with any recommendation sooo much! 😭❤️ bro u are amazing SUBSCRIBED!

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Lets goooo✌🏻❤️ thank you!

  • @akbarbadsha25
    @akbarbadsha25 ปีที่แล้ว +5

    Great tutorial for someone search for a scratch to end design. Very clear, not too much lengthy boring videos. Very clear. Thanks for sharing. Expecting more ❤😊

  • @red1.lb.
    @red1.lb. ปีที่แล้ว +6

    i was waiting for thiiiiisss !!!! thank youuu bro

  • @saberel_shafey4257
    @saberel_shafey4257 ปีที่แล้ว +1

    Super excited to the next VIDEO

  • @user-jj5kw6zt9g
    @user-jj5kw6zt9g ปีที่แล้ว +2

    Love the Vid Please keep em coming😀

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Big video is coming out today!!

    • @user-jj5kw6zt9g
      @user-jj5kw6zt9g ปีที่แล้ว +1

      @@webprodigies super 😍😍😍

  • @aloSolo
    @aloSolo ปีที่แล้ว +1

    Cant wait to see more videos, i enjoyed your explanations

  • @high4tech.
    @high4tech. ปีที่แล้ว +4

    Well, this tutorial will be helpful for beginners who are unaware of design systems and how UI are actually build in industry. Because most of the time beginners think we only have to build graphics and use case as a UI/UX designer which is a big lie. Appreciate your work, keep it up 👏

    • @webprodigies
      @webprodigies  ปีที่แล้ว +4

      Beginners can really find this video valuable because they now have an idea of what webdesign looks like. From here all you will be doing is iterating on the exact same principals we used in this video. In fact this is exactly what I do with my freelance projects. The only difference is it has an atomic structure which basically means components for everything! All the best❤️

  • @ikennagibson3933
    @ikennagibson3933 ปีที่แล้ว

    New Subscriber straight away, when you see a quality content from afar, you wouldn’t think twice before u consume it.

  • @jeffkirchoff14
    @jeffkirchoff14 ปีที่แล้ว +4

    Sir We want more UI Ux Videos on Every Modern Trends + Taking The design To Actual working website using Next js

  • @ZKHAX
    @ZKHAX 10 หลายเดือนก่อน

    Justtt neeeded thisss tqs alottt🤩🤩🤩🔥

  • @raku.aladdin
    @raku.aladdin ปีที่แล้ว +2

    keep posting this kind of video bro you gonaa blow up for sure.

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Thank you for this motivating comment ❤️

  • @by.machin
    @by.machin ปีที่แล้ว +1

    Excellent content bro! Keep making videos!

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Thank you! Hey! Posted the full video

  • @humairaattari3219
    @humairaattari3219 10 หลายเดือนก่อน

    Very Helpful!! love your content 🥰

  • @justkinggu
    @justkinggu ปีที่แล้ว +1

    14:00

  • @al75an
    @al75an ปีที่แล้ว

    AHHH Sir you're AWESOME!!! thank you so much for this tutorial please don't stop thank you so much!

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      I needed this thank you🔥🔥

  • @BUNNYBOSSCRYPTO
    @BUNNYBOSSCRYPTO ปีที่แล้ว +2

    Thank u brother

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      I gotchu brother❤️

    • @athulkumar23
      @athulkumar23 ปีที่แล้ว

      @@webprodigies icon link is 404 how to get icon

  • @clip_mafia
    @clip_mafia ปีที่แล้ว +4

    When is the next video coming out? Super hype for it! Nobody has ever actually created a Figma design and turned it into a working SaaS company!

  • @hi_huytran
    @hi_huytran 9 หลายเดือนก่อน

    Good stuff brother, this was invaluable knowledge and practice here. I'm sure there's a ton more to learn about Figma but this already has me feeling like an expert with components and toggles! Thank you 🤙🏾

  • @theunfairadvantageseries2071
    @theunfairadvantageseries2071 ปีที่แล้ว +1

    Finally! It's here.

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Sorry for the delay guys! The IG started popping off had to settle things down😂❤️

  • @versavids_28_06
    @versavids_28_06 8 หลายเดือนก่อน

    This tutorial is really helpful. Learnt so many new things from this single video.

  • @anonymous4u778
    @anonymous4u778 ปีที่แล้ว +2

    bro cmon drop the another video soon m waiting and i really loved ur video

  • @karimmorsy6706
    @karimmorsy6706 3 หลายเดือนก่อน

    the best figma tutorial, I've stumbled across so far

  • @acrxss
    @acrxss 11 หลายเดือนก่อน +1

    I enjoyed your teaching, really wished there weren’t cuts because it left me confused, especially the drop-down part didn’t work for me, I’ll watch other videos to get it right but apart from that, it’s a great video, choosing my own colors and applying my concept to it helped me create my own design

  • @Abdellah-k-rf9dy
    @Abdellah-k-rf9dy 11 หลายเดือนก่อน

    You're wonderful man and professional

  • @markus_dev_cwb
    @markus_dev_cwb ปีที่แล้ว

    Amazing tutorial! Tks to share.

  • @Clytax
    @Clytax ปีที่แล้ว +2

    All this knowledge for free? Thank you so much!

    • @YinkaBabalola-ru6zd
      @YinkaBabalola-ru6zd 2 หลายเดือนก่อน +1

      Honestly. I was really impressed as well

  • @supremeaustin3724
    @supremeaustin3724 ปีที่แล้ว +2

    Being a biggie I don't know how to do the UI system styling thank you for guiding me, SUBBED 👍✨

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Way to go! And thank you really appreciate it ❤️

  • @pranavprasannan1284
    @pranavprasannan1284 11 หลายเดือนก่อน

    Awesome video ❤

  • @kento_10
    @kento_10 3 หลายเดือนก่อน +1

    Great tutorial! I will save time for tomorrow: 33:58

  • @bersuarez2741
    @bersuarez2741 6 หลายเดือนก่อน +1

    great !!
    next use a 16px grid to fit the content in the frame or not

  • @RaufunNur
    @RaufunNur ปีที่แล้ว

    stunning 💫 most recommended 💯

  • @Omar-i5i7i
    @Omar-i5i7i ปีที่แล้ว

    thank you for your giving such an incredible work.

  • @dramaqueen8053
    @dramaqueen8053 ปีที่แล้ว

    awesome tutorial 😍

  • @sakibtamboli4685
    @sakibtamboli4685 8 หลายเดือนก่อน

    your content is sooo good

  • @miralsalah297
    @miralsalah297 ปีที่แล้ว +1

    Wow💫💫, your video showcases a real-world application of a whole UI course - it's truly impressive! Your skills are amazing, and I'm confident that your channel will soar🚀 because your content is top-notch, and your explanations are incredibly clear. you are making my dreams come true by demonstrating UI design and development together with NEXT js. You're like a TH-cam gem; keep up the fantastic work. I'm thrilled to be one of the first to discover your channel!⚡

  • @Emuniac
    @Emuniac ปีที่แล้ว +1

    Haven't watched it yet, but I am extremely excited to do so when Im free

  • @Cybertoon-v
    @Cybertoon-v ปีที่แล้ว

    man i was waiting for video for quite sometime

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      I say for 5 hours straight and made this video for yall 😂 you can literally see it go from day to night lol. Super happy yall find it valuable ❤️

    • @Cybertoon-v
      @Cybertoon-v ปีที่แล้ว

      @@webprodigies thanks man you are a saver hey can you tell me like how to publish them or something. i wanna create my personal web and would appreciate any suggestion

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      @@Cybertoon-v of course! My suggestion is to share the view only files with your clients to see your figma designs. If you want to post as a website but you have 0 knowledge in webdevelopment learn about figma to webflow. Its is a plugin where you can copy and paste designs into a full working website. And its also responsive. I posted a video on my IG @webprodigies if you want to see how to do it.

  • @Bigbabysharr
    @Bigbabysharr หลายเดือนก่อน

    Hi, I really enjoyed this video, I hope you could make more like this.

  • @ЭльдиярМаратов-щ1е
    @ЭльдиярМаратов-щ1е ปีที่แล้ว

    Wooooow its gonna be one of my favority Ui/Ux Teacher

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      You’re hyping me up right now!!!!! 🫣

  • @Prince_k-7
    @Prince_k-7 6 หลายเดือนก่อน

    Design system are made awesome

  • @Diego_Cabrera
    @Diego_Cabrera ปีที่แล้ว

    Amazing video man! I'm literally in the works of a video covering how to take a figma styleguide into tailwind CSS because there is literally no videos on this topic.

  • @kteach120
    @kteach120 ปีที่แล้ว

    Insane❤.just subs in 1 minutes

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Woow thats my new record!!

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว

    Hey man thanks.

  • @Execution_matters
    @Execution_matters ปีที่แล้ว

    Amazing

  • @hnquran1002
    @hnquran1002 ปีที่แล้ว

    Thank you

  • @allanponce2084
    @allanponce2084 ปีที่แล้ว +4

    The link of the icons doesn't work. What is the name of the pack so I can search?

  • @codeblockdev
    @codeblockdev ปีที่แล้ว

    SUBSCRIBED❤😎

  • @sooflight
    @sooflight ปีที่แล้ว +1

    Let's goooooo!

  • @ibouniang4957
    @ibouniang4957 ปีที่แล้ว +1

    hello Nice tutorial.
    Please can you provide again the link of icons you're using in this video

  • @graphicemphire5406
    @graphicemphire5406 ปีที่แล้ว +1

    Need more, please

  • @IgnacioTalvi
    @IgnacioTalvi ปีที่แล้ว +1

    hey bro! awesome video. Could you make the same process but for an app? thanks

  • @avishekdas4947
    @avishekdas4947 ปีที่แล้ว

    Waiting for next part.....love from india💜

    • @AK_B2B
      @AK_B2B ปีที่แล้ว +1

      Hey man, can I pay you to make this for me?

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Hey! Posted the full video

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      reach out to my ig @webprodigies

  • @pranthashil9060
    @pranthashil9060 ปีที่แล้ว +1

    Link of the icons is showing error. Would you please check, sir?

  • @ujjwaljaiswal2143
    @ujjwaljaiswal2143 ปีที่แล้ว +2

    cannot acces link to icons and assets ... its showing 404 not found

  • @runadeyin
    @runadeyin ปีที่แล้ว +1

    Thanks. Could you please upload this figma file to check and try

  • @Epirium
    @Epirium 7 หลายเดือนก่อน

    please make more videos designing landing page for AI Agency website

  • @tubvideo8611
    @tubvideo8611 2 หลายเดือนก่อน

    is very nice ; max follow for him 💥💥💥💥

  • @muizzahkhan4042
    @muizzahkhan4042 ปีที่แล้ว

    Great work! Can that same design be used as a prototype and make everything that you made here look like a flow?

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Yes, absolutely. But ofcourse you would need to setup those prototype views but yes!

  • @murtazabhaila8435
    @murtazabhaila8435 7 หลายเดือนก่อน

    I am a beginner, I don't know what to do and where to start in Figma It is advantageous for me... Thank you

  • @STOIC-w7j
    @STOIC-w7j 4 หลายเดือนก่อน

    Great video to learn visual aesthetics and glass morphism, just loved it!
    But I think you messed up in font sizes especially in desktop h4 , h5 and paragraph. Please see to it and let us know the actual size of fonts .

  • @lophixarts
    @lophixarts ปีที่แล้ว

    Hi bro, would you recommend the new Angular 17 or use standard next.js?

  • @kazim6957
    @kazim6957 ปีที่แล้ว

    great video, one more thing can you tell me, is there any website or tool where we can find the perfect typography scal for our project

  • @TofuTheLhasa
    @TofuTheLhasa 9 หลายเดือนก่อน

    Some parts of the video it cut and i couldn't create the dropdown menu. if its a action driven content why'd you cut down the video???? everything is great I understood How to use auto layout properly but the dropdown part is barely understandable

  • @WorkforceSystems
    @WorkforceSystems 3 วันที่ผ่านมา

    I have an important question. If someone is a beginner, should he/she go with learning css or dive into figma?

  • @draylegend
    @draylegend ปีที่แล้ว

    ❤‍🔥❤‍🔥❤‍🔥

  • @TofuTheLhasa
    @TofuTheLhasa 9 หลายเดือนก่อน

    Hey! I got a question. Do we really need to resize everything with auto-layout method and not put it manually? Of course design system is essential. But just asking if we could do that or it might be a bigger problem in the future? TY in advance

  • @dpno
    @dpno 11 หลายเดือนก่อน

    How easy will it be if you want to update colours without going to spend much time to rename all layers ?

  • @kiattim2100
    @kiattim2100 10 หลายเดือนก่อน +1

    Wait huh!!? You knows how to design and know how to code a big project??!

  • @ikennagibson3933
    @ikennagibson3933 ปีที่แล้ว

    Please what shortcut did u use for the space between for the current figma update? I notice space between has been taken away

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Hey! Yes I myself noticed then when I was doing the tutorial. All you have to do is double click the center align button. (The one with alignment when you have an auto layout)

    • @ikennagibson3933
      @ikennagibson3933 ปีที่แล้ว

      @@webprodigies thanks! I had already figured it out. I appreciate😊 can’t wait for your next videos. Please I am eager to see videos on how you approach your problems (step by step process) and also how you take inspirations from other sources to create your own unique design🙏🏻 well done friend 😇

  • @seniordotdev
    @seniordotdev ปีที่แล้ว +1

    Where is figma link

  • @SehrishMoujahid
    @SehrishMoujahid ปีที่แล้ว +1

    figma Link to Icons is not working

  • @TheFunnyLlama
    @TheFunnyLlama ปีที่แล้ว

    When is the next video coming out?

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Hey bro! Thanks for being patient with me. Its coming out this week lets gooo🙌🏼❤️

    • @TheFunnyLlama
      @TheFunnyLlama ปีที่แล้ว +1

      @@webprodigies of course. I'm excited

  • @spsanimatix
    @spsanimatix ปีที่แล้ว

    Please next part.

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Hey! Posted the full video

  • @eleanor1111
    @eleanor1111 ปีที่แล้ว

    God bless you, doing this for free wow

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      Anytime more than happy to help out

  • @TeamFlux
    @TeamFlux 11 หลายเดือนก่อน

    At 59mins you're talking about the dropdowns and how the spacing should react when expanding and contracting the menu. However it is clear how that works. I've attempted a few times to get it working, but it doesn't quite work.

    • @acrxss
      @acrxss 11 หลายเดือนก่อน

      Right!!! Me too! It didn’t work after trying it a bunch of times

  • @gnaneshnayak8790
    @gnaneshnayak8790 หลายเดือนก่อน

    kindly update the icons pack im stuck what to do next or kindly figma design

  • @shivendrapawar9618
    @shivendrapawar9618 2 หลายเดือนก่อน

    color styles are not showing up for gradients and effects, is this a bug or have any solution?

  • @copaxchannel
    @copaxchannel 7 หลายเดือนก่อน

    how do we actually deploy this in the web?

  • @akaiisora5983
    @akaiisora5983 ปีที่แล้ว

    Come on bro when's the next video
    you're the best

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Hey! Posted the full video. ENJOY

  • @topperboi1642
    @topperboi1642 ปีที่แล้ว

    Hey man, When i tried creating the glassmorphic effect, after applying layer blur effect, The entire pricing card looks blurry including the text, How do i fix that? (and man thank you sooooooooo much for this amazing tutorial. Loved every second of it and hopefully we will see more juicy content in future)

    • @webprodigies
      @webprodigies  ปีที่แล้ว +3

      Hey thats because youre using layer blur. You want to use background blur only on the frame and now on all the elements too☺️

  • @Cybertoon-v
    @Cybertoon-v ปีที่แล้ว

    Hey, i got a question, you told to create instance for icon in order to change them easily but as soon as i try to change them through instance there size go back to there original state so not the whole icon can be seen and this is only happening in assest, not when i change them in components

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Hey! Found some answers for you. This is happening because nested instances keep their size upon swapping. There is no way to avoid this key mechanic. However, there is a workaround: the instance needs to have auto layout enabled with hug contents constraints. Unfortunately, if you want to keep this component manually resizable like without auto layout, you would also have to adjust its contents to fill container manually since fill container and hug contents are incompatible with each other. Or you can set it to fixed + fill container by default but then change it manually in nested instances to hug contents. Let me know if it did the job☺️

    • @Cybertoon-v
      @Cybertoon-v ปีที่แล้ว

      @@webprodigies it doesn't seems like working even after designing the whole think used both the hug with auto layout and and fixed fill but it still the same

    • @Cybertoon-v
      @Cybertoon-v ปีที่แล้ว

      can you also explain why we are having testimonies and other thing out of the frame
      Also thanks for creating such an awesome video will be waiting for another great content

    • @webprodigies
      @webprodigies  ปีที่แล้ว +1

      @@Cybertoon-v oh no! That was probably a mistake. Great catch. You can use the side bar and drag them into the frame.

  • @muhsin1506
    @muhsin1506 ปีที่แล้ว +1

    12:10

  • @ernestsdane3510
    @ernestsdane3510 11 หลายเดือนก่อน +2

    [ TLDR: not worth the watch ]
    The tutorial feels half-assed. Don't get me wrong, the idea is great, but the execution could use some work. It is really hard to follow along because of "this color", "click that" and the editing style does not help. There are a couple of instances where the video just cuts and there are no explanations of the colors used or anything for the missing step. You may be a good designer, but teaching skills leave much to be desired.

  • @zubairhanif6554
    @zubairhanif6554 ปีที่แล้ว

    Best of Best 🪄 Thanks! 👍

  • @jonice4229
    @jonice4229 ปีที่แล้ว

    any chance to get this figma file? thanks

  • @JasonHufalarPiano
    @JasonHufalarPiano ปีที่แล้ว

    Hey man, the figma link of icons is not found

  • @surajkunwar00
    @surajkunwar00 4 หลายเดือนก่อน

    Great Video man. I am facing a problem where i cannot properly put the navigation bar in the mobile frame. It's very close and cramped unlike yours. Any possible solution?

  • @seniordotdev
    @seniordotdev ปีที่แล้ว +1

    How I get figma link ?

  • @pedroota
    @pedroota 9 หลายเดือนก่อน

    Could you share the Figma Final URL?

  • @madhoundes
    @madhoundes ปีที่แล้ว

    Framer Templates Designer Will Love you

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Ohhh! Why so?

    • @playpiano2264
      @playpiano2264 ปีที่แล้ว +1

      Because a plugin with one click will be exported to framer and they can deploy it

  • @alihajavaid5654
    @alihajavaid5654 5 หลายเดือนก่อน

    This didn’t worked for me as the data wasn’t sent to google fields

  • @ritikdubey7102
    @ritikdubey7102 ปีที่แล้ว +1

    wohhhhhhhhhhhhhh

    • @webprodigies
      @webprodigies  ปีที่แล้ว

      Glad you found it valuable brother

  • @shivrajnag12
    @shivrajnag12 3 หลายเดือนก่อน

    Can someone please share a link to the same icon pack used in this video? Thanks

  • @sorendev
    @sorendev 3 หลายเดือนก่อน

    20:12

  • @gnaneshnayak8790
    @gnaneshnayak8790 หลายเดือนก่อน

    can any one share the figma design so i can copy paste the icons

  • @sorendev
    @sorendev 3 หลายเดือนก่อน

    31:07

  • @soniaghosh
    @soniaghosh 8 หลายเดือนก่อน

    Hi my name is sonia ghosh, i am a indian girl Show case studies of mobile apps like laundry apps, education apps, any of them

  • @athulkumar23
    @athulkumar23 ปีที่แล้ว

    color code is too light same color u said