Border
Refine the structure and delineate elements by using Plus UI's Border feature. Explore various border styles that allow you to define boundaries and enhance the overall visual appeal of your design.
Border Radius
Add a touch of sophistication to your components with Plus UI's Border Radius options. Customize the curvature of corners to create a modern and sleek aesthetic, ensuring a harmonious look and feel across your application.
How to Change Border Radius
Click on the shape whose corners you want to radius. You can select the value you need from the defined radius tokens by clicking on the Variable icon on the right panel.
Example
Border Width
Fine-tune the visual weight of your design elements with Plus UI's Border Width options. Tailor the thickness of borders to achieve the desired emphasis and separation, contributing to a polished and well-defined user interface. Dive into our documentation to explore the flexibility and customization available for creating visually compelling layouts.
How to Add Border Width
Click on the shape that you want to add width around it. First, add a style from the stroke section on the right panel and choose a color for the border. Then, right-click on the defined border width field and select the desired value by clicking "apply variable".
Example
Border Tokens
Plus UI's predefined border radius tokens offer a range of radii, ensuring uniformity and ease of customization across your user interface. Dive into our documentation to explore the variety of border radius options and effortlessly achieve a cohesive and polished design aesthetic.
Border Radius Tokens
Border Width Tokens
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.
Last updated
