Figma Component
Data Display

Segmented

Component that allows designers to create segmented controls or buttons.

What is Figma Segmented?

Figma Segmented is a versatile component that allows designers to create segmented controls or buttons. Segmented controls are UI elements typically used to present a set of mutually exclusive options to users. They are commonly found in forms, settings, and filtering interfaces, enabling users to select a single option from a predefined set.

When to Use Segmented Component?

The Segmented component is used when designers want to offer users a selection of options with exclusive choices. It is an excellent choice for scenarios where users need to choose one option from a group of related choices without the possibility of selecting multiple options simultaneously.

How to Design Segmented Component?

Designing a Segmented component involves creating visually distinctive segments that represent the available options. Designers can experiment with various shapes, colors, and styles to differentiate each segment, ensuring users can easily identify and interact with the choices. Proper alignment and spacing are essential to maintain visual clarity and improve the overall user experience.

How Segmented Component is Designed in Ant Design System for Figma?

In the Ant Design System for Figma, the Segmented component follows the Ant Design principles to provide a consistent and cohesive user experience. The segments are thoughtfully designed to ensure clarity and visual appeal, allowing users to make their selections effortlessly. The Ant Design System ensures that designers have access to a wide range of styles, including sizes and color schemes, for creating segmented controls that align with the overall design language.

What is Ant Design System for Figma?

Ant Design System for Figma is a comprehensive design resource that incorporates the Ant Design principles and components into the Figma environment. It enables designers to work seamlessly with the Ant Design system directly within Figma, making the design process smoother and more efficient. By using the Ant Design System for Figma, designers gain access to a wide range of components, styles, and icons, including the popular Segmented component, all of which help maintain design consistency and accelerate the creation of high-quality user interfaces.

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.