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
  • Opacity
  • Opacity Values
  • How to Use Opacity
  • Opacity Tokens
  • Get help

Was this helpful?

  1. Foundation

Opacity

Immerse your design in a realm of visual subtlety and depth with Plus UI's Opacity. This feature empowers you to control the transparency of elements, adding a layer of sophistication to interface.

PreviousSpacingNextShadows & Effects

Last updated 1 year ago

Was this helpful?

Opacity

Opacity refers to the degree to which interface elements are translucent, allowing for the creation of various visual effects. This is achieved through a range of styles on a scale that adjust the transparency of these elements. Occasionally, opacity is specifically applied to the background of a component, enhancing its visual impact.

Opacity Values

These are the percentage values for opacity tokens start from 0% to 100%.

How to Use Opacity

  1. Click on the layer or image in the canvas that you want to adjust the opacity for

  2. In the right sidebar, you'll find the "Design" panel, then ‘Layer’ section.

  3. Right click on the percentage value (e.g., 100% by default) defined as a opacity token.

  4. For fully opaque, use 100%; for fully transparent, use 0%.

Opacity Tokens

Unlock precision and consistency in managing transparency with Plus UI's Opacity Tokens. These predefined tokens offer a systematic approach to adjusting opacity levels, ensuring a harmonious and visually appealing design. Delve into our documentation to explore the creative possibilities and customizable options available for crafting an interface that seamlessly balances visibility and subtlety.

Get help

If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.

opacity values
opacity in figma
opacity token table
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter