- 43
- 270 403
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"
มุมมอง: 479
วีดีโอ
Figma Secrets: Design a Pro-Level Responsive Bar Chart in Minutes!
มุมมอง 528หลายเดือนก่อน
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
มุมมอง 5182 หลายเดือนก่อน
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
มุมมอง 3173 หลายเดือนก่อน
🎨 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
มุมมอง 3.5K4 หลายเดือนก่อน
🚀 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
มุมมอง 1.1K6 หลายเดือนก่อน
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
มุมมอง 3.1K7 หลายเดือนก่อน
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
มุมมอง 9418 หลายเดือนก่อน
Mastering Split View Interactions - Figma Prototype Tutorial
Figma Tutorial on Creating Draggable UI Elements - Drag and Drop Map Pin Explained!
มุมมอง 3K8 หลายเดือนก่อน
Figma Tutorial on Creating Draggable UI Elements - Drag and Drop Map Pin Explained!
Mastering Row Hover Effects in Figma: A Step-by-Step Guide
มุมมอง 3K9 หลายเดือนก่อน
Mastering Row Hover Effects in Figma: A Step-by-Step Guide
Mastering Conditional Prototyping: A Step-by-Step Tutorial
มุมมอง 2K10 หลายเดือนก่อน
Mastering Conditional Prototyping: A Step-by-Step Tutorial
Turn Your Figma Library Into a Fully Documented Design System - With One click!
มุมมอง 1.1Kปีที่แล้ว
Turn Your Figma Library Into a Fully Documented Design System - With One click!
Mastering Typography for Interfaces: Best Practices and Pro Tips
มุมมอง 654ปีที่แล้ว
Mastering Typography for Interfaces: Best Practices and Pro Tips
Complete Guide to Creating Dynamic Table Components on Figma
มุมมอง 37Kปีที่แล้ว
Complete Guide to Creating Dynamic Table Components on Figma
Mastering Baseline Grid in Figma: A Complete Guide in Minutes
มุมมอง 6Kปีที่แล้ว
Mastering Baseline Grid in Figma: A Complete Guide in Minutes
How to Create Circular Text in Figma: Simple Tutorial
มุมมอง 80Kปีที่แล้ว
How to Create Circular Text in Figma: Simple Tutorial
Understanding Component Propreties on Figma #quicktips #tutorial
มุมมอง 9452 ปีที่แล้ว
Understanding Component Propreties on Figma #quicktips #tutorial
7 PRO TIPS TO IMPROVE YOUR FIGMA WORKFLOW! #tutorial
มุมมอง 2K2 ปีที่แล้ว
7 PRO TIPS TO IMPROVE YOUR FIGMA WORKFLOW! #tutorial
HOW TO REATTACH INSTANCES TO COMPONENTES ON FIGMA #tutorial #quicktips
มุมมอง 3.4K2 ปีที่แล้ว
HOW TO REATTACH INSTANCES TO COMPONENTES ON FIGMA #tutorial #quicktips
How to Export High Resolution Images on Figma - FIXED!
มุมมอง 57K2 ปีที่แล้ว
How to Export High Resolution Images on Figma - FIXED!
How to Fix Component Interactions on Figma #tutorial
มุมมอง 7K2 ปีที่แล้ว
How to Fix Component Interactions on Figma #tutorial
How to Build Scalable Components on Figma! #quicktips
มุมมอง 2.3K2 ปีที่แล้ว
How to Build Scalable Components on Figma! #quicktips
How To Change an Image Inside a Component on Figma
มุมมอง 40K2 ปีที่แล้ว
How To Change an Image Inside a Component on Figma
Thanks!
I don't have the license for this plugin :(
If I want to use this method but make hover instances, how would I do that, because once they become components you can't adjust the height. I have been trying to figure this out for hours so if you have any ideas!!!
Could you clarify what specific hover effect you are looking for? Regarding changing the height of the bars when it’s a component, you can accomplish that by setting the height of each bar as a variable and adjusting their values in the variables panel.
Bro i have this problem in figma, where i created a toggle component for switching between the frames ( for ex: General & Requests property names for toggle component and the Tap-in animation ) after i placed instance component in the respective frames and when i try to add switching frame tap in interaction in the instance...it shows error. Like i can switch the screen but I can't play the micro interaction which i added in component
Thank you
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 th-cam.com/video/urLsjxShaIQ/w-d-xo.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 th-cam.com/video/urLsjxShaIQ/w-d-xo.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 😊