Common Actions
Design Tips
Category
Currents
Category
Interactions
Category
Illustrations
Category
Resources
Category
Education
Category
Tools
Category
Gradient Generator
Resources
Figma Components, Variants & Components Properties

In this video, you will learn about components, its properties and variants.

MockupWorld
Resources

The original biggest Source of photo-realistic free PSD Mockups online

Unblast
Resources

Are you looking for the perfect mockups to beautifully present your design projects? We have an unbelievable collection of free customizable PSD mockups, Phone mockups, packages, apparel, flyers, posters, etc. Go ahead and check them out.

how to not suck at colors
Design Tips

Some mistakes you should avoid while using color in UI design.

How to design for peoples attention
Design Tips

Captivating an audience isn’t just about content; it’s about design that draws them in. How you create a layout matters, how you balance your elements matters, and how you emphasize sizes matters. Never underestimate the power of design.

Fontshare
Resources

Get fonts and font pairings for your typography.

Highlights
Resources

A hand drawn illustration library.

3 Things to Help you Grow in Confidence as a Product Designer
Education

Learn how to become a better product designer.

How to Get Started Designing Native Apps
Education

how to get started designing native iOS or Android apps without any prior experience.

5 Essential Questions Every Product Designer Should Ask
Education

5 essential questions every product designer should ask before jumping into the design phase of any project.

UX Research: 10 Tips to Improve Your UX Presentation Deck
Education

Struggling with your UX research presentation? Not sure how to make it better? Let's go over a list of 10 points and some practical advice to help you engage your team and get the UX presentation the attention it deserves. This advice should work with UX portfolio presentations as well!

UX Research: How to Avoid Survey Mistakes
Education

This video discusses the popularity of surveys and the common mistakes that lead to bad surveys. We'll also look at strategies to avoid these mistakes with examples. This should be of help to anyone who's starting out in UX research, as well as for UX designers and product managers who want to understand what goes into surveys.

UX Research Methods: The Basics You Need to Get Started
Education

Let’s explore the most common UX research methods used (and a couple of other methods that are good to know). We'll dive into the pros and cons of each method and at the end discuss how to choose the right one for your project.

How to use emotions to sell
Education

Learn how emotions are used to drive sales.

9 eye scanning patterns you must know
Education

learn how users scan across pages so you can design better.

Brand vs Branding, what's the difference.
Education

You can’t build a brand without the foundations, stuff like ideas, purpose, beliefs, products, but you also don’t HAVE a brand if there are no feelings, meaning, or associations around it (helped shaped over time by its customers but also by the brand strategy) And that stuff takes time to develop.
Brand strategy, then, is all about the articulation of the brand: its identity, purpose, values, personality, etc, through tactics like storytelling, messaging, and experiences. And crucially, the process of building associations and feelings that help shape the customers’ perceptions.

3 ways to sell feelings not features
Education

Learn how to sell the experience or feel instead of the feature.

Brand purpose isn’t just a statement
Education

Ultimately, a brand purpose should last longer than 10 years. Arguably, it should last forever. And it should be there to help guide your company down the right path, knowing the overarching belief that drives you everyday.

Mesh Gradient
Tools

generates a gradient image with an underlying 2d mesh, and lets you edit the vertices & edges of the mesh to get the perfect gradient look.

How to stand out with your personal brand
Education

Learn how to create a brand that stands out 

How user interface, user experience and customer experience vary with each other
Education

Learn how user interface, user experience and customer experience vary from each other.

Thinking outside the box in ui/ux design
Education

Thinking outside the box in UI UX design is about breaking free from conventional approaches and generating innovative solutions for user problems. The key to thinking outside the box is to be curious, experiment freely, and embrace the unexpected.

How To Get The Perfect Spacing In Web Design
Design Tips

How to space elements in web design? We got you covered. You can use a simple 4/8 pixel system to achieve consistency in your designs. We show you how we set up container sizes, spacing between sections and how to group content together using the UX Law of Proximity.

The secret Spacing Framework You Need
Design Tips

Spacing frameworks help us create beautiful, yet legible sites. With a very simple 8 point system, or 4 point system we can keep our designs consistent and clear for the user. In Figma we can easily do this by holding down the shift button, which will snap the next spacing to +8 or -8 pixels. This can be changed in the settings page as well in Figma. Using this spacing framework allows us to also create simple rem conversions, 1rem is 16 pixels, and so on.

Misconceptions about UI Grids
Education

Learn about the different ui grid misconceptions.

Oops! No results found
Please make sure your words are spelt correctly.
Search for designs, illustrations, books instead?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sign in
Sign up
All
Design Tips
Resources
Education
Tools
Illustrations
Currents
Interactions
Create an accountAlready have an account? Sign in
Your Name
View Profile
Saved Whiz
Logout
Welcome
Please enter your details.
New here? Sign up
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Welcome
Please enter your details.
Already have an account? Sign in
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HomeDesign TipsHow to create buttons using variables: part 2

How to create buttons using variables: part 2

bymarina_uiux
Share
No items found.
No items found.
01 / 00

πŸ”₯ Advanced Technique. How to create Button Component using Variables in Figma? Part 2.

​

In this part we are going to create:

πŸ“ Button with/whitout Icon Variants

πŸ“ Primary, Secondary, Tertiary, Distractive

πŸ“ Disabled States

πŸ“ Interactive States using Overlay Variables

πŸ“ Dark mode using Variables

​

If you know how to use Variables in the right way - you will save yourself tons of time and deliver Design as a Professional.

Tags
Design System
UI/UX Design
Product Design
How-To's
Hacks
Author
marina_uiux
Source
Link
Featured
January 22, 2024
More like this
Design Tips
Youtube
How to create 3D Website Designs With No Code
Design Tips
IG Post or Carousel
How to make water texture in adobe illustrator
Design Tips
IG Post or Carousel
Auto layout in practice
Design Tips
IG Post or Carousel
Dashboard Design Tips
Design Tips
IG Post or Carousel
How to make 3d inflate text in adobe illustrator
Design Tips
IG Post or Carousel
How to make gritty shadow in adobe illustrator
Design Tips
How to create a seamless pattern in adobe illustrator
Design Tips
IG Post or Carousel
How to create long text shadows
Design Tips
IG Post or Carousel
How to create paper cut effect in photoshop
Design Tips
IG Post or Carousel
How to create cool glass icons in figma
Design Tips
IG Post or Carousel
How to create colorful sphere in figma
Design Tips
IG Post or Carousel
How to create 3d cube from 2d images
Design Tips
IG Post or Carousel
6 tips to create responsive website design
Design Tips
IG Post or Carousel
How to Create a high converting landing page design
Design Tips
IG Post or Carousel
Auto layout, 4 Pro tips.
Design Tips
Youtube
4 EASY Figma Animations for Beginners
Design Tips
IG Post or Carousel
How to create a more complete registration and login
Design Tips
Youtube
Framer Card Overlap Tutorial
Design Tips
Youtube
How to Create Full Page Website Scroll Animation in Figma
Design Tips
IG Post or Carousel
Principles of a Design System
Design Tips
Blog Posts/Article
How to master Grids in UI
Design Tips
Youtube
How to Maximize your UX Portfolio
Design Tips
IG Post or Carousel
how to not suck at colors
Design Tips
IG Post or Carousel
How to design for peoples attention
Design Tips
Youtube
How To Get The Perfect Spacing In Web Design
Design Tips
Youtube
The secret Spacing Framework You Need
Design Tips
Youtube
Perfect Responsive Grid Systems Masterclass
Design Tips
Youtube
Giving your FLAT Designs some DEPTH
Design Tips
Youtube
6 Advanced UI Design Tips
Design Tips
Youtube
4 Foundational UI Design Principles
Design Tips
Youtube
5 Tricks For Epic Hero Animations
Design Tips
Youtube
Build a Responsive Bento Box Layout in Webflow
Design Tips
Youtube
Figma's new multi edit tool
Design Tips
Youtube
Add patterns to your designs in Figma
Design Tips
Youtube
Ways to improve your UX design
Design Tips
Youtube
How to create the rolling text animation in Framer
Design Tips
Youtube
How to create Framer Parallax Trick; loop & scroll speed
Design Tips
Youtube
How to make a responsive 3D illustration for Web
Design Tips
Youtube
How to integrate 3D into Webflow with Spline Scene
Design Tips
Youtube
How to create 3D Scroll Interactions in Webflow
Design Tips
Youtube
From Figma To 3D Website Using Framer & Spline
Design Tips
Youtube
Handing off designs to software engineers using flows and annotations
Design Tips
Youtube
Creating typography system in Figma
Design Tips
Youtube
The Perfect Spacing Framework in UI Design
Design Tips
Youtube
How to pick the right colors for your website or app
Design Tips
Youtube
Master Figma Auto Layout the easy way
Design Tips
Youtube
master Figma Components in 10 Minutes
Design Tips
Youtube
Design System in Figma: Typography Styles
Design Tips
Youtube
Logo Design - Using adobe illustrator
Design Tips
Youtube
How to Design a Logo From Scratch using adobe illustrator
Design Tips
Youtube
Easiest way to generate color palette in Figma
Design Tips
Youtube
How to create 3D carousels in figma using smart animate
Design Tips
Youtube
Master Responsive Grids (Rows & Columns) in Figma
Design Tips
Youtube
How to select the best frame sizes in figma
Design Tips
Youtube
How to move design system to another file without breaking everything in Figma
Design Tips
Youtube
The right Way to Use Figma Component Properties
Design Tips
Youtube
How to make UI color palettes
Design Tips
Youtube
5 Tips to improve your UI Designs
Design Tips
Youtube
How to use Sticky scroll when prototyping in figma
Design Tips
Youtube
how to create custom typography effect using photo manipulation in Canva Pro
Design Tips
Youtube
How to Use the Pen Tool in Adobe Illustrator
Design Tips
IG Post or Carousel
How to create color styles manually
Design Tips
IG Post or Carousel
How to make Gum Shapes in Figma
Design Tips
IG Post or Carousel
8 Rules for Perfect Tab Design⁣⁣
Design Tips
Youtube
8 tips for designing a website
Design Tips
Youtube
Master Figma variables in 7 minutes
Design Tips
Youtube
Figma Auto Layout Tutorial
Design Tips
Youtube
10 Brand Identity Design Elements For Strategic Branding
Design Tips
Youtube
Landing Page Design Explained (in 5 minutes)
Design Tips
IG Post or Carousel
How to create mesh gradient
Design Tips
IG Post or Carousel
Tips On Icons in Interface Design
Design Tips
IG Post or Carousel
Your UI Design Sucks!
Design Tips
IG Post or Carousel
Step-By-Step Guide to create color variables in figma
Design Tips
IG Post or Carousel
6 Steps Creating A Great Design
Design Tips
IG video
Hover Animation. Figma to Framer
Design Tips
IG Post or Carousel
Basic terms you should know in UX design
Design Tips
IG Post or Carousel
Spline tutorial - Create 3D keys for keyboard
Design Tips
IG Post or Carousel
Dashboard Design
Design Tips
IG Post or Carousel
A 60-second crash course on quick thinking for designers
Design Tips
IG Post or Carousel
How to Design Typography System for UI Design! β €
Design Tips
IG Post or Carousel
How to use 4pt Grid System in UI Design
Design Tips
IG video
Document your design projects
Design Tips
IG Post or Carousel
A quick guide to the blob brush in Adobe Illustrator
Design Tips
IG Post or Carousel
Figma 101: Figma's renaming workflow hack
Design Tips
IG Post or Carousel
7 Awesome Tips How to Design Better Apps
Design Tips
IG Post or Carousel
Typography Principles UI Designers Should Know
Design Tips
IG video
Get educated about Dark Mode
Design Tips
IG Post or Carousel
Neon Glass Effect in Figma
Design Tips
IG video
Isometric Card Prototype in Figma
Design Tips
IG Post or Carousel
How to write UX problem statement
Design Tips
IG Post or Carousel
How to design for one-hand usage
Design Tips
IG Post or Carousel
8 Key Differences Between iOS & Android Designs
Design Tips
IG video
How to create impressive parallax hero effects in Figma
Design Tips
IG Post or Carousel
How to create a seamless pattern in Adobe Illustrator
Design Tips
IG Post or Carousel
Why is Spacing Very Important?
Design Tips
IG Post or Carousel
UI Icon best practices
Design Tips
IG Post or Carousel
UI hacks to make you a 100x better design: Part 1
Design Tips
IG Post or Carousel
8 Tips How to Improve Typography in Your IG Posts
Design Tips
IG Post or Carousel
How to create buttons using variables: part 1
Design Tips
IG Post or Carousel
7 Actionable Tips How to Create Interface Style-guides

Unlock all access

Get unlimited access to full collection of bit sized design tips and tricks made by designers for designers to boost your design workflow easily
By continuing, you acknowledge that you have read and understood, and agree to Dsgnwhiz's Terms of Service and Privacy Policy