- 43
- 256 420
Mindesigning
Brazil
Приєднався 10 жов 2022
A place for nuggets of content on Design, creativity and psychology.
Lear more about UI/UX design, Research and Psychology with simple and quick content!
Here you find tutorials and theory videos related to these fields.
Lear more about UI/UX design, Research and Psychology with simple and quick content!
Here you find tutorials and theory videos related to these fields.
How to Create a Realistic Typing Effect in Figma (Step-by-Step Tutorial)
Want to add a professional and engaging typing interaction effect to your designs? In this tutorial, I'll show you step-by-step how to create a realistic typing animation in Figma. Whether you're designing prototypes, UI/UX mockups, or simply exploring new design tricks, this guide will walk you through the process with clear instructions. Perfect for beginners and experienced designers alike!
🎯 Link to Typist plugin:
www.figma.com/community/plugin/1319490058051389789/typist-animated-typing-text-for-forms-and-chat-ui
💡 Don't forget to like, comment, and subscribe for more design tips and tricks!
#FigmaTutorial #TypingAnimation #InteractionDesign #UIUXDesign #PrototypingTips #FigmaTipsAndTricks #MotionDesign #FigmaForBeginners #SmartAnimationFigma #TypingEffectFigma #FigmaInteractionAnimation #DesignTutorials #FigmaPlugins #DynamicPrototyping #CreativeUIDesign"
🎯 Link to Typist plugin:
www.figma.com/community/plugin/1319490058051389789/typist-animated-typing-text-for-forms-and-chat-ui
💡 Don't forget to like, comment, and subscribe for more design tips and tricks!
#FigmaTutorial #TypingAnimation #InteractionDesign #UIUXDesign #PrototypingTips #FigmaTipsAndTricks #MotionDesign #FigmaForBeginners #SmartAnimationFigma #TypingEffectFigma #FigmaInteractionAnimation #DesignTutorials #FigmaPlugins #DynamicPrototyping #CreativeUIDesign"
Переглядів: 209
Відео
Figma Secrets: Design a Pro-Level Responsive Bar Chart in Minutes!
Переглядів 22928 днів тому
Unlock the power of Figma and learn how to design a responsive bar chart component like a pro! In this step-by-step tutorial, you'll discover advanced techniques to create scalable and dynamic bar chart designs that adapt beautifully to any layout. Whether you're a beginner or an experienced designer, this guide will elevate your data visualization skills and streamline your workflow. 💬 Got que...
How to Build Cross-Component Interactions in Figma: Trigger Actions Between Elements
Переглядів 337Місяць тому
Unlock the power of cross-component interactions in Figma! 🎉 In this tutorial, you'll learn how to create interactive prototypes where one component triggers changes in another. Perfect for building dynamic, engaging prototypes, this step-by-step guide will walk you through the entire process-from setting up your components to creating seamless, responsive interactions that make your designs co...
Design Smarter: Auto Layout Wrap in Figma Explained
Переглядів 2682 місяці тому
🎨 Master Figma's Auto Layout Wrap: A Step-by-Step Guide 🎨 Welcome to our comprehensive tutorial on mastering the Auto Layout Wrap function in Figma! Whether you're a beginner or an experienced designer, this video will help you streamline your design process and create responsive layouts effortlessly. Boost Your Skills: Learn how to create flexible, responsive designs without the hassle. Set mi...
Interactive Sidebar in Figma: Expand/Collapse on Hover - Easy Tutorial
Переглядів 2,8 тис.3 місяці тому
🚀 Elevate Your UI/UX Skills with Figma! 🚀 Welcome to our detailed step-by-step guide where you'll learn how to create an interactive sidebar menu that expands and collapses on hover using Figma. This tutorial is perfect for designers who have been struggling with the "while hovering" interaction and want to enhance their prototyping abilities and add dynamic interactions to their projects. How ...
Figma Tutorial: How to Bend Text Along a Custom Path
Переглядів 9555 місяців тому
Discover a quick and easy way to bend text along any custom path in this bite-sized tutorial. Perfect for beginners and seasoned designers alike, learn the essential steps to achieve stunning text effects that follow your chosen path effortlessly. Watch now to pick up this handy technique and add a creative twist to your designs in no time! Plugin link: www.figma.com/community/plugin/1331748701...
Figma Tutorial: How to Duplicate Variables Across Files
Переглядів 2,5 тис.6 місяців тому
Enhance your design efficiency with our comprehensive tutorial on duplicating variables between Figma files. This video is a quick and simple tip, providing you with a fast approach to help you move variables between files in no time #Figma #DesignVariables #UIDesign #UXDesign #FigmaTutorial #DesignSystems #VariableManagement #FigmaTips #DesignEfficiency #FigmaGuide #UserInterface #UserExperien...
Mastering Split View Interactions - Figma Prototype Tutorial
Переглядів 8267 місяців тому
Mastering Split View Interactions - Figma Prototype Tutorial
Figma Tutorial on Creating Draggable UI Elements - Drag and Drop Map Pin Explained!
Переглядів 2,5 тис.7 місяців тому
Figma Tutorial on Creating Draggable UI Elements - Drag and Drop Map Pin Explained!
Mastering Row Hover Effects in Figma: A Step-by-Step Guide
Переглядів 2,8 тис.8 місяців тому
Mastering Row Hover Effects in Figma: A Step-by-Step Guide
Mastering Conditional Prototyping: A Step-by-Step Tutorial
Переглядів 1,8 тис.10 місяців тому
Mastering Conditional Prototyping: A Step-by-Step Tutorial
Turn Your Figma Library Into a Fully Documented Design System - With One click!
Переглядів 1,1 тис.Рік тому
Turn Your Figma Library Into a Fully Documented Design System - With One click!
Mastering Typography for Interfaces: Best Practices and Pro Tips
Переглядів 615Рік тому
Mastering Typography for Interfaces: Best Practices and Pro Tips
Complete Guide to Creating Dynamic Table Components on Figma
Переглядів 35 тис.Рік тому
Complete Guide to Creating Dynamic Table Components on Figma
Mastering Baseline Grid in Figma: A Complete Guide in Minutes
Переглядів 6 тис.Рік тому
Mastering Baseline Grid in Figma: A Complete Guide in Minutes
How to Create Circular Text in Figma: Simple Tutorial
Переглядів 76 тис.Рік тому
How to Create Circular Text in Figma: Simple Tutorial
Understanding Component Propreties on Figma #quicktips #tutorial
Переглядів 9332 роки тому
Understanding Component Propreties on Figma #quicktips #tutorial
7 PRO TIPS TO IMPROVE YOUR FIGMA WORKFLOW! #tutorial
Переглядів 2 тис.2 роки тому
7 PRO TIPS TO IMPROVE YOUR FIGMA WORKFLOW! #tutorial
HOW TO REATTACH INSTANCES TO COMPONENTES ON FIGMA #tutorial #quicktips
Переглядів 3,3 тис.2 роки тому
HOW TO REATTACH INSTANCES TO COMPONENTES ON FIGMA #tutorial #quicktips
How to Export High Resolution Images on Figma - FIXED!
Переглядів 55 тис.2 роки тому
How to Export High Resolution Images on Figma - FIXED!
How to Fix Component Interactions on Figma #tutorial
Переглядів 7 тис.2 роки тому
How to Fix Component Interactions on Figma #tutorial
How to Build Scalable Components on Figma! #quicktips
Переглядів 2,2 тис.2 роки тому
How to Build Scalable Components on Figma! #quicktips
How To Change an Image Inside a Component on Figma
Переглядів 39 тис.2 роки тому
How To Change an Image Inside a Component on Figma
Amazing approach, super helpful, thank you a lot!
Valuable, short, straightforward. I hope if you can build variables for it and linking them to control how many bar, auto fill animation after delay,.. to make the component more advanced.
Thank you for this
You got it! Share it away
Se esse sotaque não for de Brasileiro não sei mais nada
Thanks man! That's exaclty what I was looking for!
helped me a lot sir thanks
Excellent ! in 5 min you taught me a lot
😉
Is the 2nd technique more efficient and doesn't have any issues? Coz I have a project and made a lot of tables and the 1st technique feels more work to do on my situation.
It depends on your needs, if just for demonstration, the 2nd works fine, but the multiply effect affects all the content of the row, not just the background. Both are workarounds, but the 1st one is more effective and efficient. If you use atomic principles and base components for your table, it should not be that much work
Brs sempre salvando! :)
When I type ARC- I see NOTHING
www.figma.com/community/plugin/762070688792833472/arc-bend-your-type
This approach wouldn't work if I have a cell that spans 2 rows or columns
Thank you! I just try it but has some bugs and you have to pay to use it. At the end I had to create it in Illustrator make the text vector and then copy and paste in Figma
great! thanks a lot!!!
Great help...Thanx
Really helpful...Thanx
But this method has a flaw, you can't make whole row hover state for example. Isn't making rows a better approach? Also changing number of rows is hard.
For layout purposes, you can show the hover state by changing one cell on each column. You can go for a row approach, but its trickier considering responsiveness, I wouldn't recommend it. As for the hover state for prototyping purposes, there's is no perfect solution but I have a lesson on that too: Mastering Row Hover Effects in Figma: A Step-by-Step Guide ua-cam.com/video/urLsjxShaIQ/v-deo.html
You saved me so many hours. I can't believe i did this manually before. You are amazing!
@@jalengonel happy to help!
Very very helpful Thank you
@@genevieveanyanwu440 Happy to help! Stay tuned and share it away 🙂
@@genevieveanyanwu440 happy to help! Stay tuned and share it away
Thank you :) I have been trying to work this out for a loooong time.
@@timknight4186 happy to help! Share it away
1:29 you jumped straight into having frame 5 expanded to the whole frame without explain how that was done
I think you missed explaining one step
I wonder why mine is not working, the subjects were not shrinking whilst the sidebar expands
Oh got it, my “fill the container” was not properly set
Great tutorial! In one of the projects a table needed expandable rows and in-line editing. Was a nice challenge. Perhaps and idea for a new video =)
Is possible do this with multiple elements?
Doesn't work for me...
What do you mean? this doesn't work at all. You can't just drag pic icon around inside the frame without assigning an on drag action.
I thought the same thing, but then there was some random magic and it ... worked. Just follow the instructions (as unclear as they might seem) closely and it will just... work.
You are not actually using a drag interaction, you're scrolling the frame, and that gives a sense of dragging
Thanks man!
Is it flattened ?
Great video! One tip back.. if you press "s" while dragging some element, it won't snap to anything. Great for fine tuning.
man you earn a subscriber
i have a problem because many object inside main frame, so after i change scroll in the pin frame, the main frame following the setting
Yes, it works for one item only.
it's baffling to me how a program with such bad UX is the industry standard
Great tutorial! Simple and straight to the point. Subscribed!
I’m learning a lot from your vids, but please add the ability to change speed to your videos because you talk too fast! Thank you
You should be able to change the playback speed just fine like in any other video. But thanks for the feedback, I'll take that into consideration for the next ones
Thank you for showing the worst plugin and wasting my time
First - many thanks! this is a great video. Clear and short. it changed entirely how I built a table and solved the issue of having a columns sized as the content in cells. Same questions as below: how do you add states such selected and hover? do you need to duplicate each cell for that? use variable? and how you add rows in a quick way that does not requires adding a row to each column? maybe it's better to first create one row from all columns (suggested below also), and duplicate it instead?
@@irisgreen9184 Hey, lots of good points. As for the states, it depended on the effect you want to apply, but yes, you can create variants os use variables to change the bg on hover for example. I have this tutorial on prototyping that may help ua-cam.com/video/urLsjxShaIQ/v-deo.htmlsi=2PC2tjxX6mIqq4oM As for the amount of rows, its done mannualy, my suggestion is creating big columns and deleting the cells you don't need, but you can add component properties to the visibility of the column cell to toggle them on/off (I will explore this in a new video if it works properly, thanks for the idea)
Thank you this is so help full
You're amazing man
Should not the text (body) be aligned with each grid?
Thank you so much, that was exactly what I was looking for. You safed a design students pre-diploma with this video!
Been there haha Happy to help!
Thanks for the best tutorial for tables ever!
you are the best!
My components just don't work at all. Checked everything, reinstalled figma. So frustrating.
Hey. What exactly you're trying to do?
@@mindesigning5468 I'm trying to do simple hover card. I've checked everyting I could, it shouldn't be so complicated to do, I think it's more of a bug than a skill issue... Btw, thanks for the response!
@@ImaN8tcat Been there...These hover issues are not uncommon, It can be trickier than it should be. If you can share the file, I can take a look
@@mindesigning5468 Oh, I've looked it up and it works somehow! Did you do something? Okay, now I know that it turns out I did something wrong, idk whether it was you who hepled me, anyway, thank you very much xD
Well how do i get it back
Just release the space bar
Thanks ❤
You're welcome 😊
thank you so much my king. this is really good
Thanks!
THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU I have been searching for this for a realllyyy long time
You're welcome! Remember to share 😀
Thank you! Appreciate it a lot
Glad to help! Share it away!
Thank u very much, you explained it very easy but i cant add this video to my playlist, why?
You should be able to do it just fine. Hit the save button and select the desired playlist
This is much better explanation than my mentor in bootcamp 😢.
Glad to help! Share it away