- Видео 21
- Просмотров 37 305
Designer Mindset
Объединенные Арабские Эмираты
Добавлен 12 июл 2021
Welcome to our channel, where we talk about UI, UX, and Product Design. Also, we share our experience about time & energy management, productivity, and happy life!
🤝 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
Happy designing!
🤝 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
Happy designing!
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/...
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
how do you make it go slower?
😊❤
💜
thank you so much very helpful video
Glad it was helpful!
thank you so much very helpful video
So nice of you
thank you so much
You're welcome!
THANK YOU SO MUCH FOR THIS TUTORIAL THIS HELP ME MAKE MY PRESENTATION EASY AND TO PASS
Super excited to hear that from you!
this is what i need, thanks
Very happy to found our video useful :) 💜
Nice!
Thank you Jonas! Please share this video with your friends 😉💜
Almost spent 2 hours finally realized it only works for pictures the mask. thanks .
Thanks for your comment!
why you have put layer blur ... it's not working poroperly
Thanks for your comment, we want to blend colors and have mesh gradient. You can do it just with simple regular gradient.
pքɾօʍօʂʍ
Nice !
Thank you! 💜
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!
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 😊
i can't see the last part of this video bro
Thanks for your feedback 👍the problem is solved ✨
Don't miss this animation tutorial 🔥: ruclips.net/video/QGmQ__2Ztkw/видео.html
excellent do more bro
Thanks for your energetic comment 💜🔥Sure we'll keep doing more cool tutorials 💪😎
Thanks 😊 Add more animate video please 😍
Thanks for your comment! Sure we'll have lots of fun and cool videos in the new year🎉
That’s awesome 🤩
Thank you Leila, let us know your great feedback about our video contents 😍
Very nice :)
Thanks buddy ☺️💜
Love it!
Thanks for your comment *Devin*! So glad to hear from you!
فارسی صحبت کنید بفهمیم
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! 💜
Learn smart animate super fast! 😎 ruclips.net/video/imAULhp5qlE/видео.html
Put More tutorials Man! I love it
Thank you for your comment 💜 sure we'll create more cool tutorials 💪😎
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 ....
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 :)
Speed art video: ruclips.net/video/OQaDyex5mGA/видео.html
Check out the tutorial for this speed art: ruclips.net/video/Elbslz3RSUo/видео.html
Hello @designer Mindset team can you provide semantic design ui kit for my project
Hello Hemnat, thanks for your comment! do you mean semantic css framework components?
Love this animation! Whats the best way to get the tutorial?
Thanks for your comment. We'll create a tutorial for this speed design very soon. subscribe to get it for FREE!
🌹🌹
thanks for your feedback dear Zaynab 🌹💜
Excuse me. Another question: if I want to have a responsive design, do I have to use auto layouts or constraints?
these are 2 different things. you need constraints for responsive design but also you need autolayouts for a clean and consistent design
Hi, can you also explain about breakpoints in ui design or how to use the breakpoint plugin. Thankful
Sure, we can do that in another playlist, we will have a playlist about cool plugins and tricks in Figma 🌹
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
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
Thank you!
You're welcome. Gald to help you✨
These are great - I will pay for more tutorials
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?
Great, Thanks
Thanks for positive comment! 💜
Nice🌷
Thanks for comment! If you are interested in in kind of videos please subscribe and share it with your friends 🔥💜
Tnx, when we can use resizing?
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 :)
please check out our previous video about about components: ruclips.net/video/5BNKWwIphqg/видео.html
Maybe get more in depth with the tutorial, it's pretty hard to follow since i'm a beginner.
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!
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?
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!