- Видео 23
- Просмотров 66 807
Adi Purdila
Румыния
Добавлен 20 авг 2010
Short, focused tutorials to help you master Figma and Webflow. My goal is to deliver essential information in under 10 minutes, so you can learn fast and design faster.
Ready to dive in? Subscribe and hit the bell icon to stay updated with new content. Don’t forget to leave a comment with video suggestions-I’d love to hear your ideas!
Interested in sponsoring the channel? Contact me via social media or email.
Ready to dive in? Subscribe and hit the bell icon to stay updated with new content. Don’t forget to leave a comment with video suggestions-I’d love to hear your ideas!
Interested in sponsoring the channel? Contact me via social media or email.
Auto Layout Hacks: Use Different Gaps Between Items
Learn how to create gaps of different sizes in Figma auto layout frames.
⚡Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX
Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1
Watch next: ruclips.net/video/2JrSB8oTZDQ/видео.html
#adipurdila #webdesigntutorial #figmatutorial
⏱️ Video chapters
00:00 Intro
00:10 Technique basics
02:43 Design example
05:23 When it doesn't work
07:48 Conclusion
⭐️ Resources:
→ Figma: psxid.figma.com/x7fyl2w1012d
🎓 My Design Classes
→ Figma for Busy People: Mastering Auto Layout (Skillshare): skl.sh/3wnfyXX
→ Figma for Busy People: Mastering Auto Layout (Udemy): www.udemy.com/course/figma-auto-layout-for-busy-people/?refe...
⚡Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX
Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1
Watch next: ruclips.net/video/2JrSB8oTZDQ/видео.html
#adipurdila #webdesigntutorial #figmatutorial
⏱️ Video chapters
00:00 Intro
00:10 Technique basics
02:43 Design example
05:23 When it doesn't work
07:48 Conclusion
⭐️ Resources:
→ Figma: psxid.figma.com/x7fyl2w1012d
🎓 My Design Classes
→ Figma for Busy People: Mastering Auto Layout (Skillshare): skl.sh/3wnfyXX
→ Figma for Busy People: Mastering Auto Layout (Udemy): www.udemy.com/course/figma-auto-layout-for-busy-people/?refe...
Просмотров: 1 946
Видео
Webflow Quick Find: The Key to Lightning-Fast Designs
Просмотров 925 месяцев назад
Design faster and more efficiently in Webflow with Quick Find. ⚡Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1 #adipurdila #webflow #webflowtutorial ⏱️ Video chapters 00:00 Intro 00:18 Opening Quick Find 00:37 Adding Elements 01:43 Adding Assets 02:33 Selecting On-Page Elements 03:43 Cre...
Figma Auto Layout Wrapping: A Game-Changer for Designers!
Просмотров 1,1 тыс.6 месяцев назад
This feature allows elements to wrap to the following line when they don’t fit the designated space. ⚡Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX Watch next: ruclips.net/video/wruaa6MeAtw/видео.html Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1 #adipurdila #figmatutorial #autolayout ⏱️ Video chapters 00:00 Intro 00:15 The basics ...
Figma Auto Layout: Working with Min and Max Values
Просмотров 5206 месяцев назад
Get more control over your responsive Figma layouts by using min and max values. This feature prevents elements from going above or below certain widths or heights. ⚡Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX Watch next: ruclips.net/video/OyM51BjA1SY/видео.html Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1 #adipurdila #figmatuto...
Figma Design Tips: Negative Spacing & Canvas Stacking Order
Просмотров 2,8 тыс.6 месяцев назад
These two features allow you to overlap elements really easily and control the spacing between them as well as how they're stacked. 🔥 Learn Figma Auto Layout in Under 90 Minutes: skl.sh/3wnfyXX Subscribe to my channel for more awesome videos: www.youtube.com/@AdiPurdila?sub_confirmation=1 #adipurdila #figmatutorial #autolayout ⏱️ Video chapters 00:00 Intro 00:19 Negative spacing 01:46 Canvas st...
Did you know you can do this in Windows? | Color Picker | App Recommendation
Просмотров 9 тыс.2 года назад
Are you looking for a color picker for Windows? In this App Recommendation video, I'll recommend the best color picker for Windows. Whether you're a student or a professional, this color picker will be a great addition to your toolkit. You can use it to pick the perfect colors for your projects, from anywhere on your screen. It's fast and easy to use, and it's perfect for anyone who wants a has...
Designing with Figma: Landing Page for Mobile App - FREE Lesson
Просмотров 1,1 тыс.3 года назад
Last year I released my first class on Skillshare, called "Designing with Figma: Landing Page for Mobile App". In this class I share my insights, personal workflow, and best practices for designing a landing page starting from a project brief and a set of wireframes, all done in the amazing free app Figma. As a celebration for reaching 1400 students, I decided to post a free lesson from that cl...
How to Create Beautiful Images of Your Code
Просмотров 10 тыс.3 года назад
In this video I'll show you a few tools you can use to create beautiful and shareable images of your source code. Links mentioned in this video: - ray.so/ - www.dangercove.com/petrify/ - carbon.now.sh/ See all my Skillshare classes here: www.skillshare.com/r/user/adipurdila You can get 14 FREE days of a Skillshare Premium Membership through the link above. I also get a small commision (referral...
How to Create Text Gradients in CSS
Просмотров 3753 года назад
In this video I'll show you a simple technique for applying gradients to text using CSS. As a bonus, we'll also animate those gradients to create a cool effect on mouse hover. Links mentioned in this video: - Demo on CodePen: codepen.io/adipurdila/pen/MWbVdMB - Web Gradients: webgradients.com/ See all my Skillshare classes here: www.skillshare.com/r/user/adipurdila You can get 14 FREE days of a...
How to Get Free Background Gradients | App Recommendation
Просмотров 6003 года назад
In this video I'll show you where to get some free and high quality background gradients for your web design projects. These gradients are part of a collection I've been using for a while now and I really like them. You can also get the gradients as a Sketch or Photoshop file and there is a Figma plugin available as well. Links mentioned in this video: - Web Gradients: webgradients.com/ See all...
How to Create Smooth Drop Shadows in CSS and Figma | App Recommendation
Просмотров 7 тыс.3 года назад
In this video I'll show you how to create smooth, layered drop shadows in CSS and Figma. Altho I'll be using a Figma plugin, these shadows can be replicated in Adobe XD, Sketch or any design software that allows you to add multiple shadows to the same element. Links mentioned in this video: - How to Design a Recipe Card in Figma FREE File Download: ruclips.net/video/OyJ9OjC0nTU/видео.html - Sha...
How to Code a Recipe Card with HTML and CSS + FREE File Download
Просмотров 4,4 тыс.3 года назад
In this video I'll show you how to code a recipe card with HTML and CSS. At any time you can download the original design file for free and use it in your own projects, as well as the code we'll be writing in this video. Figma is a great design software that you can use for designing websites, mobile apps, icons and even small components like the one in this video. For the coding, I used Visual...
How to Design a Recipe Card in Figma + FREE File Download
Просмотров 1,3 тыс.3 года назад
In this video I'll show you how to design a recipe card in Figma. At any time you can download the design file for free and use it in your own projects. Figma is a great design software that you can use for designing websites, mobile apps, icons and even small components like the one in this video. Download the Figma design file for free: www.figma.com/file/vBs96BOSWtTIbAjAqzFjxs/Recipe-Card?no...
How to Create Typographic Scales on the Web
Просмотров 7 тыс.3 года назад
In this video I'll show you how to create typographic scales on the web. Type scales allow you to quickly and easily define the font sizes for your design project's typography and they're really simple to create. Links mentioned in this video: - Type Scale: type-scale.com/ - Designing with Figma: Landing Page for Mobile App: skl.sh/3ecpFRa You can get 14 FREE days of a Skillshare Premium Member...
How to Turn a Screenshot into a Browser Mockup
Просмотров 2,3 тыс.3 года назад
In this video I'll show you how to turn screenshots into browser mockups using a free tool, directly in your browser. Links mentioned in this video: - Screely: www.screely.com/ Let's connect on social media: - Twitter: adipurdila - Dribbble: dribbble.com/adipurdila - Facebook: adipurdila You’re watching: How to Turn a Screenshot into a Browser Mockup Music: Envato Elements
How to Create a Repeatable Pattern in Adobe XD
Просмотров 1,9 тыс.3 года назад
How to Create a Repeatable Pattern in Adobe XD
How to Organize SVG Icons on macOS and Windows
Просмотров 5523 года назад
How to Organize SVG Icons on macOS and Windows
Bottom Line - Premium Business Landing Page
Просмотров 4,6 тыс.12 лет назад
Bottom Line - Premium Business Landing Page
Conversion Landing Page - How to Create WordPress Page Templates
Просмотров 7 тыс.12 лет назад
Conversion Landing Page - How to Create WordPress Page Templates
Simple yet genius solution!
Man this worked awesome. As PO I rarely need highly elaborated mockups but I need graphic examples all the time. Thank you!!
Nice Video
thanks sir, works perfectly
love the way you teach sir. Thank you so much. Wish you more and more success.💓 and if you can please do a complete app design tutorial from scratch to policies page.
Thank you!
Thanks you saved my project! 🥺🙏
So helpful how you go through all the different use case details as they come up. Thanks for sharing 💪
Cheers, glad you liked it!
Great video tutorial Adi
Thanks! 😀
They could add individual gaps that can be customized separately from each other, this is possible. Thanks for the tutorial!
Yeah, that would be cool. Maybe in a future update :D
Thanks Adi, great video
You’re welcome!
Auto comment, like, and subscribe. Supporting kind and sharing designers like me. Thanks, Adi!
I watched the whole video and even knew this function in Figma but your tutorial helped me understand its physics 👏 Btw great video editing style! Simple, clear and without music
Hey, thanks for the kind words, glad you liked the video ;)
Great vid. I've noticed the auto-alignment features in Figma becoming more and more analogous to the CSS Flexbox model over time. Apart from a few missing properties like row-reverse and column-reverse Flex is pretty well represented in Figma now!
Yeah, I totally agree. It's a great step forward for Figma and it makes the transition between Figma and tools like Webflow pretty seamless.
I just started my Figma journey based on your amazing "Landing Page for Numm" tutorial over on Skillshare. You're a gifted communicator, I really enjoyed that course and it's great to see you on YT also!
Hey, it’s great to see you here as well and many thanks for the kind words :)
Informative.
Thanks!
Good video! Thanks Adi!
Cheers!
You're one of the best online instructors that I have ever come across! Glad that you're posting on your own channel.
Hey! Thank you for the kind words <3 I will be posting a lot more content here from now on so stay tuned :)
Great guide Adi, thanks for creating and sharing it
Cheers, glad you liked it!
Hello Mr. Purdila how can I get your older videos about HTML & CSS for beginners? I came across some videos of you in an online class but I kinda cant get the direct videos from you. Pls assist. Thank you.
Hey! Not sure which videos you're referring to. Where did you find those?
thank you
thanks man
Thanks a lot!
Thanks!
Wonderful! I'm in the process of giving my old e-commerce site a major 'face-lift' and this tool will definitely save me some time!
That's cool. Good luck with the face-lift!
whats the best way to get your scale for mobile? the headlines become too big but i still use the same body size of 16pt for mobile and desktop so how do i create a rule for it?
For mobile use a different scale. For example, if on desktop I would use a 1.414, on mobile I use 1.2. The base font size stays the same, but the headings scale differently, they're not as big on mobile.
@@AdiPurdila thanks that works!
And I don't want to import all my icons into an app. Just let me browse the filesystem.
color picker for windows in my case change hex value? i dont know way
can you do what app you use to determine every element's height/width in websites?
I think you're referring to an app called PixelSnap, but that's for macOS only.
Power toys has it now, it's called Rulers
Your amazing Adi Sir.... GOD bless you...
Many thanks <3
Adi please make a series for the latest figma updates june 2023 as you are my favorite instructor of all 🙏
Thank you man, I'm considering it!
I really liked this video straight to point. Wonderful!
Cheers!
Thank you so much
Thank you so much 😂😂😂
Thank you so much
Nice video! Thanks
Cheers!
Thanks
No problem!
Great Initiative ADI PURDILA KEEP UP YOUR GOOD WORK A NEW WEB DESIGNER FROM PAPUA NEW GUINEA 🇵🇬
Thank you!
Any suggestion on mobile mock up?
Sir you have the great methodology i have seen your 7 hours html and css course may you live long and b happy sir i am from pakistan.❤
Thank you so much! I'm glad you liked my course :)
This is great Adi, thank u for sharing! I use an extension in Brave browser for grabbing my colour codes, but this is awesome so I don't have to worry about whether I'm in Brave, Google chrome or just on my pc.
Hii adi..your all videos are awesome..so many things learning from your videos..😍
Cheers, glad you liked them!
Unfortunately, this app isn't free anymore :(
But how do you transfer this to mobile? No one is explaining that!!!
For mobile I either use a smaller base font size with the same ratio or the same base font size with a different ratio. Regardless, the result is a different scale which you can successfully use on mobile.
Thanks for the recommendation. Just in time!
Any time!
Hey 👋 I'm like your lecture🥰 I went to know css with you. Please make a series tutorial about css☺️☺️ Thank You
Thanks man, I'll definitely consider it :)
@@AdiPurdila Fine 🙂 I'm waiting your tutorial 🥰
Yes am also waiting for css
What color picker are you using for Windows? Let me know down in the comments!
@@JohnKuhles1966 Power Toys is for Windows, what are you talking about?
Just what I was looking for. Thank you good man
nice
Cheers!