Figma Styles & Components Tutorial — Create and Publish a Design System Library
About this tutorial
Learn how to create color styles, text styles, and components in Figma and publish them as a design library. Step-by-step beginner guide for building scalable design systems.
Figma Styles & Components — Full Video Tutorial
In this tutorial, you’ll learn how to create color styles, text styles, and components in Figma, and then publish them as a design library.
If you’re building scalable UI systems or working in teams, this is non-negotiable knowledge.
What You’ll Learn
- How to create color styles in Figma
- How to create text styles (typography system)
- How to build reusable components (buttons)
- How to organize your design system
- How to publish a Figma library for team usage
Important Note (Don’t Skip This)
- ✅ You can create styles locally using the free plan
- ❌ To publish a shared design library, you need a Figma Professional/Team plan
👉 This is where most beginners get confused
Why Use Styles & Components in Figma?
Without styles:
- Inconsistent UI
- Hard to update designs
- Messy files
With styles:
- One-click updates
- Consistent design language
- Scalable design systems
👉 This is how real product teams work
Step 1 — Create Color Styles in Figma
Start by defining your color palette.
Create Base Colors
- Primary color
- Secondary color
- Tertiary / Accent
- Neutral shades (black, gray, white)
💡 Pro tip: Always include multiple shades for flexibility
Convert Colors into Styles
- Select a shape with color
- Click Style icon (4 dots)
- Click + → Create Style
- Name it properly
Example Naming:
Primary / BlueSecondary / Light BlueText / Dark
Add description like:
Use for primary CTA buttons
Where to Find Your Styles
Once created:
- Go to right sidebar → Local Styles
- All your colors will appear there
Step 2 — Apply Color Styles
Instead of manually picking colors:
- Select any object
- Click Fill → Styles icon
- Switch to Library tab
- Choose your saved color
✅ Works for shapes, text, and components
Step 3 — Create Text Styles (Typography System)
Typography is just as important as colors.
Create a Text Style
- Add text
- Choose font (e.g., Roboto)
- Set size (e.g., 30px)
- Open Style panel → + Create Style
Example:
H1 / HeadingBody / RegularCaption / Small
Add description:
Use for page headings
Apply Text Styles
- Select text
- Go to Styles panel
- Choose your predefined style
💡 Figma remembers last used style — useful for speed
Step 4 — Create a Button Component
Now let’s build a reusable UI component.
Create Basic Button
- Add text
- Wrap with Auto Layout
- Add padding (e.g., 10px / 20px)
- Apply primary color
- Add corner radius
Rename it:
👉 Primary CTA
Convert to Component
- Select element
- Press Create Component
Add Component Properties (Optional but Powerful)
- Text property (dynamic label)
- Variants (hover, active, disabled)
👉 This is where real design systems become powerful
Step 5 — Organize Your Design System
Keep everything clean:
- Colors section
- Typography section
- Components section
💡 Many designers skip this → leads to chaos later
Step 6 — Publish as Figma Library
Once everything is ready:
- Go to Assets → Library
- Click Publish
- Add description
- Publish
⚠️ Requires paid plan
How to Use Published Library
In another file:
- Open Libraries panel
- Enable your published library
- Start using styles & components
👉 Now your entire team stays consistent
Pro Tips (Most Beginners Ignore)
- Use naming conventions (
Primary / Blue) - Always add descriptions
- Don’t over-create styles — keep it minimal
- Use components + variants together
- Maintain one source of truth file
Related Learning
Want to go deeper into Figma systems and UI design?
👉 Explore More Figma Tutorials
Join UX Mate Community
- 📢 https://t.me/ux_mate
- 📸 https://www.instagram.com/_uxmate/
- 💬 https://chat.whatsapp.com/J8RTpZStlRPG3Hn977fzI0
Final Thoughts
If you’re not using styles and components in Figma, you’re designing like a beginner.
Design systems are not optional anymore.
Start small:
- Colors
- Typography
- Buttons
Then scale to:
- Full UI kits
- Design systems
- Team libraries
🚀 Next: Bulk editing styles & updating design systems in one click