Undesign
Undesign
  • Видео 50
  • Просмотров 192 452
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:
ruclips.net/video/aLtGgVKIRow/видео.html
#figma #figmavariables #Figmadesignsystem #designsystem #figmabeginner #designsystembeginner
Просмотров: 4 902

Видео

Figma Design System BEGINNER Guide + Variables (2024 Tutorial) - PART 1
Просмотров 20 тыс.Год назад
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
Просмотров 513Год назад
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,9 тыс.Год назад
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
Просмотров 1,2 тыс.Год назад
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
Просмотров 9 тыс.Год назад
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
Просмотров 504Год назад
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,6 тыс.Год назад
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)
Просмотров 16 тыс.Год назад
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
Просмотров 713Год назад
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
Просмотров 2,4 тыс.Год назад
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
Просмотров 1 тыс.Год назад
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
Просмотров 3,1 тыс.Год назад
Source file available on Figma Community: www.figma.com/community/file/1264199181791057996 How to create input components: ruclips.net/video/vz_qSeuxgjs/видео.html How to create dropdown components: ruclips.net/video/9YPwaosVkho/видео.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
Просмотров 496Год назад
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
Просмотров 2,2 тыс.Год назад
Creating Advanced Breadcrumbs in Figma: A Comprehensive Guide using Variables & Nested Instances
Creating Accordion Component in Figma: Harnessing Variables, Variants, Boolean, and Auto Layout
Просмотров 5 тыс.Год назад
Creating Accordion Component in Figma: Harnessing Variables, Variants, Boolean, and Auto Layout
Design Like a Pro: Mastering Facepile Components using Figma's Auto Layout
Просмотров 401Год назад
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
Просмотров 862Год назад
Designing Dynamic Avatars with Labels in Figma: Step-by-Step Guide to Design System
Unleash Your Creativity: Crafting Dynamic Avatars in Figma with Variables
Просмотров 2,2 тыс.Год назад
Unleash Your Creativity: Crafting Dynamic Avatars in Figma with Variables
Discover the Power of Variants in Designing a Rich Status Component
Просмотров 434Год назад
Discover the Power of Variants in Designing a Rich Status Component
Master Figma's Advanced Tag UI with Auto Layout & Variables
Просмотров 1,5 тыс.Год назад
Master Figma's Advanced Tag UI with Auto Layout & Variables
Design System Magic: Creating a Toggle Counter in Figma Made Easy via Variables
Просмотров 1,1 тыс.Год назад
Design System Magic: Creating a Toggle Counter in Figma Made Easy via Variables
Design Systems Made Easy: Master Automatic Dark Mode with Figma Variables
Просмотров 2,4 тыс.Год назад
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,9 тыс.Год назад
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
Просмотров 434Год назад
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
Просмотров 933Год назад
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,7 тыс.Год назад
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
Просмотров 1 тыс.Год назад
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
Просмотров 738Год назад
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,7 тыс.Год назад
Enhancing Input Fields in Figma Part 2: Sizes & States - A Step-by-Step Guide

Комментарии

  • @nishads7606
    @nishads7606 17 дней назад

    Hey, this is really useful. I just have a question, what if i wanted to add images or a table or someother deisgn element into the body of the accordion. How to create a instance swap keeping the deisgn system in reference.

  • @Ashwin2001_
    @Ashwin2001_ 17 дней назад

    Nobody cares if your videos are lengthy, you cut it up too much man

  • @Nothing-cx4jt
    @Nothing-cx4jt 24 дня назад

    Finally got the best figma resource the quality and topic I was looking for <3. Thanks so much.

  • @МаксимСліпенчук
    @МаксимСліпенчук 27 дней назад

    Thanks mate, especially for properties guide

  • @Ashwin2001_
    @Ashwin2001_ 28 дней назад

    Really appreciate this content man, super helpful!

  • @mathewtoogun8659
    @mathewtoogun8659 Месяц назад

    Thank you very much the material was very helpful

  • @Underhills
    @Underhills Месяц назад

    We need an AI engine to do this. It's just way too time consuming, over engineered and querky.

  • @Underhills
    @Underhills Месяц назад

    The preview function is terribly buggy in Figma. The image "trembles" when interacted with like demonstrated in this video. It doesn't cope with scaling and is way off with that, the text and other vector shapes skips a couple of pixels when you mouse over them or click. Most often I need to zoom inn at least 300% in order to see the vector shapes normal and to get rid of the trembling and artifacts and the shift skips on the typeface etc when previewed.

  • @hellsbell365
    @hellsbell365 Месяц назад

    this video is not clear

  • @hellsbell365
    @hellsbell365 2 месяца назад

    great video, nice way of explaining things, keep going

  • @YannickGarciaDelEstad
    @YannickGarciaDelEstad 2 месяца назад

    Very helpful! you've got a new suscbriber

  • @NickSouzaSantos
    @NickSouzaSantos 2 месяца назад

    Hello! Your videos are great and explanatory, I love that you have a "diagram" to help in creating variables, good job! Forgive me for my bad English, I'm using a translator because I'm from Brazil 😅

  • @MuhammadQasim-bu8lc
    @MuhammadQasim-bu8lc 2 месяца назад

    I am searching for a long term of time like this video which teaches me how to create a design system step by step.

  • @ranjnachauhan8248
    @ranjnachauhan8248 2 месяца назад

    This is the series that I always wanted. Thank you so much.

  • @lucagabino6588
    @lucagabino6588 3 месяца назад

    Please, continue to doing this type of videos!

  • @saadbashar7622
    @saadbashar7622 3 месяца назад

    Thanks for the video. I got this right, but the colour was the issue for me. I really don't know why it changed it to blue. What are the factors of the colour changes? Your own components changed to white, which is the inverse of black, but mine is gold and some other greyish elements.

  • @laxxai
    @laxxai 3 месяца назад

    Great! Thank you

  • @darkModeYT
    @darkModeYT 3 месяца назад

    What if I have 20 options? How many conditionals I will need to have? 20 factorial??

    • @Underhills
      @Underhills Месяц назад

      Figma is so over engineered it hurts 😵

  • @mohammad__adil
    @mohammad__adil 4 месяца назад

    Best one how made an entire course for design systems on youtube. I really appreciate your work, thank you man

  • @merveimamoglu4264
    @merveimamoglu4264 4 месяца назад

    The video was very helpful, thank you ✨

  • @anayantocj9808
    @anayantocj9808 4 месяца назад

    Thanks for the class. Was very helpful

  • @blackshirtdesign
    @blackshirtdesign 5 месяцев назад

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

  • @lillylightlove4229
    @lillylightlove4229 5 месяцев назад

    Very done

  • @yamilafritzler1224
    @yamilafritzler1224 5 месяцев назад

    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 5 месяцев назад

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

  • @EddieWebb-m6x
    @EddieWebb-m6x 5 месяцев назад

    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.

  • @ЮлияБайдак-ф8е
    @ЮлияБайдак-ф8е 5 месяцев назад

    thank u!)

  • @zoffikhan9600
    @zoffikhan9600 6 месяцев назад

    Thanks 👍

  •  6 месяцев назад

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

  • @thienquy_lee
    @thienquy_lee 6 месяцев назад

    OMG

  • @camilagiannini9021
    @camilagiannini9021 6 месяцев назад

    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 6 месяцев назад

    Plz make a vedio on mobile wireframe

  • @cintiapena1696
    @cintiapena1696 6 месяцев назад

    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. 👍

  • @younesselidrissi1501
    @younesselidrissi1501 7 месяцев назад

    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 7 месяцев назад

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

    • @undesign_
      @undesign_ 7 месяцев назад

      Make sure the width is set to “Fill container”

  • @designerdavid1
    @designerdavid1 7 месяцев назад

    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 8 месяцев назад

    Love from Bangladesh bro❤

  • @shifatmasud
    @shifatmasud 8 месяцев назад

    Can I get this figma file, Please?❤

  • @ohohohha
    @ohohohha 8 месяцев назад

    Thank you!!!!

  • @1980nikolov
    @1980nikolov 8 месяцев назад

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

  • @valeriacabellol
    @valeriacabellol 8 месяцев назад

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

    • @h-voltage
      @h-voltage 6 месяцев назад

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

  • @JessicaProhl
    @JessicaProhl 8 месяцев назад

    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 8 месяцев назад

    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 8 месяцев назад

    Amazing place to learn Figma ❤❤

  • @Elyx-zu2kg
    @Elyx-zu2kg 8 месяцев назад

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

    • @designerdavid1
      @designerdavid1 7 месяцев назад

      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 8 месяцев назад

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

  • @clipsdestroyer18
    @clipsdestroyer18 8 месяцев назад

    Thank you so much Sir

  • @carinesmoraes9116
    @carinesmoraes9116 9 месяцев назад

    Really good

  • @FuturaKreative55
    @FuturaKreative55 9 месяцев назад

    Awesome thanks so much. Most helpful : )

  • @abdomed2065
    @abdomed2065 9 месяцев назад

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