Figma Component / Layout
Flex
Flex in Ant Design of React is a component that helps to align items vertically and horizontally.
Documentation
What is Figma Flex?
Flex in Ant Design React is a layout helper for arranging items along horizontal and vertical axes with configurable alignment, gap, and wrapping behavior. It is commonly used to compose responsive UI sections quickly.
When to Use Flex?
Use Flex when you need lightweight, one-dimensional layout control for toolbars, form rows, cards, and action groups. It is ideal for interface areas where spacing and alignment must adapt to content changes.
How to Design Flex?
Define parent direction, alignment, and spacing rules first, then validate how items behave at different widths. Keep spacing token-based and avoid manual pixel adjustments so the layout remains robust and reusable.
How Flex Component is Designed in Ant Design System for Figma?
Flex is not provided as a dedicated Figma component because Figma Auto Layout already models the same behavior. In Ant Design System for Figma, designers implement Flex layouts through native Auto Layout properties while following the same spacing and alignment tokens used by the system.
Related components
- Divider
Divider component in Ant Design of React helps to separate items from each other.
- Grid
Grid in Ant Design of React is a component that helps to align items horizontally.
- Layout
Layout manages the overall arrangement and organization of elements on a page.
- Masonry
Masonry manages content with different heights.
This component is part of the Ant Design System for Figma. Browse Ant Design Figma templates or view kit pricing.