Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Styles
  • Variables
  • Plus UI Design System
  • How to use Plus UI Styles & Variables
  • Powerful Integration with Tailwind CSS
  • Resources for Using Styles & Variables in Figma
  • Get help

Was this helpful?

  1. Design System

Styles & Variables

Plus UI's styles and variables helps designers and developers to work together more efficiently, reducing the risk of inconsistencies, enlightening the principles and patterns for specific problems.

PreviousSetting up on FigmaNextOverview

Last updated 1 year ago

Was this helpful?

Styles

Variables

Plus UI Design System

How to use Plus UI Styles & Variables

On the right hand side panel, click ‘Open Variables’ icon. A pop up will open and you will see all the collections such as color, spacing, size, border, breakpoints and opacity. These variables (tokens) is being used for our components.

Powerful Integration with Tailwind CSS

Tailwind CSS empowers developers with unparalleled styling capabilities that elevate the Plus UI Design System, providing users with a comprehensive and integrated toolkit for crafting exceptional user interfaces.

  • Effortless Styling: Plus UI effortlessly integrates with Tailwind CSS, allowing users to leverage the robust utility-first framework for styling and layout.

  • Responsive Design: Tailwind CSS's responsive design capabilities complement Plus UI's components, ensuring optimal display across various devices and screen sizes.

  • Customization Harmony: Tailwind CSS users will tailor our components with the same ease and efficiency.

Resources for Using Styles & Variables in Figma

If you need information and clarification on styles and variables and how to use them, you can check the Figma’s resource below link.

Get help

Still having issue? Get help from our communities below.

Plus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma
Logo
Cover
Shadows & Effects
Cover
Typography
Cover
Icons
Cover
Border
Cover
Breakpoints
Cover
Color
Cover
Spacing
Cover
Opacity
Cover

Join Discord Community

Cover

Join Figma Community

Cover

Join us on Twitter

Guide to variables in FigmaFigma Learn - Help Center
Variables in Figma
Styles in FigmaFigma Learn - Help Center
Styles in Figma
Logo
Logo