Ridd
Ridd
  • 37
  • 254 744
How I design a website for a client (full behind-the-scenes)
This is a sneak peek of my process for designing a new website in Figma
If you like learning from me check out www.figma.academy
I also highly recommend checking out Genway. You can use this link to get 2 months free - join.dive.club/genway
#figmadesign #productdesign
🎨 Ready to become a better product designer? 👉 www.figma.academy
🐦 Discover more design deep dives on Twitter 👉 Ridderingand
Переглядів: 2 412

Відео

How Framer created the glow effect on their new website using gradients and masks
Переглядів 893Місяць тому
This vide is a behind the scenes with the person who designed the latest Framer website. For the full video subscribe to Dive Club (ua-cam.com/video/exGuqU1RHT0/v-deo.html) #webdesign #framert #productdesign 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 Ridderingand
How to get in and out of your Figma files 10x faster using the Raycast Figma File Search extension
Переглядів 603Місяць тому
#figma #productdesign 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 Ridderingand
How to use bubble properties in Figma (free preview of Figma Academy)
Переглядів 1,1 тис.4 місяці тому
This is a free preview of a bonus video in Figma Academy. Join 5,000 designers from teams like Stripe, Shopify and Mercury and start learning advanced design tactics in Figma - www.figma.academy #figma #productdesign #components 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 ridd_design
Prototyping Crash Course - Learn how to create advanced prototypes with Figma variables in 30 min
Переглядів 11 тис.6 місяців тому
Learn how to create advanced Figma prototypes using variables. This is a free preview of www.figmaacademy.com/ ✌️ Get the Figma file here - www.figma.com/community/file/1357190686525301697/learn-advanced-prototyping-in-30-min We'll walk through each type of variable (color variables, number variables, boolean variables, and string variables). And show you how you can update components in Figma ...
Figma Academy 2024 - Learn advanced design tactics and become the Figma guru on your team
Переглядів 3,4 тис.9 місяців тому
Learn Figma variables, advanced Figma prototyping, developer handoff tactics, design system strategies, how to speed up your design process, and more! Figma Academy is where Stripe, Shopify and the top teams in tech have sent 4,000 designers to learn advanced design tactics directly in Figma 💪 #figma #figmatutorial #figmavariables 🎨 Ready to become a better product designer? 👉 www.figma.academy...
The ultimate guide to prototyping with variables in Figma
Переглядів 2,8 тис.10 місяців тому
Learn how to prototype with variables in Figma, how to bind variables to components, and how to prototype more efficiently. This is a free preview of Figma Academy (figma.academy) - where teams like Stripe, Shopify, and Microsoft send 4,000 designers to learn advanced design tactics directly in Figma 💪 #figma #figmatutorial #figmavariables 🎨 Ready to become a better product designer? 👉 www.figm...
How to alias variables in Figma design systems (and when you shouldn't!)
Переглядів 2,7 тис.11 місяців тому
Creating alias variables in Figma is a powerful technique for your design system. But if you're not careful you can create a design system that's a pain to use 😬 #figma #productdesign #designsystems #figmatips 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 Ridderingand
Figma Academy Curriculum Overview
Переглядів 2,4 тис.Рік тому
#figma #productdesign 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 Ridderingand
Creating Lottie animations in Figma
Переглядів 44 тис.Рік тому
Learn how to create production-ready micro animations in Figma that you can export as Lottie animations #figma #productdesign 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover more design deep dives on Twitter 👉 Ridderingand
How to improve your portfolio: The differences between junior, mid-level, and senior designers
Переглядів 14 тис.Рік тому
#figma #productdesign In this video I dissect three different design portfolios-one from a junior, one from a mid level, and one from a senior product designer. We talk about ways you can improve your visual design and storytelling and also identify some specific tactics that you can use to take your portfolio to the next level. Portfolio 1: thuydesigns.myportfolio.com/ Portfolio 2: princemirxc...
How to build websites in Framer using AI ✨
Переглядів 5 тис.Рік тому
Framer now lets you design websites with AI! I got beta access so I wanted to learn how to build a website in Framer with AI ✨ This video walks you through 5 different sites that I was able to prompt engineer. The feature set is still early but I had a blast playing with it and I'm super excited about how AI is going to impact design tooling in the future ✌️ #framer #productdesign 🎨 Ready to be...
How to design with REAL data in Figma
Переглядів 15 тис.Рік тому
Learn how to 10x your Figma workflow by using the Kernel Figma plugin to design with real data 💪 This is an awesome way for product designers to work more efficiently in Figma and get closer to engineering. Download the free Figma plugin here - usekernel.com #figma #figmatips #figmatutorial #figmaplugins #productdesign 🎨 Ready to become a better product designer? 👉 www.figma.academy 🐦 Discover ...
Designing the new Dive website in Figma + Framer
Переглядів 25 тис.Рік тому
Designing the new Dive website in Figma Framer
4 Strategies for the New Component Props Beta
Переглядів 2,7 тис.Рік тому
4 Strategies for the New Component Props Beta
Iterate 2x faster in Figma
Переглядів 2,9 тис.2 роки тому
Iterate 2x faster in Figma
Subscribe for deep dives about product design
Переглядів 1,7 тис.2 роки тому
Subscribe for deep dives about product design
How to create the ultimate design swipe file in Notion
Переглядів 9 тис.2 роки тому
How to create the ultimate design swipe file in Notion
Building forms in Figma with component properties
Переглядів 7 тис.2 роки тому
Building forms in Figma with component properties
Best practices for component properties - Figma Academy
Переглядів 6 тис.2 роки тому
Best practices for component properties - Figma Academy
Building Figma Academy with .base components
Переглядів 2 тис.2 роки тому
Building Figma Academy with .base components
How to prototype more quickly in Figma
Переглядів 7 тис.2 роки тому
How to prototype more quickly in Figma
How to design at different breakpoints
Переглядів 2,4 тис.2 роки тому
How to design at different breakpoints
Introducing the Designer Talent Network
Переглядів 4012 роки тому
Introducing the Designer Talent Network
Save time in Figma using the Master plugin
Переглядів 3,7 тис.2 роки тому
Save time in Figma using the Master plugin
The Power of Template Components in Figma
Переглядів 13 тис.2 роки тому
The Power of Template Components in Figma
How to create scrolling gradients in Figma + Webflow
Переглядів 5 тис.2 роки тому
How to create scrolling gradients in Figma Webflow
Figma Academy demo video
Переглядів 4,5 тис.2 роки тому
Figma Academy demo video
How to use an IconWrapper in Figma
Переглядів 15 тис.2 роки тому
How to use an IconWrapper in Figma
How to animate a "toast" component in Figma using interactive components
Переглядів 5 тис.2 роки тому
How to animate a "toast" component in Figma using interactive components

КОМЕНТАРІ

  • @stephenyankey
    @stephenyankey 6 днів тому

    The best video I've watched so far on variables. I never understood how it works untill now. Thanks 👍🏽

    • @ridd
      @ridd 4 дні тому

      Glad it helped!

  • @megaroeny
    @megaroeny 8 днів тому

    2:40 such a good tip and I do this too, especially with iconography design. Now with Figma's built-in "Split view" it makes it really easy. Otherwise, the classic way is File -> New Window. 3:56 💯 agree - so many designers I've worked with struggle to think/work this way though.

  • @viraj24_
    @viraj24_ 8 днів тому

    There needs to be a part 2 of this now @ridd

  • @amer4716
    @amer4716 11 днів тому

    thanks for the video, very informative

  • @mehugtree
    @mehugtree 16 днів тому

    Good stuff! Just what I needed to help be build a progress bar of my own. Thanks!

  • @azharhabeebmohameds7920
    @azharhabeebmohameds7920 22 дні тому

    Love it! This approach certainly avoids bias during feedbacks session. Thanks for sharing & cheers!

  • @juliaweber986
    @juliaweber986 23 дні тому

    Is the course updated to UI3? What if I purchase the self paced video course - can I pay more to join the cohort?

  • @uxwithanas
    @uxwithanas 25 днів тому

    That cover idea is just so good, Years of Figma and this has never crossed my mind but after seeing this it feels like the best solution tbh ❤

    • @ridd
      @ridd 24 дні тому

      ya tbh I'm also surprised I didn't think of it earlier

  • @videomsumoviemsi
    @videomsumoviemsi 25 днів тому

    Great video excep the statement "we cannot do "literally" anything..."

  • @UXClicks
    @UXClicks 26 днів тому

    Would you like to share that file?

  • @ZooTube_Animia
    @ZooTube_Animia 27 днів тому

    As a Junior Designer I wanna ask you a question about the graphics in the Website design . I struggle alot with the Graphic design .How you design the graphic in the design which is related to the website copy? Pleasedo answer me

  • @Atractiondj
    @Atractiondj 27 днів тому

    This works only for outline icons but doesn't work for stroke icons!

  • @annafilou
    @annafilou 28 днів тому

    Very interesting to see another person’s process in Figma! Great idea for presenting your work! You can even see your “speaker notes” on the cover. I’ll be trying this

    • @ridd
      @ridd 28 днів тому

      ya they are kinda like speaker notes 😅

  • @SatyamBarnwal090
    @SatyamBarnwal090 28 днів тому

    One of the coolest mini project I made using Variables. Amazing, thanks Ridd

    • @ridd
      @ridd 28 днів тому

      you're most welcome 🙏

  • @nuzairibrahim7522
    @nuzairibrahim7522 29 днів тому

    That's fantastic! I was truly impressed by the way you delved into the intricacies of designing a top-notch UI.

  • @4Mulator
    @4Mulator 29 днів тому

    Loved the walkthrough! Totally borrowing that. Appreciate you sharing it!

    • @ridd
      @ridd 29 днів тому

      Glad it was helpful!

  • @MassambaGAYE
    @MassambaGAYE 29 днів тому

    Those text blocks/sections are great ways to explain choices.. Great way to tell Stories. Love from Dakar/Senegal 🇸🇳

    • @ridd
      @ridd 29 днів тому

      🫶

  • @BrendanMKav
    @BrendanMKav 29 днів тому

    love the cover componet idea, very clean way to give a walkthrough without needing to make an entirely new presentation.

    • @ridd
      @ridd 29 днів тому

      exactly!

  • @shahariarratul6988
    @shahariarratul6988 29 днів тому

    Hey Ridd, I like your videos. I watch almost all of your dive club podcasts and really appreciate it. I liked the process too. Keep doing the good work.

    • @ridd
      @ridd 29 днів тому

      means a lot 🫶

  • @GaryDid
    @GaryDid 29 днів тому

    So good! I love seeing the thinking behind the thinking! Would you be able to share your nation database link? I love how you have that set up.

    • @ridd
      @ridd 29 днів тому

      someday I will clean it up and share :)

    • @et9564
      @et9564 29 днів тому

      @@riddwould love to see that as well!😊

    • @Designer-Mindset
      @Designer-Mindset 24 дні тому

      @@ridd cool, please let us know whenever you shared it!

  • @Sockertuppen
    @Sockertuppen 29 днів тому

    My process is almost identical but the reveal sections walkthrough is a new one. Thanks!

    • @ridd
      @ridd 29 днів тому

      was a new one for me too 😅

  • @MaxWeir
    @MaxWeir 29 днів тому

    Workflow amazing, Click to reveal clever, Spinning globe effect mind blowing

    • @ridd
      @ridd 29 днів тому

      that was my shower idea from earlier in the week 😅

  • @timzyvibez2649
    @timzyvibez2649 29 днів тому

    Insightful 😊 Thanks Ridd

    • @ridd
      @ridd 29 днів тому

      Glad you enjoyed it!

  • @dave3k
    @dave3k 29 днів тому

    Love this, I’m gonna use the walkthrough idea 😊

    • @ridd
      @ridd 29 днів тому

      hope it helps!

  • @TheNaramo
    @TheNaramo Місяць тому

    Awesome! This is almost what I was looking for :D I tried setting this up with icons that are still strokes and not outlines and then resizing of the icons doesn't work properly, as in the stroke thickness won't adjust properly. Do you have a tip on how to solve that besides creating outlines?

  • @soy.pauvolk
    @soy.pauvolk Місяць тому

    This is the best Figma tutorial I have ever followed! Thank you so much for the clarity and all the knowledge you share with us here. I learned a lot from you today.

    • @ridd
      @ridd Місяць тому

      So glad to hear it :) This is definitely one of my favorite topics. We just did a 90 min workshop last week in the cohort and I always hit end on Zoom feeling like I can run through a wall lol

  • @cp3onmtv963
    @cp3onmtv963 Місяць тому

    This video is indispensable. Thank you!

    • @ridd
      @ridd Місяць тому

      Glad it was helpful!

  • @nested9301
    @nested9301 Місяць тому

    After effect animations are god level , what you show here is nothing

  • @haneenelazab1220
    @haneenelazab1220 Місяць тому

    This is really brilliant! I hit my subscribe button just based on this video. You did an outstanding job explaining every little detail without boring stuff or adding extra non-essential fills. Thank you! Keep up the good work

    • @ridd
      @ridd Місяць тому

      Glad it was helpful! Lots of practice in Figma Academy live sessions 😅

  • @virmanisandeep
    @virmanisandeep Місяць тому

    Thanks @Ridd this is an awesome deep dive crash course to learn Variables - Which covers when to use Bollean, Strings, Numbers and Haha Colors ! Also focuses on how to arrange and binds your variables sections to get whats needed! I am just reviewing the concepts again and again and getting better at Fundamentals ! Best Listening and Understanding comes at 0.75 speed. Sorry @Ridd but that my learing speed!

  • @Searly
    @Searly Місяць тому

    That's amazing man! I just got started with framer this week and found this now. Love it

  • @tomashudolin7197
    @tomashudolin7197 Місяць тому

    Thank you for your tutorial. I tried my own animation with smart animate and bounce type of animation and this kind of animation isn't possible to export to Lottie. Or am I wrong?

  • @CarlosAndresVelasquez
    @CarlosAndresVelasquez Місяць тому

    Can I sign up for the next round of reviews? 🙏🙏

  • @dejunco
    @dejunco Місяць тому

    I've used the Raycast extension since it's early publish (back when the results were in a list instead of card view -- a change I think was a bit of a regression). It's great but ever since Figma added a search on the new file tab, it's not particularly that much faster (i.e. cmd/ctrl + t, type, enter). Good video nonetheless.

  • @Jen-ec6mj
    @Jen-ec6mj 2 місяці тому

    This is awesome! Thank you so much, I struggled a lot when switching between prototypes for different views.

  • @troychurch4055
    @troychurch4055 2 місяці тому

    Really outstanding instruction @Ridd. Bravo. Thank you!

  • @hroman_codes
    @hroman_codes 2 місяці тому

    This was super helpful especially that checklist thank you 🤝

  • @VasylynaHushevska
    @VasylynaHushevska 2 місяці тому

    Hi Ridd! I'm Vasylyna. I wanted to contact you with a collaboration opportunity that aligns perfectly with your UA-cam channel. What email can I write to you?

  • @aoifegrimesmctavish366
    @aoifegrimesmctavish366 2 місяці тому

    Super helpful video, thank you. I’m just starting out in UX and UI design. It’s really nice to see a very detailed run through of the ways to make a strong portfolio. 😊

  • @aurelienfoutoyet5699
    @aurelienfoutoyet5699 3 місяці тому

    Thank you very much !

  • @tonyK_72
    @tonyK_72 3 місяці тому

    wonderful video. Really cemented the concepts of variables. Great work. Thank you.

  • @naxun1199
    @naxun1199 3 місяці тому

    Thank you for sharing! I would like to have the Figma source file of “Try Boolean Candle” for study. Is it possible?

  • @MaxWeir
    @MaxWeir 4 місяці тому

    Great tip, its good to plan ahead in terms of "consumption" like you mentioned, I wonder if Figma should add a subtle divider to visually separate each group when the components properties becomes similar to the last example you showcased.

    • @ridd
      @ridd 4 місяці тому

      definitely agree they could do a bit more here to visualize the relation

  • @AlicePackard
    @AlicePackard 4 місяці тому

    This is such an important topic!! And a great demonstration of how bundling different icons together as variants makes an objectively worse experience (always keep those guys as separate components!): - Having to select an icon by name alone VS getting a visual preview (offered by the instance swap menu) hurts discoverability. - The droplist of variants has no search input (unlike the instance swap panel) - You can't "escape" to another library or area of the file if you're trying to grab an icon that lives elsewhere - You can't set up preferred selections Great preview of the quality Figma Academy provides 🔥 thank you Ridd!

    • @ridd
      @ridd 4 місяці тому

      You know this product well :)

    • @AlicePackard
      @AlicePackard 4 місяці тому

      I have you to thank! I should tally how many of your threads occupy my bookmarks.

  • @VasylynaHushevska
    @VasylynaHushevska 4 місяці тому

    Hi Ridd! I'm Vasylyna. I wanted to contact you with a collaboration opportunity that aligns perfectly with your UA-cam channel. Do you have an email?

  • @EvelynArianiEscalante
    @EvelynArianiEscalante 4 місяці тому

    Hello, when I make an animation in frames in figma, it contains the pulse and a hand simulating a touch screen. But when I want to export by lottie I only see the pulse animation and not the hand, does anyone know why that could be?

  • @SanneWijbenga
    @SanneWijbenga 4 місяці тому

    Life-saver thx! 🚀

  • @kumehouse
    @kumehouse 4 місяці тому

    Cool but very expensive ://