Adaptive Design is a UI/UX design approach in which an interface is intentionally created for different predefined screen sizes, device categories, or layout states. Instead of depending on one continuously changing layout, adaptive design uses specific layouts or component arrangements for important breakpoints such as desktop, tablet, and mobile.
In Figma, Adaptive Design can be created using frames, Auto Layout, constraints, layout guides, components, variants, variables, and prototypes. Auto Layout helps elements respond to content and available space, while separate breakpoint-specific frames or component variants can represent intentionally different interface states.
Learn more with JustAcademy Figma Training and Register for Figma Course Demo.
Adaptive Design is a design methodology where an interface uses predefined layouts or layout states for different screen sizes or contexts. Each layout is designed specifically to provide a suitable user experience at that size.
For example, a website may have a desktop layout with a full navigation bar, a tablet layout with a simplified navigation, and a mobile layout with a hamburger menu.
Adaptive Design means creating different versions of an interface for selected screen sizes or conditions instead of relying on one continuously fluid layout.
In Figma, adaptive design can be represented with separate frames for different layout states, reusable components, component variants, Auto Layout, constraints, layout guides, and prototype flows.
| Adaptive Design | Responsive Design |
|---|---|
| Uses predefined layout states. | Uses a more continuously flexible layout. |
| Major changes can occur at defined breakpoints. | Elements generally reflow as available space changes. |
| Often uses separate frames or variants. | Often relies heavily on Auto Layout and flexible sizing. |
| Provides strong control over specific screen categories. | Provides flexibility across many intermediate widths. |
| Useful when layouts need significant structural differences. | Useful when the same structure can fluidly adapt. |
| Fixed Design | Adaptive Design |
|---|---|
| Usually targets one specific size. | Targets multiple predefined sizes. |
| Limited flexibility. | Provides multiple intentional layout states. |
| May break on other devices. | Provides dedicated layouts for selected devices. |
A fluid design continuously changes dimensions according to available space. Adaptive design instead establishes selected layout states and changes the interface when a defined state is reached.
Define Requirements
↓
Identify Screen Categories
↓
Define Breakpoints
↓
Define Layout States
↓
Create Figma Frames
↓
Build Components
↓
Apply Auto Layout
↓
Apply Constraints
↓
Create Variants
↓
Prototype
↓
Test
↓
Document
↓
Developer Handoff
A layout state represents a deliberately designed version of an interface for a particular screen category or condition.
A breakpoint is a defined width or condition at which the layout changes from one design state to another.
Adaptive design does not require every possible device width to have a separate design. Instead, designers normally select meaningful layout states based on content and usability requirements.
Do not select breakpoints only because a particular device exists. Choose breakpoints where the current layout stops working well.
Large Desktop
↓
Desktop
↓
Tablet
↓
Mobile
A content-driven breakpoint is selected when the interface requires a structural change. For example, if six navigation items no longer fit comfortably in one row, the navigation may switch to a different layout.
| Category | Typical Purpose | Possible Layout |
|---|---|---|
| Mobile | Phones | Single-column layout |
| Tablet | Medium screens | Two-column or compact layout |
| Desktop | Laptops and monitors | Multi-column layout |
| Large Desktop | Wide monitors | Max-width centered layout |
Mobile layouts normally prioritize essential content, simplify navigation, reduce horizontal complexity, and provide touch-friendly controls.
Tablet layouts can act as an intermediate state between mobile and desktop. They may use two-column structures, compact navigation, and larger content areas than mobile.
Desktop layouts can use multiple columns, expanded navigation, sidebars, larger content areas, and additional supporting information.
Large desktop layouts should prevent content from becoming excessively wide. A maximum content width can maintain readability and visual hierarchy.
Separate frames allow designers to intentionally create different compositions for different screen categories.
Desktop Frame
├── Full Navigation
├── Sidebar
├── Multi-column Content
└── Expanded Actions
Tablet Frame
├── Compact Navigation
├── Optional Sidebar
└── Reduced Columns
Mobile Frame
├── Mobile Navigation
├── Single Column
└── Prioritized Actions
Create separate Figma frames when a layout needs major structural differences. Name frames clearly so designers and developers can identify the intended state.
Home / Desktop
Home / Tablet
Home / Mobile
A good adaptive page maintains a logical hierarchy while allowing structural changes between layout states.
Adaptive interfaces should use meaningful parent-child relationships. A page can contain sections, sections can contain containers, and containers can contain components.
Frames are the foundation for creating screen-specific layouts in Figma. Each adaptive state can be represented using a dedicated frame.
Auto Layout is highly useful inside adaptive layouts because it automatically arranges elements according to direction, spacing, padding, alignment, and resizing settings. Figma supports vertical, horizontal, and grid Auto Layout flows.
In Figma, select the required layers and use Shift + A to add Auto Layout.
Vertical Auto Layout arranges elements from top to bottom. It is useful for mobile screens, forms, cards, page sections, and content lists.
Title
↓
Description
↓
Image
↓
Button
Horizontal Auto Layout arranges elements from left to right. It is useful for navigation bars, button groups, toolbars, and icon rows.
Grid Auto Layout can organize content into rows and columns. It can be useful for galleries, dashboards, and structured card layouts.
Padding defines the internal space between the boundary of an Auto Layout frame and its children.
Gap defines the space between elements inside an Auto Layout container.
Alignment controls how child elements are positioned relative to their Auto Layout container.
Hug Contents allows an Auto Layout frame to size itself according to its child content. This is especially useful for buttons, badges, labels, and compact components.
Fill Container allows a child element to occupy the available space within its parent Auto Layout container.
Fixed sizing keeps an element at a specified width or height. Use it carefully when designing adaptive interfaces because excessive fixed dimensions can reduce flexibility.
Minimum width or height prevents a component from becoming smaller than a specified size. This is useful for buttons, cards, input fields, and content containers.
Maximum dimensions prevent a component from becoming excessively large. Max-width is particularly useful for maintaining readable content on wide screens.
Nested Auto Layout allows different parts of an interface to use different layout directions. For example, a card can use vertical Auto Layout while its action row uses horizontal Auto Layout.
Constraints define how layers respond when their parent frame is resized. They can control relationships such as left, right, top, bottom, center, and scale.
| Auto Layout | Constraints |
|---|---|
| Controls flow and spacing. | Controls relationship to a parent frame. |
| Excellent for content-driven components. | Useful for positioning elements during resizing. |
| Works with horizontal, vertical, and grid flows. | Controls horizontal and vertical behavior. |
| Ideal for reusable components. | Useful for positioned elements and nested frames. |
An adaptive container is a layout container designed to work correctly within a particular screen state while maintaining consistent internal spacing and hierarchy.
Maximum width prevents content from expanding indefinitely on large screens. A centered content container with a maximum width is often useful for websites and dashboards.
Adaptive and fluid techniques can be combined. For example, a design may use separate mobile, tablet, and desktop layout states while allowing the content inside each state to expand or shrink using Auto Layout.
Layout guides help designers align content consistently inside frames. Figma provides uniform grid, column, and row layout guides.
Column guides are useful for designing desktop and tablet structures where content is organized into multiple vertical areas.
Gutters define the space between columns. Consistent gutters improve visual rhythm and alignment.
Margins define the outer spacing between the content area and the frame edges.
The 8-point grid system uses multiples of 8 as a spacing reference. It can help maintain consistency in spacing, sizing, and alignment.
An adaptive grid can use different column counts, margins, and gutters for different layout states.
A desktop grid may use many columns to support complex layouts, dashboards, landing pages, and multi-column content.
A tablet grid usually reduces the number of columns and simplifies content relationships.
A mobile grid generally focuses on a smaller number of columns and stronger horizontal margins to keep content readable.
Typography can change between adaptive states. Headings may become smaller on mobile, while body text and interactive controls should remain readable.
Maintain clear relationships between headings, subheadings, body text, labels, and supporting text across all layout states.
Spacing may be reduced on smaller screens while preserving sufficient separation between important sections and interactive elements.
Images may change size, crop, position, or visibility between layout states.
Maintain suitable image aspect ratios unless a deliberate crop is required for a specific layout state.
A desktop card may display image, title, description, metadata, and actions horizontally or in multiple areas, while a mobile card may stack those elements vertically.
Desktop Card
┌───────────────┬──────────────────────┐
│ Image │ Title │
│ │ Description │
│ │ Action │
└───────────────┴──────────────────────┘
Mobile Card
┌─────────────────────────────┐
│ Image │
├─────────────────────────────┤
│ Title │
│ Description │
│ Action │
└─────────────────────────────┘
Buttons can change width, placement, and grouping between adaptive states. A horizontal group of buttons on desktop may become a vertical group on mobile.
Input fields should provide enough width for their content while remaining usable on smaller screens.
Desktop forms can use multiple columns, while mobile forms often use a single-column structure.
Headers commonly undergo major changes between desktop and mobile layouts.
Desktop
Logo | Navigation | Search | Account
Tablet
Logo | Compact Navigation | Account
Mobile
Logo | Menu | Account
Navigation should prioritize the most important destinations. Secondary navigation can be collapsed or moved into another interaction pattern.
A desktop sidebar may become a collapsible drawer or disappear into a menu on smaller screens.
Large desktop footers may use multiple columns, while mobile footers may stack sections vertically.
Large tables can be difficult to display on mobile. An adaptive approach may reduce columns, allow horizontal scrolling, or transform rows into cards.
Dashboards often require major layout changes. A desktop dashboard may show multiple widgets side by side, while mobile may display one widget per row.
An e-commerce interface can change product grids, filters, navigation, product cards, and checkout structures across screen categories.
A desktop landing page may place text and imagery side by side, while the mobile layout may stack the content vertically.
Large desktop dialogs can use fixed dimensions, while mobile dialogs may become nearly full-screen sheets or vertically stacked layouts.
Lists may change from horizontal cards to vertical cards or compact rows depending on the available screen space.
Desktop search may appear as a wide field in the header, while mobile may use an icon, expandable field, or dedicated search screen.
Desktop filters can appear in a sidebar, while mobile filters can be placed inside a filter button or bottom sheet.
Tabs may remain horizontal on desktop but require scrolling, compression, or an alternative selector on smaller screens.
Reusable components make adaptive design easier to maintain. Instead of rebuilding every screen element, create reusable components and adapt their structure or properties where necessary.
An adaptive component is a reusable component designed to support multiple layout states or configurations.
Figma component variants can represent meaningful component states. For example, a navigation component may have Desktop, Tablet, and Mobile variants when the component structure genuinely changes.
Navigation
├── Desktop
├── Tablet
└── Mobile
Breakpoint variants should represent meaningful structural differences rather than every minor size change.
Component properties can help control text, visibility, instance swaps, and other reusable configuration options.
Do not create a separate variant for every tiny visual difference. Excessive variants make component libraries difficult to understand and maintain.
| Component State | Breakpoint Variant |
|---|---|
| Hover | Desktop |
| Pressed | Tablet |
| Disabled | Mobile |
| Focused | Large Desktop |
Adaptive design becomes more scalable when it is part of a design system containing reusable components, styles, variables, spacing rules, typography rules, and documented layout behavior.
Design tokens can represent reusable values such as spacing, typography, colors, radii, and dimensions. Different modes or values can be used when a design system requires contextual variation.
Figma variables can centralize reusable design values and reduce repetitive manual updates.
Variable modes can be useful when the same design system needs different values for different contexts. Use them carefully and document their intended purpose.
A design system can define typography values that support different contexts while preserving a consistent hierarchy.
Spacing tokens can help maintain consistent gaps and padding across desktop, tablet, and mobile layouts.
Adaptive design may intentionally hide secondary elements on smaller layouts to protect content priority and usability.
Elements may change order between layouts. For example, a desktop sidebar may appear below the main content on mobile.
Horizontal desktop layouts often become vertical stacks on mobile.
Adaptive design requires deciding which content is essential, secondary, or optional for each layout state.
Desktop layouts can expose additional navigation, supporting information, filters, sidebars, and multi-column content because more screen space is available.
Interactive elements should remain large enough and sufficiently separated for comfortable touch interaction on mobile and tablet interfaces.
Adaptive layouts must preserve accessibility. Changing the visual arrangement should not make information difficult to understand or interactions difficult to operate.
Keyboard and accessibility focus states should remain visible and logically ordered across all layout states.
Whether a design is responsive or adaptive, accessibility requirements remain important. Text readability, keyboard navigation, contrast, focus indicators, semantic order, and usable controls should be considered at every layout state.
Figma prototypes can demonstrate different screen states and user flows. Separate desktop, tablet, and mobile frames can be connected to show how the experience changes.
Desktop Home
↓
Desktop Product
↓
Desktop Checkout
Mobile Home
↓
Mobile Product
↓
Mobile Checkout
Testing should verify every defined layout state rather than checking only the primary desktop screen.
Resize frames and components to identify unexpected wrapping, overflow, excessive whitespace, broken alignment, and incorrect sizing.
Review designs at representative mobile, tablet, and desktop sizes. Also inspect intermediate widths where the current layout may approach its limits.
Use realistic long titles, descriptions, names, and labels. Short placeholder text can hide layout problems.
Check whether content overflows its container when text becomes longer or when the screen becomes smaller.
Translated text may become longer than the original language. Adaptive components should have enough flexibility to handle longer labels.
Developers need clear information about layout states, breakpoints, component behavior, spacing, typography, visibility rules, and content priority.
Document what changes at each breakpoint rather than simply providing multiple screenshots.
| Layout | Navigation | Columns | Sidebar | Actions |
|---|---|---|---|---|
| Desktop | Full | 3 | Visible | Horizontal |
| Tablet | Compact | 2 | Optional | Reduced |
| Mobile | Menu | 1 | Hidden | Stacked |
A specification table makes layout behavior easier to understand during design review and development.
Create a dedicated Figma playground containing buttons, cards, navigation, forms, grids, and other components. Test each component at every defined layout state before using it in a complete screen.
Adaptive Design Project
├── Cover
├── Foundations
├── Components
├── Desktop
├── Tablet
├── Mobile
├── Prototype
├── Documentation
└── Archive
Create a button component with text, icon, padding, and Auto Layout. Create appropriate configurations for desktop and mobile usage without unnecessarily duplicating the component.
Button
├── Label
├── Optional Icon
├── Horizontal Auto Layout
├── Padding
├── Gap
└── Hug Contents
Create a product card that uses a horizontal arrangement on desktop and a vertical arrangement on mobile.
Create a navigation component with full desktop navigation, compact tablet navigation, and mobile menu behavior.
Design a desktop login screen with an illustration beside the form and a mobile version where the illustration is removed or moved below the primary content.
Create a dashboard with multiple desktop columns, fewer tablet columns, and a single-column mobile layout.
Create desktop, tablet, and mobile versions of an e-commerce page containing navigation, filters, product cards, sorting, and cart actions.
Create an adaptive landing page containing a hero section, features, testimonials, pricing, and footer. Define how every section changes between desktop, tablet, and mobile.
Designer Creates Layout
↓
Test Desktop
↓
Test Tablet
↓
Test Mobile
↓
Check Components
↓
Check Accessibility
↓
Check Content
↓
Document Differences
↓
Developer Review
↓
Final Approval
Research
↓
Content Analysis
↓
Screen Categories
↓
Breakpoint Strategy
↓
Wireframes
↓
Desktop Layout
↓
Tablet Layout
↓
Mobile Layout
↓
Component System
↓
Auto Layout
↓
Constraints
↓
Variables
↓
Prototype
↓
Testing
↓
Documentation
↓
Developer Handoff
| Term | Meaning |
|---|---|
| Adaptive Design | Design approach using predefined layout states. |
| Breakpoint | Point at which a layout state changes. |
| Frame | Container used to create a screen or layout. |
| Auto Layout | Figma feature for arranging and resizing elements based on layout rules. |
| Constraint | Rule controlling how a layer responds to parent resizing. |
| Variant | Alternative configuration of a component. |
| Layout Guide | Visual alignment structure for frames. |
| Hug Contents | Sizes an Auto Layout frame around its content. |
| Fill Container | Makes an object fill available parent space. |
| Min Width | Prevents an object from becoming smaller than a specified width. |
| Max Width | Prevents an object from becoming larger than a specified width. |
Adaptive Design is an approach where predefined layouts are created for selected screen sizes or contexts.
Adaptive design generally uses discrete layout states, while responsive design emphasizes continuous flexibility and reflow across available space.
It provides strong control when an interface requires significant structural changes between screen categories.
Use frames, Auto Layout, constraints, components, variants, variables, layout guides, and prototypes to build and test the required layout states.
Auto Layout automatically arranges child elements according to direction, spacing, padding, alignment, and resizing rules.
Hug Contents allows an Auto Layout frame to resize around its child content.
Fill Container allows a child element to occupy available space in its parent Auto Layout container.
Constraints define how layers respond when their parent frame is resized.
Use variants when a reusable component needs meaningful alternative configurations or states.
Breakpoints should be selected according to content and usability requirements rather than arbitrary device names alone.
A desktop sidebar can remain visible, a tablet sidebar can become compact, and a mobile sidebar can become a drawer or menu.
Realistic content reveals wrapping, overflow, spacing, and sizing problems that placeholder content may hide.
An adaptive component is a reusable component designed to support different configurations or layout states.
They prevent components from becoming too small or excessively large as available space changes.
Documentation tells developers exactly what changes at each layout state and reduces guesswork during implementation.
Adaptive Design
↓
Defined Layout States
↓
Breakpoints
↓
Content Priority
↓
Adaptive Components
↓
Auto Layout
↓
Constraints
↓
Prototype
↓
Testing
↓
Documentation
Adaptive Design is an important UI/UX approach for creating interfaces that provide intentionally designed experiences across different screen categories. Instead of forcing one composition to work everywhere, adaptive design allows designers to make deliberate structural decisions for desktop, tablet, mobile, and other important contexts.
In Figma, an effective adaptive workflow combines frames, Auto Layout, constraints, layout guides, components, variants, variables, and prototypes. Auto Layout can handle content-driven resizing within a layout, while separate frames or meaningful variants can represent major structural differences between layout states.
The most important goal is not simply to create multiple screen sizes, but to create a consistent, usable, accessible, and well-documented experience at every important layout state.
For structured learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
