Mindesigning
Mindesigning
  • 43
  • 256 420
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"
Переглядів: 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
Expert Guide to Figma Organization
Переглядів 8 тис.Рік тому
Expert Guide to Figma Organization
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

КОМЕНТАРІ

  • @ЮлияКузнецова-к7у

    Amazing approach, super helpful, thank you a lot!

  • @amirataha4952
    @amirataha4952 11 днів тому

    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.

  • @leyetemi
    @leyetemi 15 днів тому

    Thank you for this

  • @thallesrigobello
    @thallesrigobello 15 днів тому

    Se esse sotaque não for de Brasileiro não sei mais nada

  • @igorgardini
    @igorgardini 22 дні тому

    Thanks man! That's exaclty what I was looking for!

  • @paulinho5155
    @paulinho5155 22 дні тому

    helped me a lot sir thanks

  • @KannanC-z7d
    @KannanC-z7d Місяць тому

    Excellent ! in 5 min you taught me a lot

  • @nicodishiznit
    @nicodishiznit Місяць тому

    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.

    • @mindesigning5468
      @mindesigning5468 Місяць тому

      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

  • @tomaslanzarini3155
    @tomaslanzarini3155 Місяць тому

    Brs sempre salvando! :)

  • @senoritanata7174
    @senoritanata7174 2 місяці тому

    When I type ARC- I see NOTHING

    • @mindesigning5468
      @mindesigning5468 Місяць тому

      www.figma.com/community/plugin/762070688792833472/arc-bend-your-type

  • @corruptedapk5129
    @corruptedapk5129 2 місяці тому

    This approach wouldn't work if I have a cell that spans 2 rows or columns

  • @Digital_Paola
    @Digital_Paola 2 місяці тому

    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

  • @stacybeen3771
    @stacybeen3771 2 місяці тому

    great! thanks a lot!!!

  • @suniljadhav1889
    @suniljadhav1889 2 місяці тому

    Great help...Thanx

  • @suniljadhav1889
    @suniljadhav1889 2 місяці тому

    Really helpful...Thanx

  • @PUK1SVA
    @PUK1SVA 2 місяці тому

    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.

    • @mindesigning5468
      @mindesigning5468 2 місяці тому

      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

  • @jalengonel
    @jalengonel 3 місяці тому

    You saved me so many hours. I can't believe i did this manually before. You are amazing!

  • @genevieveanyanwu440
    @genevieveanyanwu440 3 місяці тому

    Very very helpful Thank you

    • @mindesigning5468
      @mindesigning5468 3 місяці тому

      @@genevieveanyanwu440 Happy to help! Stay tuned and share it away 🙂

    • @mindesigning5468
      @mindesigning5468 3 місяці тому

      @@genevieveanyanwu440 happy to help! Stay tuned and share it away

  • @timknight4186
    @timknight4186 3 місяці тому

    Thank you :) I have been trying to work this out for a loooong time.

    • @mindesigning5468
      @mindesigning5468 3 місяці тому

      @@timknight4186 happy to help! Share it away

  • @dongshenli2628
    @dongshenli2628 3 місяці тому

    1:29 you jumped straight into having frame 5 expanded to the whole frame without explain how that was done

  • @dongshenli2628
    @dongshenli2628 3 місяці тому

    I think you missed explaining one step

  • @dongshenli2628
    @dongshenli2628 3 місяці тому

    I wonder why mine is not working, the subjects were not shrinking whilst the sidebar expands

    • @dongshenli2628
      @dongshenli2628 3 місяці тому

      Oh got it, my “fill the container” was not properly set

  • @Dupdopy
    @Dupdopy 3 місяці тому

    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 =)

  • @dumpsterraccon1211
    @dumpsterraccon1211 3 місяці тому

    Is possible do this with multiple elements?

  • @troostmarco
    @troostmarco 3 місяці тому

    Doesn't work for me...

  • @Toodoi
    @Toodoi 3 місяці тому

    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.

    • @marinetg
      @marinetg 2 місяці тому

      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.

    • @mindesigning5468
      @mindesigning5468 22 дні тому

      You are not actually using a drag interaction, you're scrolling the frame, and that gives a sense of dragging

  • @CBConstruction-v5c
    @CBConstruction-v5c 4 місяці тому

    Thanks man!

  • @3rdtwirl494
    @3rdtwirl494 4 місяці тому

    Is it flattened ?

  • @ricardodesirat2590
    @ricardodesirat2590 4 місяці тому

    Great video! One tip back.. if you press "s" while dragging some element, it won't snap to anything. Great for fine tuning.

  • @SehrishMoujahid
    @SehrishMoujahid 4 місяці тому

    man you earn a subscriber

  • @fidibspgaming4428
    @fidibspgaming4428 4 місяці тому

    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

  • @bruhmoment3731
    @bruhmoment3731 4 місяці тому

    it's baffling to me how a program with such bad UX is the industry standard

  • @cp3onmtv963
    @cp3onmtv963 4 місяці тому

    Great tutorial! Simple and straight to the point. Subscribed!

  • @cp3onmtv963
    @cp3onmtv963 4 місяці тому

    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

    • @mindesigning5468
      @mindesigning5468 4 місяці тому

      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

  • @forhao
    @forhao 4 місяці тому

    Thank you for showing the worst plugin and wasting my time

  • @irisgreen9184
    @irisgreen9184 5 місяців тому

    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?

    • @mindesigning5468
      @mindesigning5468 5 місяців тому

      @@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)

  • @robertuscahyomartanto122
    @robertuscahyomartanto122 5 місяців тому

    Thank you this is so help full

  • @richardbanks8778
    @richardbanks8778 5 місяців тому

    You're amazing man

  • @SP-xx7ul
    @SP-xx7ul 5 місяців тому

    Should not the text (body) be aligned with each grid?

  • @guilttrip2978
    @guilttrip2978 5 місяців тому

    Thank you so much, that was exactly what I was looking for. You safed a design students pre-diploma with this video!

  • @elisauiloa2161
    @elisauiloa2161 5 місяців тому

    Thanks for the best tutorial for tables ever!

  • @gizemusta8393
    @gizemusta8393 5 місяців тому

    you are the best!

  • @ImaN8tcat
    @ImaN8tcat 6 місяців тому

    My components just don't work at all. Checked everything, reinstalled figma. So frustrating.

    • @mindesigning5468
      @mindesigning5468 6 місяців тому

      Hey. What exactly you're trying to do?

    • @ImaN8tcat
      @ImaN8tcat 6 місяців тому

      @@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!

    • @mindesigning5468
      @mindesigning5468 5 місяців тому

      @@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

    • @ImaN8tcat
      @ImaN8tcat 5 місяців тому

      @@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

  • @ibrahimelshazly4888
    @ibrahimelshazly4888 6 місяців тому

    Well how do i get it back

  • @PeiFamily-M
    @PeiFamily-M 6 місяців тому

    Thanks ❤

  • @ufufu001
    @ufufu001 6 місяців тому

    thank you so much my king. this is really good

  • @laptopworm23
    @laptopworm23 6 місяців тому

    THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU I have been searching for this for a realllyyy long time

  • @MAORRR
    @MAORRR 6 місяців тому

    Thank you! Appreciate it a lot

  • @leylamusazade97
    @leylamusazade97 6 місяців тому

    Thank u very much, you explained it very easy but i cant add this video to my playlist, why?

    • @mindesigning5468
      @mindesigning5468 5 місяців тому

      You should be able to do it just fine. Hit the save button and select the desired playlist

  • @Kaze70707
    @Kaze70707 6 місяців тому

    This is much better explanation than my mentor in bootcamp 😢.