Figma Color Styles and Variables - Beginners guide
If you’re a beginner, this tutorial might be the best and fastest way to learn what is Figma and it's main UI elements to understand where to find each tool and action.
Use this playlist to watch more Figma tutorials https://youtube.com/playlist?list=PLPF6nyMu3t7s9JECrLzxk5ZclcFUlsQbq&si=AdeWswTeNd0XnlRh
Starting on Figma? Then you might start with this video
https://www.youtube.com/watch?v=uaO6YY0T1mg&t=9s
Working file:
https://www.figma.com/community/file/1476988888058632791
Chapters
0:00 Intro
0:28 What Are Color Styles?
1:04 Why Set Up Color Styles?
2:24 Hue, Shades and Tints
3:33 Set Up Primary Color
4:53 Set Up Neutral Colors
5:43 Automatic Color Scale Tip
6:27 What Are Semantic Colors?
7:58 Create Semantic Color Styles
8.31 Create Color Styles and Rename Layers
10:12 Automatic Color Styles Tip (Plugins)
11:40 Create Color Variables
▶️ Watch the previous episode:
Intro to Figma 2025 → https://youtu.be/uaO6YY0T1mg
📚 Start the full series from the beginning:
Figma for Beginners – 2025 Playlist → https://youtu.be/uaO6YY0T1mg?si=jYsIrf1Fd1OnIn4b
---
🧠 **What’s next:✱
Next episode: Color Tokens & Systems in Figma → https://youtu.be/PLtO4fy6JAM
💬 Drop your questions in the comments — let’s grow together!
---
Affiliate links of Apps I really use and trust
👉 Mobbin to get inspiration from website and apps that are really usable
https://mobbin.com/?referrer_workspace_id=a540c6fc-26d1-4fe2-8133-02b78e7d91fa
👉 Perplexity for smart web browsing
https://perplexity.ai/pro?referral_code=E436LT4C
Get in touch
👉 Free weekly newsletter https://ricardocostadesign.substack.com/
👉 Instagram https://www.instagram.com/ricardocostaeu
👉 Linkedin https://www.linkedin.com/in/ricardocostaeu
#figmabeginners #figmacolorstyles #colorvariables
Use this playlist to watch more Figma tutorials https://youtube.com/playlist?list=PLPF6nyMu3t7s9JECrLzxk5ZclcFUlsQbq&si=AdeWswTeNd0XnlRh
Starting on Figma? Then you might start with this video
https://www.youtube.com/watch?v=uaO6YY0T1mg&t=9s
Working file:
https://www.figma.com/community/file/1476988888058632791
Chapters
0:00 Intro
0:28 What Are Color Styles?
1:04 Why Set Up Color Styles?
2:24 Hue, Shades and Tints
3:33 Set Up Primary Color
4:53 Set Up Neutral Colors
5:43 Automatic Color Scale Tip
6:27 What Are Semantic Colors?
7:58 Create Semantic Color Styles
8.31 Create Color Styles and Rename Layers
10:12 Automatic Color Styles Tip (Plugins)
11:40 Create Color Variables
▶️ Watch the previous episode:
Intro to Figma 2025 → https://youtu.be/uaO6YY0T1mg
📚 Start the full series from the beginning:
Figma for Beginners – 2025 Playlist → https://youtu.be/uaO6YY0T1mg?si=jYsIrf1Fd1OnIn4b
---
🧠 **What’s next:✱
Next episode: Color Tokens & Systems in Figma → https://youtu.be/PLtO4fy6JAM
💬 Drop your questions in the comments — let’s grow together!
---
Affiliate links of Apps I really use and trust
👉 Mobbin to get inspiration from website and apps that are really usable
https://mobbin.com/?referrer_workspace_id=a540c6fc-26d1-4fe2-8133-02b78e7d91fa
👉 Perplexity for smart web browsing
https://perplexity.ai/pro?referral_code=E436LT4C
Get in touch
👉 Free weekly newsletter https://ricardocostadesign.substack.com/
👉 Instagram https://www.instagram.com/ricardocostaeu
👉 Linkedin https://www.linkedin.com/in/ricardocostaeu
#figmabeginners #figmacolorstyles #colorvariables