Figma Component / Layout
Layout
Layout manages the overall arrangement and organization of elements on a page.
Documentation
What is Figma Layout?
Layout is a structural component set used to organize page-level regions such as header, sider, content, and footer. It creates a consistent shell that supports clear information hierarchy and navigation.
When to Use Layout?
Use Layout for dashboards, admin pages, and applications that require persistent frame regions around content. It is best when users need stable navigation and predictable page composition across many screens.
How to Design Layout?
Start with the page skeleton and define responsive behavior for each region, especially side navigation collapse and content growth. Keep spacing, surface contrast, and breakpoint behavior systematic to preserve usability at every size.
How Layout Component is Designed in Ant Design System for Figma?
In Ant Design System for Figma, Layout patterns mirror Ant page-shell conventions using standardized frames, spacing, and elevation tokens. This helps designers create screens that map directly to Ant Design Layout usage in code.
Related components
- Divider
Divider component in Ant Design of React helps to separate items from each other.
- Flex
Flex in Ant Design of React is a component that helps to align items vertically and horizontally.
- Grid
Grid in Ant Design of React is a component that helps to align items horizontally.
- 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.