The Perfect Figma Tabs Component
September 30, 2024 - Reading time: 2 minutes
Tabs UI component design dilemma in Figma
If you have ever worked in UI design, you would definitely design Tabs. Tabs are a universal term for attached buttons. They organize content, save space, and guide users. But designing them in Figma? That's where things get interesting.
Figma allows you to create flexible components that display different tab states, sizes, and compositions. You can also create variant sets and reuse them as you design your project.
However, tabs are always animated in design and do not exist in static. So, you want to animate those Figma tabs you reuse in your projects.
Figma's Power Features:
- Component variants? Check ✓
- Component properties? Check ✓
- Responsive UI? Absolutely ✓
- Animation? Maybe…
The catch? Animation. Figma's prototyping tools are still limited in terms of combining power features with animation. You'll get the job done, but it won't be reusable. And as design engineers and geeks in general, we want our components to reflect actual usage.
You can find examples of animation-first approaches in the Figma community, like this one. However, all those tab examples will only include animation as a power feature.
We've been there — hours spent wrestling with Figma, trying to create the perfect tab component. The result? A choice between organized variants or smooth animations — never both…
But we cracked it ⚡︎ and are ready to present you our solution:
- Pill and line-shaped tab style variants
- Component properties and nested elements
- Animated. Includes interactive states for hover, active, and clicked
- Saves tab position between variants
Updates
FAQ