Undesign
Undesign
  • 50
  • 148 004
Figma Design System BEGINNER Guide + Variables (2024 Tutorial) - PART 2
In this video, we're going to be covering the basics of Figma - including how to create a basic user interface, how to create relationships between elements, and how to use variables.
If you're a beginner looking to get started with Figma, then this video is for you! By the end, you'll have a good understanding of the basics of Figma and be able to create basic user interfaces and relationships between elements.
Advanced Tutorial:
ua-cam.com/video/aLtGgVKIRow/v-deo.html
#figma #figmavariables #Figmadesignsystem #designsystem #figmabeginner #designsystembeginner
Переглядів: 3 779

Відео

Figma Design System BEGINNER Guide + Variables (2024 Tutorial) - PART 1
Переглядів 16 тис.9 місяців тому
In this video, we're going to be covering the basics of Figma - including how to create a basic user interface, how to create relationships between elements, and how to use variables. If you're a beginner looking to get started with Figma, then this video is for you! By the end, you'll have a good understanding of the basics of Figma and be able to create basic user interfaces and relationships...
Supercharge Your Design Workflow: 10 Figma Shortcuts for Speedy Pros
Переглядів 4439 місяців тому
In this quick video, we're going to show you 10 Figma shortcuts that will help you design faster. Whether you're a beginner or a pro, these shortcuts will help you speed up your work process dramatically. This video is a must-watch if you're looking to speed up your design process and increase your productivity. With these tips, you'll be able to design faster and with more accuracy than ever b...
Creating Stunning Text Slide Hover Animation in Figma: Expert Tips & Tricks
Переглядів 1,4 тис.10 місяців тому
In this video, we're going to show you how to create a stunning text slide hover animation in Figma. We're going to use variables and auto layout to create the animation automatically, and we'll use Figma's design system to create the look and feel of the animation. If you're looking to create a stunning text slide hover animation in Figma, then this video is for you! We'll show you how to use ...
Mastering Auto-layout, Variants, & More: Figma's Cool Button Hover Animation
Переглядів 98910 місяців тому
In this video, we're going to look at how to create a cool button hover animation using Figma's auto layout and variants features. Auto layout is a great way to ensure your designs look consistent across different devices and browsers. By using variants, you can account for different device sizes and orientations, which makes your designs look even better. In this video, we'll show you how to c...
Master Dynamic Prototyping in Figma: All About Boolean Variables
Переглядів 6 тис.10 місяців тому
In this video, we'll learn all about dynamic prototyping in Figma. We'll start by creating a simple Boolean variable, and then we'll explore some of the different set variables and auto layout options in Figma. We'll also look at how to use animations to create interactive prototypes. By the end of this video, you'll have a clear understanding of how to use dynamic prototyping in Figma, and you...
Level Up Your Design System with Button Transitions in Figma: A Step-by-Step Tutorial
Переглядів 44310 місяців тому
In this tutorial, we're going to be using the Figma design system to create a simple button transition. We'll be covering everything from creating your design, to setting up your animation, to applying auto layout. If you're looking to level up your design skills, then this tutorial is for you! By the end of this video, you'll have a better understanding of how to use the Figma design system, a...
Color & Number Scoping in Figma Variables - Step by Step Guide to Design Systems
Переглядів 1,3 тис.10 місяців тому
Source file available on Figma Community: www.figma.com/community/file/1264199181791057996 Learn how variable scoping works on Figma, this was released couple of days ago and it's a super cool new feature added to variables to make your job even easier than it was. Whether you're a Figma enthusiast or a design professional, this step-by-step guide will equip you with the skills to enhance your ...
Unlock Figma's Potential: Learn to Create an Incredible Cursor Follow Animation Effect (No Plugins)
Переглядів 12 тис.11 місяців тому
In this video, I'm going to show you how to create an incredible cursor follow animation effect using absolutely no plugins! This effect is perfect for creating flashy designs, website effects, and more! If you're looking to improve your design skills or take your animation skills to the next level, then this is the video for you! In this tutorial, I'll show you how to create an incredible curs...
Design System Mastery: Step-by-Step Guide to Responsive Input Suggestion Boxes in Figma
Переглядів 58511 місяців тому
Do you ever find yourself frustrated when designing with content in Figma? Maybe you need to add an input suggestion box, but you don't know how to do it properly. In this video, we'll be taking a look at the step-by-step process for creating responsive input suggestion boxes in Figma. By the end of this video, you'll be able to create perfect input suggestion boxes in Figma, no matter what the...
Designing Button Groups in Figma using Auto-Layout & Variants: Step-by-Step Guide to Design System
Переглядів 1,7 тис.11 місяців тому
Source file available on Figma Community: www.figma.com/community/file/1264199181791057996 Discover the creation of Button Groups in our latest Figma tutorial! In this video, we'll guide you through the process of designing sleek and functional Button Groups that enhance the user experience of your interfaces. Learn how to create organized and visually appealing button arrangements using Varian...
Create stunning alerts with Figma: Harnessing variants and variables
Переглядів 77711 місяців тому
In this video, we'll be exploring how to use Figma'svariables and variants to create stunning alerts. By using Figma'svariables and variants, we'll be able to create beautiful and unique alerts that correspond to our design system. Not only will this video help you create stunning alerts, but it will also help you understand how Figma'svariables and variants work. By the end of this video, you'...
Creating Responsive Text Area Fields in Figma: Auto Layout, Variants - A Step-by-Step Guide
Переглядів 2,2 тис.11 місяців тому
Source file available on Figma Community: www.figma.com/community/file/1264199181791057996 How to create input components: ua-cam.com/video/vz_qSeuxgjs/v-deo.html How to create dropdown components: ua-cam.com/video/9YPwaosVkho/v-deo.html Timestamps: 0:00 - Introduction 1:34 - Creating the Textarea 8:15 - Setting the Dimensions for the Text Content 9:01 - Testing the Component #Figma #TextArea #...
Designing with Figma: Discover the Power of Variants and Variables for Dynamic Rating Bars
Переглядів 41011 місяців тому
In this video, we're going to learn about the power of Variants and Variables in Figma for designing dynamic rating bars. By using Variants and Variables, we'll be able to create dynamic rating bars that are suited for different types of user input. If you're looking to start designing with Figma, then this video is for you! We'll be learning about the power of Variants and Variables, and how t...
Creating Advanced Breadcrumbs in Figma: A Comprehensive Guide using Variables & Nested Instances
Переглядів 1,7 тис.11 місяців тому
Creating Advanced Breadcrumbs in Figma: A Comprehensive Guide using Variables & Nested Instances
Creating Accordion Component in Figma: Harnessing Variables, Variants, Boolean, and Auto Layout
Переглядів 4,1 тис.11 місяців тому
Creating Accordion Component in Figma: Harnessing Variables, Variants, Boolean, and Auto Layout
Design Like a Pro: Mastering Facepile Components using Figma's Auto Layout
Переглядів 33611 місяців тому
Design Like a Pro: Mastering Facepile Components using Figma's Auto Layout
Designing Dynamic Avatars with Labels in Figma: Step-by-Step Guide to Design System
Переглядів 63511 місяців тому
Designing Dynamic Avatars with Labels in Figma: Step-by-Step Guide to Design System
Unleash Your Creativity: Crafting Dynamic Avatars in Figma with Variables
Переглядів 1,6 тис.11 місяців тому
Unleash Your Creativity: Crafting Dynamic Avatars in Figma with Variables
Discover the Power of Variants in Designing a Rich Status Component
Переглядів 362Рік тому
Discover the Power of Variants in Designing a Rich Status Component
Master Figma's Advanced Tag UI with Auto Layout & Variables
Переглядів 1,2 тис.Рік тому
Master Figma's Advanced Tag UI with Auto Layout & Variables
Design System Magic: Creating a Toggle Counter in Figma Made Easy via Variables
Переглядів 934Рік тому
Design System Magic: Creating a Toggle Counter in Figma Made Easy via Variables
Design Systems Made Easy: Master Automatic Dark Mode with Figma Variables
Переглядів 1,8 тис.Рік тому
Design Systems Made Easy: Master Automatic Dark Mode with Figma Variables
Advanced Toggle/Switch Components in Figma: Variants & Auto Layout - A Step-by-Step Guide
Переглядів 1,4 тис.Рік тому
Advanced Toggle/Switch Components in Figma: Variants & Auto Layout - A Step-by-Step Guide
Elevate Your Figma Skills: Exploring Variants & Auto Layout in Advanced Radio Inputs
Переглядів 402Рік тому
Elevate Your Figma Skills: Exploring Variants & Auto Layout in Advanced Radio Inputs
Advanced Checkbox Components in Figma Part 2: Variants & Auto Layout - A Step-by-Step Guide
Переглядів 780Рік тому
Advanced Checkbox Components in Figma Part 2: Variants & Auto Layout - A Step-by-Step Guide
Advanced Checkbox Components in Figma Part 1: Variants & Auto Layout - A Step-by-Step Guide
Переглядів 1,3 тис.Рік тому
Advanced Checkbox Components in Figma Part 1: Variants & Auto Layout - A Step-by-Step Guide
Creating Dropdown Inputs in Figma: A Step-by-Step Guide
Переглядів 787Рік тому
Creating Dropdown Inputs in Figma: A Step-by-Step Guide
Refining Input Fields in Figma Part 3: The Underlined Input - A Step-by-Step Guide
Переглядів 652Рік тому
Refining Input Fields in Figma Part 3: The Underlined Input - A Step-by-Step Guide
Enhancing Input Fields in Figma Part 2: Sizes & States - A Step-by-Step Guide
Переглядів 1,4 тис.Рік тому
Enhancing Input Fields in Figma Part 2: Sizes & States - A Step-by-Step Guide

КОМЕНТАРІ

  • @merveimamoglu4264
    @merveimamoglu4264 10 днів тому

    The video was very helpful, thank you ✨

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

    Thanks for the class. Was very helpful

  • @blackshirtdesign
    @blackshirtdesign 18 днів тому

    This waste of time had NOTHING to do with variables! This was a bunch of variants. Not cool man. Not cool.

  • @lillylightlove4229
    @lillylightlove4229 20 днів тому

    Very done

  • @yamilafritzler1224
    @yamilafritzler1224 21 день тому

    it's unclear to me if the tokens you created for spacing here are global or alias. Don't you need to crate first the global tokens with raw values and then add a semantic name and create an alias token that is attached to that raw value in the global tokens?

  • @solomonlasun1409
    @solomonlasun1409 25 днів тому

    This is nice effect but how doable is this for a developer?

  • @EddieWebb-m6x
    @EddieWebb-m6x 25 днів тому

    Thanks, really useful. Pointed out some things that other miss, like setting the text line height to 24px, which is what was wrong with my solo attempt.

  • @user-wl6zm5rz7q
    @user-wl6zm5rz7q 26 днів тому

    thank u!)

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

    Thanks 👍

  •  Місяць тому

    Thanks ! Precise, concise & clear = the best to teach

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

    OMG

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

    Awesome video! Do you know if these work with modes as well? Say, I want to make desktop tablet and mobile spacings with tokens, and of course to set different values for each 🤔

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

    Plz make a vedio on mobile wireframe

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

    Great video! I was following you step by step and made the same mistake with the corner radius deselect on spacing tokens.. I just selected them all -> right clicked and selected edit variable -> and deselected the corner radius checkbox. 👍

  • @user-du7gp2cz8e
    @user-du7gp2cz8e 2 місяці тому

    Very interesting, but I can't believe you didn't test the accordion in presentation mode, lol!

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

    8:23, i don't have the option to apply variable. Only 10 (current value) and auto are the ones I can use. Any idea on how to fix that ?

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

    I did everything like you, but it's not responsive for me

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

      Make sure the width is set to “Fill container”

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

    Great video, you saved me so much time. Although I have a list view with 30 items. I am not sure if there is a simpler way to execute it.

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

    Love from Bangladesh bro❤

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

    Can I get this figma file, Please?❤

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

    Thank you!!!!

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

    Amazing video, exactly what I was looking for. Thank you very much!

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

    anyone know if there's a shortcut to edit color scope for multiple items at once?

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

      Unfortunately there is no way to do it and its insane! We should submit a request

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

    I'm following along these videos and I'm a little confused by this one. Why not just use the input you just created without naming it Dropdown? You can remove the right icon and then change the left icon to be the dropdown arrow. I'm also a little disappointed you didn't actually go over the dropdown being *opened* with variables on dropdown states.

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

    I'm following along and really liking the design system series. As I'm learning more I'm realizing that you can just create a boolean for the help text, the icons and the placeholder text to hide them with a toggle instead of creating variants for them. What are your thoughts on booleans? Would you consider recreating the series since that update?

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

    Amazing place to learn Figma ❤❤

  • @Elyx-zu2kg
    @Elyx-zu2kg 4 місяці тому

    Hi. Is it possible to have a hover effect on the options?

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

      Yes, Here are the steps: 1) Create hover state for every item in the list.(All, Vegetables, Fruits) 2) Create a hover state using interactions or Create a new condition which assigns the Boolean states as true and false depending on the current state.

  • @NIRJHARRAY-pm1zg
    @NIRJHARRAY-pm1zg 4 місяці тому

    can this be talen to framer to build the actual website?

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

    Thank you so much Sir

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

    Really good

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

    Awesome thanks so much. Most helpful : )

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

    Can you make video for input chips in design system for figma???

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

    Hello! Amazing videos!! I have a question: Is there a formula to choose the right line height? I kind of mess up when choosing it. 😔 Thank you very much!!

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

    There is no file in the description for duplication. Can i get it one please!

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

    Loved this , Nice work.

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

    Thank you for the video! These values can be used for websites too or is just for apps?

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

    Thanks Brother. You are the bset

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

    keep doing

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

    Awesome please keep doing those, its very well explained and easy to follow👍

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

    Keep doing those please! thanks

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

    how did u add that label ?

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

    so we dont have to create number tokens (like color tokens) in primitives?

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

    why didnt y9u give any padding for check box items or checkboxes ? is it not necessary ?

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

    i am not able to selct all with same properties when making changes to sizes etc.. as all of them in that frame are being selected (like if i want to increase size of text on large buttons ) whats the fix for this

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

    can you do prototyping with variables course with live examples

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

    Evrrything worked well except the icons are overlapping (when justified ) when the botton size changes .. can you tell me fix fror this ?

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

    after you did primary , how did you duplicate to create the rest of colors , did you do this manually or is ther an easier way of duplicating when assigning variables?

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

    why did you have multiple text/icons shades under grey scale , but for all the rest there is only one text/icon color , Can you tell me your reasoning for doing it this way ?

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

      please answer, i think we all would like some context

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

    can you create more components with properties

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

    please do a course on building all components (as per IOS/ MATERIAL GUIDELINES)with properties for design system using figma