DesignCoach
DesignCoach
  • 78
  • 170 127
How to Create Reusable Border Radius Variables in Figma #Figma #DesignTips #uiux
Learn how to create and use reusable border radius variables in Figma to streamline your design process and maintain consistency across your projects.
Discover how to enhance your design workflow in Figma by creating reusable border radius variables. In this tutorial, we'll guide you through the steps to set up and apply these variables, ensuring consistent and efficient design elements across your projects. Perfect for designers looking to streamline their process and maintain uniformity in their work.
Subscribe for more Figma tips and tutorials! #Figma #DesignTips #UIUX #BorderRadius
🔔 Don't forget to like, comment, and subscribe for more design tutorials!
Переглядів: 471

Відео

Creating Spacing Variables in Figma for Consistent Design #figma #figmatutorial
Переглядів 7978 місяців тому
In this tutorial, we'll explore the essential process of creating spacing variables in Figma to enhance design consistency within your projects. Design systems rely on maintaining uniformity, and spacing variables play a crucial role in achieving this. This tutorial aims to equip you with the knowledge needed to create and leverage spacing variables effectively in your Figma design workflow. Ha...
Figma Tutorial: How to apply color Variables in figma? #figma #figmaforbeginners
Переглядів 6349 місяців тому
Figma Tutorial: How to apply color Variables in figma? #figma #figmaforbeginners
How to use absolute positioning in Figma like a pro #figma #figmatutorial
Переглядів 8 тис.Рік тому
How to use absolute positioning in Figma like a pro #figma #figmatutorial
Beginner's Guide to Figma: Creating Auto Layout Toast Components
Переглядів 801Рік тому
Beginner's Guide to Figma: Creating Auto Layout Toast Components
How to use Figma Bootstrap 5 UI kit Navbar Components?
Переглядів 6 тис.Рік тому
How to use Figma Bootstrap 5 UI kit Navbar Components?
How to use button variant in bootstrap UI kit
Переглядів 844Рік тому
How to use button variant in bootstrap UI kit
Avatar UI Design in Figma Components using variant features. #figma #uidesign
Переглядів 1,1 тис.Рік тому
Avatar UI Design in Figma Components using variant features. #figma #uidesign
How to Create a Profile Card UI Design - Figma Tutorial
Переглядів 2,6 тис.2 роки тому
How to Create a Profile Card UI Design - Figma Tutorial
Figma Tutorial for Components Testimonial Design
Переглядів 7892 роки тому
Figma Tutorial for Components Testimonial Design
Figma Tutorial for E-Commerce Product Cards Using AutoLayout
Переглядів 4,9 тис.2 роки тому
Figma Tutorial for E-Commerce Product Cards Using AutoLayout
How to create a sidebar navigation in Figma? Tutorial
Переглядів 2,4 тис.2 роки тому
How to create a sidebar navigation in Figma? Tutorial
How to Design Bootstrap List Group in Figma UI Design
Переглядів 7522 роки тому
How to Design Bootstrap List Group in Figma UI Design
How to Create Bootstrap Navigation Menu Bar - Figma Tutorial
Переглядів 3,3 тис.3 роки тому
How to Create Bootstrap Navigation Menu Bar - Figma Tutorial
Designing The Perfect Accordion UI Design in Figma
Переглядів 28 тис.3 роки тому
Designing The Perfect Accordion UI Design in Figma
How to design a modal components in Figma?
Переглядів 8 тис.3 роки тому
How to design a modal components in Figma?
How to Design Pagination in Figma UI Design Tool
Переглядів 7 тис.3 роки тому
How to Design Pagination in Figma UI Design Tool
How to design button group in Figma UI Design Tool
Переглядів 2,5 тис.3 роки тому
How to design button group in Figma UI Design Tool
Vertical Menu UI Design for User Experience and Appealing looks
Переглядів 6883 роки тому
Vertical Menu UI Design for User Experience and Appealing looks
How to design a Notification UI design in Figma with Auto Layout?
Переглядів 11 тис.3 роки тому
How to design a Notification UI design in Figma with Auto Layout?
How to design dropdown UI components in Figma UI Design Tool [Hindi]
Переглядів 16 тис.4 роки тому
How to design dropdown UI components in Figma UI Design Tool [Hindi]
How to design badge components in Figma UI Design Tool?
Переглядів 1,8 тис.4 роки тому
How to design badge components in Figma UI Design Tool?
How to Design Complex Profile Card in Figma Auto Layout - UI Designer
Переглядів 1,4 тис.4 роки тому
How to Design Complex Profile Card in Figma Auto Layout - UI Designer
UI Designer’s guide to Create Form Inputs Component in Figma [Hindi]
Переглядів 12 тис.4 роки тому
UI Designer’s guide to Create Form Inputs Component in Figma [Hindi]
How to Create Flexible Buttons + Icon in Figma UI Design
Переглядів 12 тис.4 роки тому
How to Create Flexible Buttons Icon in Figma UI Design
How to Create Flexible Button in Figma UI Design tool
Переглядів 3744 роки тому
How to Create Flexible Button in Figma UI Design tool
Create a Repeatable Typography Styles in Figma Tutorial
Переглядів 3044 роки тому
Create a Repeatable Typography Styles in Figma Tutorial
How Color Work in Design System - Creating Figma Styles
Переглядів 4074 роки тому
How Color Work in Design System - Creating Figma Styles
Login & Register Page using 8pt Grid System - Figma Tutorial
Переглядів 1,5 тис.4 роки тому
Login & Register Page using 8pt Grid System - Figma Tutorial
How to Build Design System - UI Design
Переглядів 8664 роки тому
How to Build Design System - UI Design

КОМЕНТАРІ

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

    Great video! Question: let‘s say I would like different spacing between elements within this card. Since Figma is not allowing me to distribute different spacing between them, I was wondering how you do that? I have been handling it for now by placing elements in another autolayout (nested autolayouts). What‘s your process? best Niko

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

      please share the screenshot of example ?

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

    Designed in figma ?

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

    how to set its z index? how to do it behind the bell?

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

    Thank you! That helps me a lot!

  • @mhobabs
    @mhobabs 11 місяців тому

    thank you for the video 👏

  • @cheruiyotemmanuel2676
    @cheruiyotemmanuel2676 Рік тому

    Can i export to code? Or its just for design

    • @DesignCoach
      @DesignCoach Рік тому

      For now, this is the only design.

  • @rubenmunozaragon
    @rubenmunozaragon Рік тому

    Congratulations

  • @flanshgajbhiye4259
    @flanshgajbhiye4259 Рік тому

    real time usage batana bhul gai app :(

    • @DesignCoach
      @DesignCoach Рік тому

      Thank you, we try for the next sure.

  • @learningstuff5679
    @learningstuff5679 Рік тому

    These Nav Bar components aren't in the Figma file?

    • @DesignCoach
      @DesignCoach Рік тому

      Yes, You can download it from the Figma Community, But we created it for only learning purposes. With Nav Components example of Bootstrap which in Bootstrap UI kit. We just made a How to Use It video, for this Thank you. www.figma.com/community/file/876022745968684318/Bootstrap-UI-Kit

  • @akhileshbhalerao6908
    @akhileshbhalerao6908 Рік тому

    Nice explanation thanks a lot

  • @ritikakumari8573
    @ritikakumari8573 Рік тому

    well explained

  • @hoangphat5979
    @hoangphat5979 Рік тому

    Hello, i'm stuck around 11:24. I can't bring the heart to display on the picture. They keep running outside.

  • @cleopatra3933
    @cleopatra3933 Рік тому

    stop making videos you dont know how to teach, please just stop!

  • @tushar_parab
    @tushar_parab Рік тому

    ek k niche ek aise 4 dropdown selection questions kaise banayenge? (overlap nai hona chahiye koi bhi dropdown, dynamically adjust hona chahiye sare ek ke niche ek aise) please share this video.

  • @cornhell05
    @cornhell05 2 роки тому

    ::insert prayer hands:: thanks, I am subscribing now

  • @fnk100
    @fnk100 2 роки тому

    My Figma doesn't have resizing 🤧

  • @rashidaabdulrashid6421
    @rashidaabdulrashid6421 2 роки тому

    I don't understand Hindi but I still learnt from this video by watching, thank you. 😁👏

  • @landon2367
    @landon2367 2 роки тому

    🄿🅁🄾🄼🄾🅂🄼 😄

  • @abhishekchaurasiya6192
    @abhishekchaurasiya6192 2 роки тому

    ❤️❤️

  • @amanmalviya8674
    @amanmalviya8674 2 роки тому

    awaz bahut kam h

    • @DesignCoach
      @DesignCoach 2 роки тому

      Thank you for your feedback, We improve for sure. 🙂

  • @YTGrowthhindi
    @YTGrowthhindi 2 роки тому

    Plz be more consistent, your videos are awesome

  • @MrSidverse
    @MrSidverse 2 роки тому

    Nice explanation man, keep it up 🙌

  • @danibae238
    @danibae238 2 роки тому

    Very thorough step-by-step explanation! I felt like I was following a demonstration in a classroom setting :D

  • @Armandot6
    @Armandot6 2 роки тому

    What's the solution for getting rid of the double line (border) between the body container and the header/footer?

  • @palakkhandelwal886
    @palakkhandelwal886 2 роки тому

    Great video! Can you also show the prototype please?

  • @drdevangpatel7646
    @drdevangpatel7646 2 роки тому

    Best 👍💯% ajay graphics

  • @honestexposure2295
    @honestexposure2295 2 роки тому

    Great sir

  • @kittymancy
    @kittymancy 2 роки тому

    Thank you! This is amazing for my design handoffs! :)

  • @alebarros2104
    @alebarros2104 2 роки тому

    Thank you for sharing this! very cool the way you explain each step, very nice.

  • @darabumdarabum
    @darabumdarabum 2 роки тому

    Came here for the prototype, wasn't in the video :/

  • @shedrackthomas6505
    @shedrackthomas6505 2 роки тому

    Boring, no prototype to show if its working

  • @calvinogood
    @calvinogood 2 роки тому

    3:44, we can use Space Between in Auto Layout.

  • @modupekay
    @modupekay 2 роки тому

    This was very helpful. Created my first modal, thank you.

  • @AdrianoReisDesign
    @AdrianoReisDesign 3 роки тому

    Great tutorial!! and this is exactly how i made accordions before but have you seen the latest Auto Layout update? It's now possible to prototype the different states of the accordion with only one interactive component! I got inspired and made my first Figma tutorial about it: ua-cam.com/video/IHgaG6_asjg/v-deo.html

  • @BigBlackCrypto
    @BigBlackCrypto 3 роки тому

    Audio is too low

    • @DesignCoach
      @DesignCoach 3 роки тому

      We try to improve more quality in video. Thank you

  • @francoferraris3298
    @francoferraris3298 3 роки тому

    no entendí nada pero me salió, gracias crack

  • @banotv6719
    @banotv6719 3 роки тому

    please share this design prototype

  • @AndreMurrell
    @AndreMurrell 3 роки тому

    Works great thank you! The only thing is that you're going to have double strokes on the horizontal divider lines if you have '0' spacing between titles and body. Does that not need to be -1?

    • @AndreMurrell
      @AndreMurrell 3 роки тому

      infact it can't be -1 because the autolayout wont work then. So how do you get around that?

    • @MizarXI
      @MizarXI 2 роки тому

      @@AndreMurrell One way to do this: Create a divider as a single line to the bottom of each accordion and set the width to fill container as well. Add radius and border around the accordion group. Hide the extra divider on the last accordion of the group.

  • @Gollunsss
    @Gollunsss 3 роки тому

    How Can I animate this?

  • @madhurinavare7630
    @madhurinavare7630 3 роки тому

    neatly Explained

  • @annatingdahl7431
    @annatingdahl7431 3 роки тому

    Perfect, you did well.. And I am so happy.

  • @visheshgour
    @visheshgour 3 роки тому

    prototyping ?

  • @alquinnaa
    @alquinnaa 3 роки тому

    tahkns budy

  • @agentsmith8434
    @agentsmith8434 3 роки тому

    Great thank you!

  • @rameshkandhan3902
    @rameshkandhan3902 3 роки тому

    Can you show me how to do in ui basis like using via html and css

  • @007kishorekumar6
    @007kishorekumar6 3 роки тому

    Verty low sound

    • @DesignCoach
      @DesignCoach 3 роки тому

      Thank you for your comment. We improve more in the next video. thank you.

  • @jonathanmontalvo127
    @jonathanmontalvo127 3 роки тому

    Thank you!!

  • @behringbob
    @behringbob 3 роки тому

    I'm completely new to figma coming from classic photoshop. It makes me speechless what this tool can do in terms of GUI design. Thanks for the tutorial.

  • @sahidulislamjony5769
    @sahidulislamjony5769 3 роки тому

    I learnt a lot of things from this video