Ricardo Costa
Ricardo Costa
  • 183
  • 550 454
Dark mode Figma Variables
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec
In this video you will easily learn how to use color modes to make your designs in Light, Dark and other color modes.
Comment if you found this video helpful.
Watch these next videos
Color Variables: ua-cam.com/video/L-p2-2DoNPs/v-deo.html
Number Variables: ua-cam.com/video/9RbFlqOxn10/v-deo.html
Prototype with Variables: ua-cam.com/video/lhis2vgnR54/v-deo.html
Working file:
www.figma.com/community/file/1436797464868289531/light-dark-mode-prototype
Thanks for watching this video.
👉Notion: affiliate.notion.so/sj7rw7m77ye1
👉Subscribe Envato for unlimited downloads resources: 1.envato.market/zaNvOM
👉Try Adobe for free adobe.prf.hn/click/camref:1100luj8w
👉Host your website with Hostinger www.hostg.xyz/aff_c?offer_id=6&aff_id=151637
👉Tubebuddy - The ultimate UA-cam creators tool bit.ly/tubebuddyRicardo
Connect with me on social media
👉 Instagram ricardocosta.eu
👉 Facebook ricardocostadesigner
👉 Linkedin www.linkedin.com/in/ricardocostaeu
👉 Twitter: ricardocostaeu
👉 TikTok: tiktok.com/@ricardocosta.eu
#figmavariables #variables #figmaprototype
Переглядів: 430

Відео

Figma Variables - Color Variables prototype
Переглядів 356Місяць тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video I will share with you how you can improve your prototypes using color variables to design your websites, dashboards, SaaS. You don’t need to create multiple screens to exemplify one idea, you just need one frame and adjust all the variables and conditions to make everything ...
Figma variables - Number variables prototype
Переглядів 427Місяць тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video I will share with you how you can improve your prototypes using number variables to create counters for your websites, dashboards, SaaS. You don’t need to create multiple screens to exemplify one idea, you just need one frame and adjust all the variables and conditions to ma...
Figma Variables and Advanced Prototyping | Tutorial
Переглядів 1,1 тис.Місяць тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec Prototyping with variables can seem tricky, right? I’ve been there. But in this video, I’m going to break it down variables step by step, showing you how to prototype this thermometer. The best part? You can apply these same principles to any other component. You can use the file I’m work...
How to Remove Objects In Affinity Photo 2
Переглядів 9172 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec We’ve all been there-trying to remove unwanted objects in an image, and it looks unnatural. But with these simple adjustments, even complex edits can feel seamless. In this video, I'll show you how to use Affinity's Inpainting Brush Tool to quickly remove unwanted parts of any image. If y...
Figma Component Properties 2024
Переглядів 17 тис.2 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec The new Figma UI3 has changed the position of some actions. In this video let's cover that changes to create component properties. From text properties to boolean properties, we cover it all. Don't miss out on this essential Figma tutorial! Thanks for watching this video. 👉Notion: affilia...
How to export transparent png in Affinity Designer
Переглядів 8102 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec How to export transparent png in affinity designer? If you are struggling with PNG transparency, in this video you will know this simple step to add transparency into your designs. Thanks for watching this video. 👉Notion: affiliate.notion.so/sj7rw7m77ye1 👉Subscribe Envato for unlimited do...
How to Export GIFs in Figma
Переглядів 3003 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video let’s see a quick and simple way to export GIFs in Figma. Let’s work with these four screens that represent a change of word in a good vibes sentence. Are you feeling it? GIFs are a great way to showcase interactive designs or animations, and once you master this, your desig...
Design Principles - The Ultimate Guide 2024
Переглядів 4753 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video we will cover the key design principles to create better design work to your clients. If you're creating a website, app or any digital product I believe the information I will share will help you a lot. The ultimate guide to design principles. 0:00 Intro 0:42 Unity design pr...
What are the differences in UI/UX?
Переглядів 7423 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video, we’ll break down the confusion between User Interface (UI) and User Experience (UX) design. We’ll explore why people often get them mixed up and how they actually differ, using practical examples like shopping apps and streaming services. You’ll learn how UI and UX work tog...
UI Design Basics
Переглядів 3363 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec In this video, we dive into the most important principles of UI design that every designer should know. Whether you're a beginner or have some experience, these rules will help you create user interfaces that not only look great but are easy to use. We'll cover everything from clarity and...
UX Design Basics
Переглядів 1,8 тис.4 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec Are you new to UX design and want to get better? In this video I will cover the basics of User Experience (UX) design, including what it is in practice, how it works, and why it's important for businesses. You'll understand how to make websites and apps that are easy and fun to use. Let m...
Figma Slides: The Next Level of Presentations for Designers
Переглядів 4344 місяці тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec Figma recently released the new Figma Slides product with a lot of new and awesome features. If you are like me that most of my work is done in Figma and have to present mockups and prototypes you will love this. Let me know in the comments what other topics you need to be covered! #figma...
FigJam Essential Course in just 15 Minutes
Переглядів 2315 місяців тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec Welcome to our comprehensive guide on FigJam! In this video, you’ll learn everything you need to know to get started with FigJam, from the basics to advanced features. Whether you're new to FigJam or looking to refine your skills, this tutorial has got you covered. FigJam essential course...
How to create Micro Animations in Figma
Переглядів 3,4 тис.7 місяців тому
Get 10% Off on Mobbin Pro or Team plan in the world's largest mobile and web design library: bit.ly/4eC89Ec Hey friends, in this video I combine 5 essential animations for you to create awesome prototypes. Micro animations elevate your designs some steps up to demonstrate your ideas when doing some work. Today you will learn how to animate a Switch toggle, a dropdown, an accordion menu, an hamb...
How to create Splash screen animation in Figma
Переглядів 31 тис.7 місяців тому
How to create Splash screen animation in Figma
Share Figma Files with clients and developers
Переглядів 8 тис.8 місяців тому
Share Figma Files with clients and developers
How to create an Interactive radio button
Переглядів 7728 місяців тому
How to create an Interactive radio button
How to use Figma Multi-Edit
Переглядів 4118 місяців тому
How to use Figma Multi-Edit
I Redesigned Amazon Prime Mobile App
Переглядів 6119 місяців тому
I Redesigned Amazon Prime Mobile App
How to create a new FigJam file in Figma
Переглядів 3309 місяців тому
How to create a new FigJam file in Figma
Brainstorm ideas in FigJam - Figma
Переглядів 7139 місяців тому
Brainstorm ideas in FigJam - Figma
How to Scale frames with content in Figma - EASY
Переглядів 7 тис.10 місяців тому
How to Scale frames with content in Figma - EASY
How to DESIGN for Apple Vision Pro
Переглядів 64410 місяців тому
How to DESIGN for Apple Vision Pro
How to Prototype an Interactive Map in Figma
Переглядів 1,3 тис.10 місяців тому
How to Prototype an Interactive Map in Figma
How to prototype in Figma
Переглядів 83510 місяців тому
How to prototype in Figma
How to become a UX designer (2024)
Переглядів 46310 місяців тому
How to become a UX designer (2024)
Complete Guide to UI/UX (2024)
Переглядів 1,2 тис.11 місяців тому
Complete Guide to UI/UX (2024)
How to create 3D effect in Figma - [FREE PLUGIN]
Переглядів 1,3 тис.11 місяців тому
How to create 3D effect in Figma - [FREE PLUGIN]
Sticky scroll Figma
Переглядів 653Рік тому
Sticky scroll Figma

КОМЕНТАРІ

  • @alifalfarabi.b4867
    @alifalfarabi.b4867 9 годин тому

    thank youu

  • @АлександраБернгардт-ж6ч

    DISLIKE! I just wasted my time to realize that this is all in a paid figma. Shame on the author of the video.

  • @oleksandrbohatskyi8669
    @oleksandrbohatskyi8669 День тому

    Good guide. Thanks!

  • @단추랑-d9i
    @단추랑-d9i 2 дні тому

    I'm learning figma. I've been wandering around because the book and version are different, and thanks to you, I could learn. Thank you. 감사합니다-!!:)👍👍😎

  • @bkzaoo
    @bkzaoo 2 дні тому

    I have a problem with booleans. In my project, I see the variable 'mode' but not a boolean. I don't see a boolean configuration

  • @SteffDesigns
    @SteffDesigns 4 дні тому

    I cant change the icon... I watched several videos.. Anyone else with the same problem?

  • @Rosemaryakpe-g4q
    @Rosemaryakpe-g4q 6 днів тому

    i love you 😭

  • @sazidurrahman7754
    @sazidurrahman7754 7 днів тому

    Thank you!

  • @rootdeyan
    @rootdeyan 7 днів тому

    could you please make another new updated video with the new Figma?

  • @GeshnaRao-r4w
    @GeshnaRao-r4w 8 днів тому

    helped thanks

  • @normanejm
    @normanejm 9 днів тому

    Thanks!!! I was losing my patient...

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

    Thank you so much, you saved me!! ♥

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

    Hello, How can I change a background color with boolean without using a variant ? thanks

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

    Please make a tutorial video on how many pixels each layer should have for a mobile or desktop.

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

    you make me to easy to learn 🤍🤍thanksss a lot

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

    Thank you so much! 🙌

  • @ТатьянаШевчук-к8л
    @ТатьянаШевчук-к8л 16 днів тому

    Thank you for such useful tutorial 🥰

  • @arshakhan346
    @arshakhan346 16 днів тому

    I can't apply any property in the instances, i create the property but when i move to instance there's no property to apply, why is it happening

  • @banetepavcevic7228
    @banetepavcevic7228 17 днів тому

    Thank you for the video! I was struggling with the boolean property as well. I m using Font Awesome icons as Text and couldn't find the text panel. How to create a boolean property? So the solution is to select "icon" go to -> Apperacnece -> "+" -> "Property" -> Name . And this should work. The Text property you need to hover/over to get apply icon etc... Why Figma complicated so much???

  • @basro22
    @basro22 17 днів тому

    I cannot find the text/label properties anymore, it doesn't show as in this video under typography, its just not there. Terrible update.

    • @matusb9985
      @matusb9985 14 днів тому

      did you find it?

    • @mahmoudkeshawy978
      @mahmoudkeshawy978 13 днів тому

      1- make a component having any text like a word label or button anything dude 2- from the right-sidebar, find add properties choose text 3 - press the word you write in the component and go to text in right sidebar then press the sign calld apply variable then choose text variable

    • @mobilecommando
      @mobilecommando 13 днів тому

      I found it. Select the text of your button component, in the top of the properties panel is a text field. The icon you need to click on only appears when you hover over the text field (no idea why). If you hover over the icon it says "Apply variable/property". Click that. In the dialog box that comes up, click the plus icon + for a New variable/property. Then you are back on track with the video.

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

      @@mobilecommando Ths man! and then you need to go to whole properties list to delete it, omg)

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

      I can't see that either the new UI is in beta, but it' shit

  • @risarahayu8442
    @risarahayu8442 17 днів тому

    why I can't use the text property? the field "Button SM" is not appear. Do you know why? Do I miss something?

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

    Answered my question. Keep the tutorials coming.

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

    I'm interested in the PA247CV in order to do some light gaming and watching movies or videos with other people (like a small tv). Do you think it's a great idea? (I prefer better light and colors than a high image rate. I'm happy with 60 fps haha)

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

    Muito bom, ajudou demais!! Obrigada. Já seguindo.

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

    The text variable button has change its place again, now is in the Text panel on the top, is so annoying that Figma is changing the UI all the time 😡

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

      Thank you bro you are the real saviour

  • @SarahCooper-UVUX
    @SarahCooper-UVUX 22 дні тому

    Is it possible to create a boolean for changing the color of the button? Id like it to work so that if its toggled as true, its blue, but as false, its white.

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

    Does it really became better and more efficient this way? I've just used to old Component Properties and these new ones just so much harder to understand and create...

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

    there is no "instance swap property" in figma for that icon

  • @iamlegend5980
    @iamlegend5980 23 дні тому

    you are legend

  • @hermanocpimentel
    @hermanocpimentel 23 дні тому

    Thnaks for the video! I have one question. I just received my PA279CV. I'm mainly using it for rendering and post processing images in pohtoshop for architectural vizualiation, in another words, images will be seen in screens. The problem is, the standard preset mode looks more vibrant then the sRGB preset mode. The brightness of the sRGB preset is locked. If I drop the brightness of the standard preset to very low, like 10, then it gets almost the same look as the sRGB preset. Why is that? Do you know anything about that? Should I set to the sRGB preset while working?

  • @LS-zv7rx
    @LS-zv7rx 24 дні тому

    Thank you so much! that Boolean was giving me a hard time since its giving me "boolean not used within component"

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

    When I click on the icon and open appearance, it does not open the pop up that you get another one where I get search and a drop down, do you know why?

  • @IsabelCristina-le8tn
    @IsabelCristina-le8tn 25 днів тому

    Thanks a Lot! From Brazil 🇧🇷🇧🇷🇧🇷🇧🇷

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

    i guess we need a subscription to figma pro inorder to do that "set variable"

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

    You’ve made variables so easy for me to understand. Thank you 🙏🏽

  • @BoopathySrinivasan
    @BoopathySrinivasan 26 днів тому

    Thank you very much. Finally a very clear intro video on component properties

  • @okami_linux_gaming
    @okami_linux_gaming 26 днів тому

    this is strange, im using figma web, when i'm trying to get text property it's not showing in typography tab

    • @SarahCooper-UVUX
      @SarahCooper-UVUX 22 дні тому

      Select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞

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

      @@SarahCooper-UVUX thank you, will check that :)

  • @raisulrana2134
    @raisulrana2134 26 днів тому

    Need more plz

  • @raisulrana2134
    @raisulrana2134 26 днів тому

    Thanks

  • @SJ-ku7bb
    @SJ-ku7bb 27 днів тому

    The text property is not appearing under the Typography section, does anyone have this problem or is something that I am doing wrong???

    • @veronicahartono1408
      @veronicahartono1408 27 днів тому

      I do have the same issue. @RicardoCostaDesign Do you possibly know what the issue??

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 26 днів тому

      @@veronicahartono1408 i also have the Problem😅 did you manage that?

    • @alessandrodjordjevic8023
      @alessandrodjordjevic8023 24 дні тому

      @@veronicahartono1408 Bro, I just figured it out: After you've created all your variants, you only highlight the text of one variant (or all the texts at once, as long as all the texts in your variants are the same) and you have to look at the top right where the text content is and then click on the "Apply variable/ property" button to the right of that and you can then click on the "+" to set (name, value, etc.) and create the property. If you now click on Assets at the top left and on the corresponding variant, you will see that you can change the text content with the fact that the alignment of the button also changes (length/width). And if you want to change the text content at the touch of a button without the alignment of the button changing (length, width), you have to click on the same symbol in the middle right under "appearance" as the one you just clicked on next to your text content at the top right, you understand? Then click on "+" again and so on. now you can use the two settings to turn text on and off and change text content while also changing the alignment✌️

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

      ​@@alessandrodjordjevic8023 still can't find it

    • @SarahCooper-UVUX
      @SarahCooper-UVUX 22 дні тому

      If i understand your issue correctly, I believe you have to select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞

  • @andresefe_äfe
    @andresefe_äfe 28 днів тому

    Hi Ricardo! Thanks for your video, it was very helpful, you are doing a great job. I just have a little question, im struggling with the text property, because i can't find anywhere the label with the content of the text, under the section "typography" there's nothing :( , do i have to activate it somewhere? Thanks in advance :)

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

      Have you solved the problem? I can't get any further

    • @andresefe_äfe
      @andresefe_äfe 25 днів тому

      @@alessandrodjordjevic8023 Sadly no, I will come back if i can find an answer!

    • @CoolMusic-ff9yw
      @CoolMusic-ff9yw 25 днів тому

      @@andresefe_äfe me too, same issue here

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

      @@CoolMusic-ff9yw You still have the problem, right? I've been searching everywhere on UA-cam for 3 days, but I just can't find anything. I'm a complete beginner on Figma and am just practicing. And the fact that it's not working is really getting me down.

    • @RicardoCostaDesign
      @RicardoCostaDesign 24 дні тому

      Hi @andresefe_äfe thanks for your comment. I'm not sure if I understood correctly. Did you double click on top of your text layer to select the text and then not find the Typography side panel? In the video, I've double click on top of the text to select the text layer (sorry because I didn't speak that in the video). Can you try it? Or even select it it doesn't appear?

  • @Roops20
    @Roops20 29 днів тому

    Please create more such videos on Figma's latest UI3, not many people are doing it and it's really difficult to understand what sits where now. Thanks!

  • @Roops20
    @Roops20 29 днів тому

    Hi Ricardo, Thanks for the super helpful video on "How to Create"! Could you also cover the why behind certain steps, the logic and reasoning that guides these choices? That'll help us create a strong foundation, cheers!

    • @RicardoCostaDesign
      @RicardoCostaDesign 24 дні тому

      Thanks @Roops20 ! Sure, I'll try to do it on my next videos :)

  • @thangnguyen-hs2do
    @thangnguyen-hs2do 29 днів тому

    thank

  • @saadetman3647
    @saadetman3647 29 днів тому

    how to limit at zero (0)

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

    This was so helpful, thank you! Is it possible/good practice to create a property for button color?

    • @RicardoCostaDesign
      @RicardoCostaDesign 24 дні тому

      Thanks @RachDev! Yes, you can set color properties to any object, as long as you do the "link" as shown in the video :)

    • @SarahCooper-UVUX
      @SarahCooper-UVUX 22 дні тому

      @@RicardoCostaDesign What do you mean by "link"? I may have missed that in the video.

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

    Thanks Costa!

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

    Bro I can’t find a multiple component in new update. It’s very annoying 😢 plz help me how to add component set in this very update!! I’ll be thankful. 🙏

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

    thank you so much

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

    Nice clear tutorial in the new Figma UI. Very helpful, thanks 👍🏻