Designer Mindset
Designer Mindset
  • Видео 21
  • Просмотров 37 305
Let's recreate a popular Dribbble shot! | Design with me
Hello Friends,
let's recreate a mobile app for smart home, a very cool Dribbble shot together!
Feel free to write your feedback in the comments down below.
0:0-2:45 Wireframe
2:24-10:10 UI Design page 1
10:10-15:20 UI Design page 2
15:20-16:20 Final touchs
Dribbble shot: dribbble.com/shots/19287726-Smart-Home-App
Iconly, Icon set: www.figma.com/community/file/876509330914541878
*****
🔥 Please subscribe to our channel, it's FREE! 😄
👍 Please Like and comment on this video, and help us to grow in the RUclips
---------------------
🤝 Let's be friends!
Mohammad Sharifi
Dribbble: dribbble.com/mmdsharifi
LinkedIn: www.linkedin.com/in/mmdsharifi
website: mohammadsharifi.com
Sahar Rezazadeh
Dribbble: dribbble.com/...
Просмотров: 375

Видео

Glass Card effect in Figma
Просмотров 1392 года назад
🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on this video, and help us to grow in RUclips 🤝 Let's be friends! Mohammad Sharifi Dribbble: dribbble.com/mmdsharifi LinkedIn: www.linkedin.com/in/mmdsharifi website: mohammadsharifi.com Sahar Rezazadeh Dribbble: dribbble.com/saharrrzz LinkedIn: www.linkedin.com/in/saharrrzz website: saharrrzz.github.io/portfolio Have fun ...
🦄 Animated Mesh Gradient with Figma | speed design
Просмотров 2,8 тыс.2 года назад
Design an animated mesh gradient for your next project super fast! Duplicate Figma File: www.figma.com/community/file/1081478322955059639 Plugins we used in the video: Blob: www.figma.com/community/plugin/739208439270091369/Blobs Cool Hue: www.figma.com/community/plugin/807561639084281386/CoolHue Gradient-Color-Palette 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on ...
🎵 Animated Play Button | Figma Smart animation | Speed Design
Просмотров 3,5 тыс.2 года назад
Hey Friends, This is a cool tutorial for creating interactive play/pause button. Subscribe to the channel for upcoming amazing animation tutorials. 😍 FREE FIGMA COURSE FOR 2022: ruclips.net/p/PL2RsglWFM6889iIDclg-To382essg8HYE chapters: 0:00 DEMO 0:12 Creating interactive component 1:11 Prototype presentation 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on this video...
🌈 Animated text gradient | Figma mask animation | Speed Design
Просмотров 2,4 тыс.2 года назад
Learn how to create smooth gradient animation with mask in Figma! 🤩 Do you want to learn more about mask tutorials check out our best one! ruclips.net/video/Elbslz3RSUo/видео.html Duplicate this file: www.figma.com/community/file/1075357272209076258/🌈-Animated-text-gradient-|-Figma-mask-animation-|-Speed-Design 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on this vid...
Figma Interactive component animation tutorial | prototyping Spotify app
Просмотров 9082 года назад
Hey Friends, We're back with very cool animation or micro-interaction with interactive components in Figma. We bring life into our Spotify app so you can play and pause music. subscribe to the channel for upcoming amazing animation tutorials. 😍 FREE FIGMA COURSE FOR 2022: ruclips.net/p/PL2RsglWFM6889iIDclg-To382essg8HYE 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on...
Figma Micro interaction / animation tutorial
Просмотров 1,9 тыс.3 года назад
Do you like designing cool micro-interaction / animation with Figma? watch this video until the end! we'll surprise you :) IBM Plex Mono Font: fonts.google.com/specimen/IBM Plex Mono 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on this video, and help us to grow in RUclips 🤝 Let's be friends! Mohammad Sharifi Dribbble: dribbble.com/mmdsharifi LinkedIn: www.linkedin.c...
Figma tutorial | mask animation 🌓 | Micro interaction
Просмотров 12 тыс.3 года назад
Let's create an animated dark/light theme switch right inside Figma and have fun with the smart animate! you can duplicate this file and do it for yourself! check out this coll micro interaction file: 🔗 www.figma.com/community/file/1024004634147979851 🏀 Dribbble shot: dribbble.com/shots/16526529-Animated-theme-switch 😍 Learn Figma for free: ruclips.net/video/sDW4lsTnC74/видео.html 🔥 Please subs...
Smart Animate | Figma Prototyping with Spotify app | part 2
Просмотров 5263 года назад
Hey friends In this video we'll talk about smart animation in Figma, We will learn to create interactive and impressive prototypes with Figma. Let's bring life to our Spotify Mobile application. please give your feedback in the comments! chapters: 0:00 DEMO 0:47 Intro 3:06 What's is smart animate 8:28 animate Spotify app 10:04 Request for Interactive components Request for interactive component...
Simple Prototype | Figma Prototyping with Spotify app | part 1
Просмотров 6953 года назад
Hey friends This is the first session of prototyping in Figma. We will learn to create the first and simple prototype of the Spotify Mobile application. please give your feedback in the comments! chapters: 0:00 DEMO 0:57 Basics of prototypes 1:49 Create a simple prototype of the Spotify App 4:21 Sharing prototypes in Figma 🔗 Link to Figma project: www.figma.com/file/p1adZHomdA... Check out our ...
Animated theme switch
Просмотров 2603 года назад
New video uploaded, check it out here 😍💜 ruclips.net/video/OQaDyex5mGA/видео.html
Figma Mask Animation | Speed Design
Просмотров 8 тыс.3 года назад
Hey, friends! we just start to work on the new playlist to learn more about prototyping in Figma! if you like make to create a tutorial to describe this video in detail please like this video and tell us in the comments down below! 🔗 Link to Figma project: www.figma.com/community/file/1024004634147979851 🔥 Please subscribe to our channel it's FREE! 😄 👍 Please Like and comment on this video, and...
Figma for Dummies! Design Spotify app | part 7/7: Icon set
Просмотров 3093 года назад
Figma for Dummies! Design Spotify app | part 7/7: Icon set
Figma for Dummies! Design Spotify app | part 6: Constraints
Просмотров 3783 года назад
Figma for Dummies! Design Spotify app | part 6: Constraints
Figma for Dummies! Design Spotify app | part 5: Auto layout
Просмотров 4893 года назад
Figma for Dummies! Design Spotify app | part 5: Auto layout
Figma for Dummies! Design Spotify app | part4: Effects
Просмотров 3043 года назад
Figma for Dummies! Design Spotify app | part4: Effects
Figma for Dummies! Design Spotify app | part 3: Components
Просмотров 4273 года назад
Figma for Dummies! Design Spotify app | part 3: Components
Figma for Dummies! Design Spotify app | part 2: Wireframes
Просмотров 4223 года назад
Figma for Dummies! Design Spotify app | part 2: Wireframes
Figma for Dummies! Design Spotify app | part 1: Intro
Просмотров 5503 года назад
Figma for Dummies! Design Spotify app | part 1: Intro

Комментарии

  • @isagarofalo646
    @isagarofalo646 4 месяца назад

    how do you make it go slower?

  • @zarahsharda4432
    @zarahsharda4432 8 месяцев назад

    😊❤

  • @PixelCruxbyHarsh
    @PixelCruxbyHarsh Год назад

    thank you so much very helpful video

  • @PixelCruxbyHarsh
    @PixelCruxbyHarsh Год назад

    thank you so much very helpful video

  • @PixelCruxbyHarsh
    @PixelCruxbyHarsh Год назад

    thank you so much

  • @binaldalia9410
    @binaldalia9410 Год назад

    THANK YOU SO MUCH FOR THIS TUTORIAL THIS HELP ME MAKE MY PRESENTATION EASY AND TO PASS

  • @noname-fc3pv
    @noname-fc3pv 2 года назад

    this is what i need, thanks

  • @thejonaskuromada
    @thejonaskuromada 2 года назад

    Nice!

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thank you Jonas! Please share this video with your friends 😉💜

  • @rekan_98
    @rekan_98 2 года назад

    Almost spent 2 hours finally realized it only works for pictures the mask. thanks .

  • @dxm619
    @dxm619 2 года назад

    why you have put layer blur ... it's not working poroperly

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your comment, we want to blend colors and have mesh gradient. You can do it just with simple regular gradient.

  • @greglane4137
    @greglane4137 2 года назад

    pքɾօʍօʂʍ

  • @liljup52
    @liljup52 2 года назад

    Nice !

  • @ricard289
    @ricard289 2 года назад

    Super nice tutorial! Just one thing, Why when I click on play, it moves? Its like when I press click the whole "block" moves slightly to a position and as soon it is over it comes back to the initial position.Can you help me with that? Thanks a lot!! great tutorial!

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your energetic comment 💫🤩. First you should pay attention to the variants. Component variants have to be exactly the same in the terms of element's name or their position. Second check out the interactions details on video about the frames and their connections. You can share your file with us, we'd be happy to check your problem with more details 😊

  • @DineshKumar-gy5yh
    @DineshKumar-gy5yh 2 года назад

    i can't see the last part of this video bro

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your feedback 👍the problem is solved ✨

  • @Designer-Mindset
    @Designer-Mindset 2 года назад

    Don't miss this animation tutorial 🔥: ruclips.net/video/QGmQ__2Ztkw/видео.html

  • @koduruvenkatakalyan1226
    @koduruvenkatakalyan1226 2 года назад

    excellent do more bro

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your energetic comment 💜🔥Sure we'll keep doing more cool tutorials 💪😎

  • @leilamoheimani2235
    @leilamoheimani2235 2 года назад

    Thanks 😊 Add more animate video please 😍

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your comment! Sure we'll have lots of fun and cool videos in the new year🎉

  • @leilamoheimani2235
    @leilamoheimani2235 2 года назад

    That’s awesome 🤩

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thank you Leila, let us know your great feedback about our video contents 😍

  • @leonardiux345
    @leonardiux345 2 года назад

    Very nice :)

  • @devinandvalen6713
    @devinandvalen6713 2 года назад

    Love it!

    • @Designer-Mindset
      @Designer-Mindset 2 года назад

      Thanks for your comment *Devin*! So glad to hear from you!

  • @javadsaberi_afroo
    @javadsaberi_afroo 3 года назад

    فارسی صحبت کنید بفهمیم

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thanks for your comment dear Javad. We planned to add Persian subtitles in the near future, with help of designer mindset community, for our lovely subscribers like you! 💜

  • @Designer-Mindset
    @Designer-Mindset 3 года назад

    Learn smart animate super fast! 😎 ruclips.net/video/imAULhp5qlE/видео.html

  • @harikeshk8451
    @harikeshk8451 3 года назад

    Put More tutorials Man! I love it

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thank you for your comment 💜 sure we'll create more cool tutorials 💪😎

  • @vipulYadav-ur2vf
    @vipulYadav-ur2vf 3 года назад

    Please bro next time when u make video please explain everything how u did this it's really helpful for beginners to understand your concept and understanding about design ....

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Hey Vipul Yadav, thanks for your feedback. please *check out the full tutorial* : ruclips.net/video/Elbslz3RSUo/видео.html and let us know if you have any question. happy designing :)

  • @Designer-Mindset
    @Designer-Mindset 3 года назад

    Speed art video: ruclips.net/video/OQaDyex5mGA/видео.html

  • @Designer-Mindset
    @Designer-Mindset 3 года назад

    Check out the tutorial for this speed art: ruclips.net/video/Elbslz3RSUo/видео.html

  • @hr9033
    @hr9033 3 года назад

    Hello @designer Mindset team can you provide semantic design ui kit for my project

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Hello Hemnat, thanks for your comment! do you mean semantic css framework components?

  • @WilfredJKrennPsychotherapist
    @WilfredJKrennPsychotherapist 3 года назад

    Love this animation! Whats the best way to get the tutorial?

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thanks for your comment. We'll create a tutorial for this speed design very soon. subscribe to get it for FREE!

  • @zaynab_gh7
    @zaynab_gh7 3 года назад

    🌹🌹

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      thanks for your feedback dear Zaynab 🌹💜

  • @zaynab_gh7
    @zaynab_gh7 3 года назад

    Excuse me. Another question: if I want to have a responsive design, do I have to use auto layouts or constraints?

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      these are 2 different things. you need constraints for responsive design but also you need autolayouts for a clean and consistent design

  • @zaynab_gh7
    @zaynab_gh7 3 года назад

    Hi, can you also explain about breakpoints in ui design or how to use the breakpoint plugin. Thankful

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Sure, we can do that in another playlist, we will have a playlist about cool plugins and tricks in Figma 🌹

  • @sherrywang2274
    @sherrywang2274 3 года назад

    Hi! I am a little confused by the differences between autolayout and constraints. I have watched many tutorials and some people use autolayout almost everywhere instead of using constraints to fix the elements 🤔 I wonder how you would approach this. It would be great if you can please help me with this concept! Thanks

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Hi, these are 2 different concepts. auto layouts have constraints too. when you want to use your design for different screen sizes, you have to change your auto layout according to the size one by one, if you didn't set constraints for them. but if you did set constraints for all of the elements in your design the only thing is left to design for another screen is to resize the main frame. I hope this was helpful

  • @alejandromilian3669
    @alejandromilian3669 3 года назад

    Thank you!

  • @clarityofthought
    @clarityofthought 3 года назад

    These are great - I will pay for more tutorials

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thank you, dear Marco. We are super happy to hear such feedback! if you like our work please *share* it with your friends! and let us know what kind of tutorials do you think we can create for you?

  • @nilighan8761
    @nilighan8761 3 года назад

    Great, Thanks

  • @tabasommosavi5332
    @tabasommosavi5332 3 года назад

    Nice🌷

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thanks for comment! If you are interested in in kind of videos please subscribe and share it with your friends 🔥💜

  • @pegahghooshchi4193
    @pegahghooshchi4193 3 года назад

    Tnx, when we can use resizing?

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thanks for your nice comment 💜 We use resizing for responsive design (mobile, tablet, desktop screens) have different width so we create a component and resuse it in every where. If you have any other question, let us now :)

  • @Designer-Mindset
    @Designer-Mindset 3 года назад

    please check out our previous video about about components: ruclips.net/video/5BNKWwIphqg/видео.html

  • @mckidlet
    @mckidlet 3 года назад

    Maybe get more in depth with the tutorial, it's pretty hard to follow since i'm a beginner.

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thank you for your feedback, we got our first comment from you! Sure we'll try to focus on the details and describe them step by step. please follow up on this tutorial and give us your *valuable* feedback on them!

  • @AzumaRikimaru
    @AzumaRikimaru 3 года назад

    Ok man sit down and be ready for some criticism. It’s hard to follow this “tutorial” You don’t explain anything, telling people how to do things includes explaining he reasoning and technicalities of it all. You need to explain every single click, thought and reasoning behind your design flow. Why would anyone want to copy paste orders from a RUclips video? When they can just trace over the homepage? Why should we listen to you? What makes this a solution to a problem? Why use Spotify homepage? Why is your process better than others?

    • @Designer-Mindset
      @Designer-Mindset 3 года назад

      Thank you for your great comment and your attention to our videos. We decide to have more details and describe a single concept in each video based on your feedback and other guys. Recreating an app can help beginners to understand the concepts and features of Figma, by practicing on a great designed app like Spotify. Also please check our Intro video for this course. ruclips.net/video/sDW4lsTnC74/видео.html Kindly follow up on our next videos, we *value* your comments!