- 183
- 550 454
Ricardo Costa
Portugal
Приєднався 24 бер 2020
Hello! I'm Ricardo Costa and welcome to my channel.
I'm a digital product designer based in Portugal and I share actionable tips on UI/UX and online business. Learn, apply, and grow with no fluff-just value-driven insights.
You will also have some tutorials on Figma, FigJam, Adobe tools and other tools I might consider relevant to improve your workflow.
Email for Collabs: info@ricardocosta.eu
I'm a digital product designer based in Portugal and I share actionable tips on UI/UX and online business. Learn, apply, and grow with no fluff-just value-driven insights.
You will also have some tutorials on Figma, FigJam, Adobe tools and other tools I might consider relevant to improve your workflow.
Email for Collabs: info@ricardocosta.eu
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
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
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
How to Scale frames with content in Figma - EASY
Переглядів 7 тис.10 місяців тому
How to Scale frames with content in Figma - EASY
How to Prototype an Interactive Map in Figma
Переглядів 1,3 тис.10 місяців тому
How to Prototype an Interactive Map in Figma
How to create 3D effect in Figma - [FREE PLUGIN]
Переглядів 1,3 тис.11 місяців тому
How to create 3D effect in Figma - [FREE PLUGIN]
thank youu
DISLIKE! I just wasted my time to realize that this is all in a paid figma. Shame on the author of the video.
Good guide. Thanks!
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. 감사합니다-!!:)👍👍😎
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
I cant change the icon... I watched several videos.. Anyone else with the same problem?
i love you 😭
Thank you!
could you please make another new updated video with the new Figma?
helped thanks
Thanks!!! I was losing my patient...
Thank you so much, you saved me!! ♥
Hello, How can I change a background color with boolean without using a variant ? thanks
Please make a tutorial video on how many pixels each layer should have for a mobile or desktop.
you make me to easy to learn 🤍🤍thanksss a lot
Thank you so much! 🙌
Thank you for such useful tutorial 🥰
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
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???
I cannot find the text/label properties anymore, it doesn't show as in this video under typography, its just not there. Terrible update.
did you find it?
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
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.
@@mobilecommando Ths man! and then you need to go to whole properties list to delete it, omg)
I can't see that either the new UI is in beta, but it' shit
why I can't use the text property? the field "Button SM" is not appear. Do you know why? Do I miss something?
I found it in a “Appearance” section
Answered my question. Keep the tutorials coming.
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)
Muito bom, ajudou demais!! Obrigada. Já seguindo.
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 😡
Thank you bro you are the real saviour
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.
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...
there is no "instance swap property" in figma for that icon
same problem over here
you are legend
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?
Thank you so much! that Boolean was giving me a hard time since its giving me "boolean not used within component"
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?
In which minute that happen?
Thanks a Lot! From Brazil 🇧🇷🇧🇷🇧🇷🇧🇷
Thank you Isabel!
i guess we need a subscription to figma pro inorder to do that "set variable"
You’ve made variables so easy for me to understand. Thank you 🙏🏽
Thank you very much. Finally a very clear intro video on component properties
Thank you so much for the feedback!
this is strange, im using figma web, when i'm trying to get text property it's not showing in typography tab
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 🤞
@@SarahCooper-UVUX thank you, will check that :)
Need more plz
Thanks
The text property is not appearing under the Typography section, does anyone have this problem or is something that I am doing wrong???
I do have the same issue. @RicardoCostaDesign Do you possibly know what the issue??
@@veronicahartono1408 i also have the Problem😅 did you manage that?
@@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✌️
@@alessandrodjordjevic8023 still can't find it
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 🤞
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 :)
Have you solved the problem? I can't get any further
@@alessandrodjordjevic8023 Sadly no, I will come back if i can find an answer!
@@andresefe_äfe me too, same issue here
@@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.
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?
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!
Thanks for commenting. Any specific suggestion?
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!
Thanks @Roops20 ! Sure, I'll try to do it on my next videos :)
thank
how to limit at zero (0)
This was so helpful, thank you! Is it possible/good practice to create a property for button color?
Thanks @RachDev! Yes, you can set color properties to any object, as long as you do the "link" as shown in the video :)
@@RicardoCostaDesign What do you mean by "link"? I may have missed that in the video.
Thanks Costa!
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. 🙏
thank you so much
Nice clear tutorial in the new Figma UI. Very helpful, thanks 👍🏻