JustAcademy Figma Training provides practical UI/UX design learning with Figma, including responsive layouts, components, design systems, prototyping, and real-world projects. You can also Register for Figma Course Demo to explore the training program.
Fixed Dimensions in Figma means setting a specific width or height for a layer, frame, component, or object so that its dimension remains constant. When a layer has a fixed width of 300px, for example, its width remains 300px unless the designer manually changes it or another layout rule changes the design behavior.
Fixed dimensions are especially useful when designing elements that need predictable and consistent sizes, such as icons, avatars, buttons with standardized widths, navigation bars, images, input fields, cards, mobile screens, desktop containers, and design-system components.
Fixed Dimensions means assigning a specific numerical width, height, or both to an element so that the dimension does not automatically change according to its surrounding content.
Width = 300px
Height = 200px
Result = Fixed 300 × 200
Fixed dimensions are commonly used together with Figma Auto Layout. Auto Layout controls how elements are arranged, while Fixed Width or Fixed Height controls a particular dimension.
Auto Layout Frame
|
+-- Icon → Fixed 24 × 24
|
+-- Text → Flexible
|
+-- Button → Fixed Height 44px
Figma allows Fixed Width and Fixed Height to be used on Auto Layout frames and their child objects. Fixed sizing keeps the selected dimension unchanged even when surrounding spacing or other objects change.
Fixed Width means that the width of an object remains at a specific value.
Width = 320px
Height = 200px
If the width is fixed at 320px, changing nearby objects does not automatically change the object's width.
A desktop sidebar can use a fixed width of 280px.
Sidebar
Width: 280px
Height: Fill available screen
Fixed Height means that the height remains at a specific value.
Height = 48pxFixed height is frequently used for buttons, input fields, navigation bars, headers, tabs, and toolbar elements.
Button
Width = 120px
Height = 48px
Both dimensions can be fixed at the same time.
Card
Width = 320px
Height = 240px
This produces a predictable 320px × 240px card.
| Feature | Fixed | Hug Contents |
|---|---|---|
| Dimension | Specific value | Based on content |
| Content changes | Dimension normally stays fixed | Dimension can change |
| Best for | Predictable sizes | Content-driven components |
| Example | 320px card width | Button based on label |
| Feature | Fixed | Fill Container |
|---|---|---|
| Behavior | Maintains specified dimension | Uses available parent space |
| Responsive behavior | Limited | More flexible |
| Typical use | Icons, avatars, fixed cards | Search fields, content areas |
Fixed Dimensions control the size of an object. Position controls where the object is placed.
Position
X = 40px
Y = 80px
Dimensions
W = 300px
H = 200px
These are separate properties and should not be confused.
Width and height can have different resizing behaviors.
Width = Fixed 320px
Height = Hug Contents
This is useful for cards that should maintain a consistent width but grow vertically according to their content.
This is one of the most useful combinations in UI design.
Product Card
Width = Fixed 320px
Height = Hug Contents
The card maintains a predictable width while its height grows when more content is added.
A component can have a fixed height while filling the available width.
Input Field
Width = Fill Container
Height = Fixed 48px
This pattern is common for forms and responsive web interfaces.
Use Fixed Width and Fixed Height when both dimensions need predictable values.
Avatar
Width = 48px
Height = 48px
This is especially useful for circular avatars and icon containers.
Icons usually need consistent dimensions so that they align correctly with text and other interface elements.
Small Icon = 16 × 16
Medium Icon = 24 × 24
Large Icon = 32 × 32
Using fixed dimensions prevents icons from becoming unexpectedly large or small.
Avatars commonly use fixed width and height.
Avatar
Width = 40px
Height = 40px
Radius = 50%
For a larger profile image:
Profile Avatar
Width = 80px
Height = 80px
Radius = 50%
Buttons can use a fixed height to maintain consistent vertical alignment.
Primary Button
Height = 44px
Padding = 16px
Width = 120px
However, a button with variable text is often better with a Hug-based width rather than a permanently fixed width.
Input fields frequently use a fixed height and flexible width.
Input
Width = Fill Container
Height = 48px
This creates consistent input heights while allowing the field to adapt horizontally.
Navigation bars often use a fixed height.
Navbar
Width = Fill Container
Height = 72px
The width can adapt to the screen while the height remains consistent.
A website header can use a fixed height while its internal elements use different sizing behaviors.
Header
Height = 72px
Logo → Fixed
Menu → Flexible
Actions → Hug
Cards can use fixed dimensions when consistent card sizes are required.
Product Card
Width = 280px
Height = 360px
For dynamic content, a better approach can be Fixed Width + Hug Height.
Product Card
Width = Fixed 320px
Height = Hug Contents
Image → Fixed 320 × 200
Title → Content driven
Description → Content driven
Button → Content driven
This approach keeps product cards aligned horizontally while allowing different descriptions to occupy different heights.
This pattern can be useful when cards need to occupy a responsive row but maintain a standard height.
Card
Width = Fill Container
Height = Fixed 240px
Images may use fixed dimensions when the design requires consistent visual areas.
Image Container
Width = 320px
Height = 200px
When the image must preserve its proportions, use an appropriate aspect ratio rather than arbitrarily changing width and height.
Figma provides an aspect-ratio lock that can maintain the relationship between width and height while resizing an object.
Original
Width = 400px
Height = 300px
Aspect Ratio = 4:3
If the width changes while the aspect ratio is locked, the corresponding height can update proportionally.
Aspect ratio locking is useful for images, illustrations, videos, product thumbnails, and other visual elements where distortion should be avoided.
Image
Ratio = 16:9
Width = 320px
Height = 180px
When you manually resize an object or enter a specific value for its width or height, Figma can set the corresponding resizing property to Fixed for that axis.
Before
Width = Hug Contents
Manual width entered
Width = 300px
Result
Width = Fixed
Fixed dimensions can be used inside an Auto Layout frame to control individual children.
Parent Auto Layout
|
+-- Icon → Fixed 24px
+-- Text → Flexible
+-- Action → Fixed 40px
This provides predictable dimensions for selected elements while the parent manages overall arrangement.
An Auto Layout frame can contain multiple children with fixed dimensions.
Toolbar
|
+-- Search Icon → 24px
+-- Filter Icon → 24px
+-- Settings Icon → 24px
+-- Profile → 40px
Padding controls the internal spacing of an Auto Layout frame, while Fixed Dimensions control the frame's selected size.
Frame
Width = Fixed 320px
Left Padding = 24px
Right Padding = 24px
Top Padding = 16px
Bottom Padding = 16px
Always ensure that the fixed size provides enough space for the content and padding.
Gap controls the distance between children inside Auto Layout. A fixed parent dimension may limit the amount of available space for its children.
Parent Width = 320px
Padding = 20px
Gap = 16px
Child 1
Child 2
Child 3
If content becomes too large, review the combination of fixed sizing, padding, gap, and child resizing.
Fixed and Hug can be combined on different axes.
Card
Width = Fixed 320px
Height = Hug Contents
This is one of the most practical sizing combinations for UI cards.
Another common combination is:
Form
Width = Fill Container
Height = Fixed 48px
The element expands horizontally but maintains a consistent height.
Dashboard
|
+-- Sidebar → Fixed 280px
|
+-- Main Content → Fill Container
|
+-- Card → Fixed Width + Hug Height
+-- Card → Fixed Width + Hug Height
Nested Auto Layout allows different parts of the interface to use different sizing strategies.
A dashboard sidebar commonly uses a fixed width.
Sidebar
Width = 280px
Height = Fill Container
The main content area can then use the remaining available space.
Dashboard cards can use fixed widths when a consistent grid is required.
Card
Width = 280px
Height = Hug Contents
Alternatively, cards can fill grid columns when responsive behavior is required.
Tables often contain columns that need predictable widths.
Table
Name Column = 240px
Status Column = 120px
Date Column = 140px
Actions Column = 100px
Use fixed column widths when consistent alignment is more important than automatic expansion.
Navigation icons should generally have a consistent size.
Dashboard Icon = 24 × 24
Users Icon = 24 × 24
Settings Icon = 24 × 24
A logo can use fixed dimensions to maintain a consistent brand presentation.
Logo
Width = 120px
Height = Auto / proportionally maintained
For logos with a known aspect ratio, lock the aspect ratio rather than forcing unrelated width and height values.
Badges may use fixed dimensions when the design system requires standardized sizes.
Badge
Width = 80px
Height = 24px
However, badges containing variable text often benefit from Hug Contents width with a minimum width.
A notification component can use a fixed width and dynamic height.
Notification
Width = Fixed 360px
Height = Hug Contents
This prevents the notification from becoming excessively wide while allowing longer messages to increase its height.
Desktop modal dialogs often use a controlled width.
Modal
Width = Fixed 520px
Height = Hug Contents
The height can grow according to the content while the width remains predictable.
Dialogs that need a consistent presentation can use fixed width and a content-driven height.
Dialog
Width = 480px
Height = Hug Contents
Mobile UI designs frequently use fixed heights for touch targets and controls.
Bottom Navigation
Width = Fill Container
Height = Fixed 64px
Individual icons can remain fixed at 24px.
Desktop interfaces commonly use fixed widths for sidebars, icons, buttons, and certain content containers.
Desktop Layout
Sidebar = 280px Fixed
Main = Fill Container
Icon = 24px Fixed
Fixed dimensions do not automatically mean that the entire design is non-responsive. Responsive layouts often combine Fixed, Fill, Hug, Minimum, and Maximum sizing.
Responsive Page
|
+-- Sidebar → Fixed
+-- Main → Fill
|
+-- Search → Fill
+-- Icon → Fixed
+-- Button → Hug
| Element | Recommended Behavior |
|---|---|
| Sidebar | Fixed Width |
| Search Field | Fill Width |
| Icon | Fixed |
| Button | Hug or Fixed Height |
| Card | Fixed/Fill Width + Hug Height |
| Content Area | Fill Container |
Minimum Width establishes a lower limit for the width of an element. It is useful when a component should not become smaller than a specific value.
Button
Minimum Width = 100px
Width = Hug Contents
The button can grow according to its content but should not become narrower than the minimum width.
Maximum Width establishes an upper limit.
Content
Width = Hug Contents
Maximum Width = 600px
This can be useful for content areas that should grow but should not become excessively wide.
| Property | Purpose |
|---|---|
| Fixed | Maintains a specific dimension |
| Minimum | Prevents the dimension from becoming too small |
| Maximum | Prevents the dimension from becoming too large |
Components often use fixed dimensions for standardized design-system elements.
Button Component
Height = Fixed 44px
Icon Button
Width = Fixed 40px
Height = Fixed 40px
Using consistent dimensions improves visual consistency across an entire product.
Component variants can use different fixed dimensions where appropriate.
Button Variants
Small → 32px Height
Medium → 40px Height
Large → 48px Height
The exact dimensions should be defined according to the project's design system.
Design systems frequently define standardized dimensions for controls and components.
Spacing
4px
8px
12px
16px
24px
32px
Controls
32px
40px
44px
48px
Fixed dimensions help teams create consistent interfaces across multiple screens.
Fixed dimensions work best when combined with a consistent spacing system.
Card
Width = 320px
Padding = 24px
Gap = 16px
This creates predictable internal structure.
Alignment determines how children are positioned within the available area. Fixed dimensions determine how much space the object occupies.
Parent
Width = 400px
Child
Width = Fixed 200px
Alignment = Center
Toolbar
[Icon 24px] [Search Flexible] [Button 100px]
The icons and button can remain fixed while the search field uses the remaining available space.
Form
[Label]
[Input 48px]
[Label]
[Input 48px]
[Button 44px]
Fixed heights provide consistent control sizing while the overall form can adapt to content.
Fixed dimensions can be useful for grid-based designs when cards or grid tracks need predictable sizing.
Grid
+---------+---------+---------+
| Card | Card | Card |
| 280px | 280px | 280px |
+---------+---------+---------+
Text containers need special attention. A fixed text box can restrict the available area for text and may cause wrapping or clipping depending on the text resizing behavior.
Text Container
Width = Fixed 300px
Height = Auto / appropriate content behavior
For responsive designs, avoid unnecessary fixed text-box dimensions when the content is expected to change significantly.
A fixed width can cause text to wrap into multiple lines. This can be useful when the design requires a controlled reading width.
Paragraph
Width = Fixed 600px
Text = Multiple lines
If the content changes significantly, check the text resizing mode and parent Auto Layout behavior.
Fixed height can become problematic when content is longer than expected.
Problem
Card Height = Fixed 200px
Content
Title
Long Description
Button
Footer
Possible Result
Content may not fit comfortably.
In content-heavy components, Fixed Width + Hug Height is often safer.
Translated text can be longer or shorter than the original text. A component with excessive fixed width may create problems when labels change.
English:
"Save"
Longer translation:
"Save Changes"
Better approach:
Fixed Height + Hug Width
Always test components with realistic multilingual content.
Buttons, tabs, chips, and badges often contain labels that can change. If the label is expected to vary, consider using Hug Contents width instead of a fixed width.
Button
Height = Fixed 44px
Width = Hug Contents
One of the most common mistakes is applying fixed width and height to every element.
This can make the design difficult to maintain and less responsive.
Incorrect
Everything = Fixed
Better
Important controls = Fixed
Content containers = Hug / Fill
Flexible areas = Fill
A button with a fixed width can fail when the label becomes longer.
Button
Width = Fixed 80px
Label = "Continue to Checkout"
Problem:
Text may not fit properly.
Use Hug Contents width when the button should adapt to its label.
Fixed text boxes can cause unexpected wrapping and overlap when the content changes.
For responsive content, use appropriate text resizing and Auto Layout behavior instead of unnecessarily fixing both dimensions.
Setting unrelated fixed width and height values on images can distort the image.
Original Image
400 × 300
Incorrect
400 × 150
Better
Maintain 4:3 ratio
400 × 300
320 × 240
240 × 180
A fixed frame must provide enough room for its content and padding.
Frame Width = 100px
Left Padding = 32px
Right Padding = 32px
Available content width = 36px
Always calculate whether the fixed dimension provides enough usable space.
Multiple children inside a fixed-width Auto Layout frame also require space for gaps.
Parent = 320px
Padding = 20px + 20px
Gap = 16px
Children = 3
Available space must account for
padding + gaps + child dimensions.
Nested frames allow different parts of a design to use different sizing strategies.
Page
|
+-- Header → Fixed Height
|
+-- Content → Fill
|
+-- Card → Fixed Width + Hug Height
|
+-- Image → Fixed
+-- Text → Flexible
+-- Button → Hug
Navigation icons can remain fixed while labels and containers respond to the available space.
Navigation Item
Icon = Fixed 24px
Label = Flexible
Item = Fill Width
Profile Row
Avatar = Fixed 48 × 48
Name = Flexible
Action = Fixed 40 × 40
This creates predictable alignment while allowing the name area to use remaining space.
Toolbar
|
+-- Icon → Fixed 24px
+-- Search → Fill Container
+-- Filter → Fixed 40px
+-- Profile → Fixed 40px
A dropdown menu can use a fixed width when all menu options need a consistent visual boundary.
Dropdown
Width = Fixed 240px
Height = Hug Contents
The height can grow according to the number of options.
Individual list items often use fixed heights when each row must be consistent.
List Item
Height = Fixed 56px
Width = Fill Container
For dynamic descriptions, use Hug Height instead.
List
Width = Fill Container
Height = Hug Contents
List Item
Width = Fill Container
Height = Hug Contents
Fixed dimensions can still be used for internal icons and controls.
Mobile interfaces often use standardized control heights and touch-target sizes.
Button
Height = Fixed 48px
Icon Button
Width = Fixed 48px
Height = Fixed 48px
When the same component appears repeatedly, fixed dimensions can make its visual appearance consistent.
Primary Button
Height = 44px
Every primary button
uses the same standard height.
| Situation | Recommended |
|---|---|
| Icon size | Fixed |
| Avatar size | Fixed |
| Sidebar width | Fixed |
| Input height | Fixed |
| Button height | Fixed |
| Dynamic button label | Hug Width |
| Responsive search field | Fill Width |
| Content-heavy card | Fixed Width + Hug Height |
Does the element need a specific size?
|
Yes
|
Use Fixed
|
No
|
Does it depend on its content?
|
Yes
|
Use Hug
|
No
|
Does it need available parent space?
|
Yes
|
Use Fill
Login Screen
|
+-- Header → Fixed Height
|
+-- Logo → Fixed
|
+-- Form → Responsive
|
+-- Email → Fill Width + Fixed Height
+-- Password → Fill Width + Fixed Height
+-- Login Button → Fill Width + Fixed Height
+-- Forgot Password → Hug
This combination creates a structured but responsive login interface.
Dashboard
|
+-- Sidebar
| Width = Fixed 280px
|
+-- Main Content
Width = Fill Container
This is a common desktop dashboard pattern.
Header
Height = Fixed 72px
Logo → Fixed
Search → Fill
Notification → Fixed
Profile → Fixed
Product Card
Width = Fixed 320px
Height = Hug Contents
Image
320 × 200 Fixed
Title
Content driven
Price
Content driven
Button
Hug Width
Fixed Height
Avatar
Width = Fixed 48px
Height = Fixed 48px
Shape = Circle
Create variants for Small, Medium, and Large avatar sizes.
Navigation Item
Width = Fill Container
Height = Fixed 44px
Icon = Fixed 24px
Label = Flexible
Badge = Hug
Notification
Width = Fixed 360px
Height = Hug Contents
Icon = Fixed
Message = Flexible
Close = Fixed
Modal
Width = Fixed 520px
Height = Hug Contents
Header
Content
Actions
The width provides predictable desktop presentation while the height can adapt to the content.
If an element is not behaving as expected, inspect its width and height settings.
Unexpected Size
|
v
Check W/H
|
v
Check Fixed / Hug / Fill
|
v
Check Parent Auto Layout
|
v
Check Padding + Gap
|
v
Check Child Layers
|
v
Check Text Resizing
|
v
Test Again
Fixed dimensions are useful during developer handoff because they communicate intended sizes for specific UI elements.
Component
Button Height = 44px
Icon = 24px
Avatar = 40px
Sidebar = 280px
Developers can use these values as design specifications while implementing the interface responsively.
Figma Fixed dimensions have a close conceptual relationship with explicit CSS width and height values.
.card {
width: 320px;
height: 240px;
}
However, Figma Auto Layout behavior is broader than simply setting CSS width and height because it also includes layout direction, padding, gaps, alignment, and resizing rules.
.sidebar {
width: 280px;
}
.main-content {
flex: 1;
}
.icon {
width: 24px;
height: 24px;
}
This is conceptually similar to a Figma layout where the sidebar and icon use fixed dimensions while the main content fills the available space.
| Property | Main Behavior | Common Example |
|---|---|---|
| Fixed | Specific dimension | Icon |
| Hug Contents | Fits content | Button |
| Fill Container | Uses available space | Search Field |
| Minimum | Sets lower limit | Button |
| Maximum | Sets upper limit | Content Area |
Fixed Dimensions mean assigning a specific width or height to an object so that the selected dimension remains predictable.
Yes. Fixed width and height can be used on Auto Layout frames and their child objects.
Fixed maintains a specified dimension, while Hug Contents allows an Auto Layout frame to size itself around its content.
Fixed maintains a specified size, while Fill Container makes a child occupy available space inside its Auto Layout parent.
They maintain consistent alignment and visual hierarchy across the interface.
No. Buttons with variable labels often work better with Hug Contents width.
Yes. For example, an element can use Fixed Width and Hug Height.
It keeps the card width consistent while allowing its height to grow according to content.
Consider text wrapping, content length, localization, and responsive behavior.
It helps preserve the proportional relationship between width and height when resizing visual elements.
Manual resizing can set the corresponding width or height resizing behavior to Fixed.
Yes. Modern responsive Figma layouts commonly combine these behaviors depending on the role of each element.
Fixed Dimensions
|
+-- Fixed Width
| → Width stays specific
|
+-- Fixed Height
| → Height stays specific
|
+-- Fixed Width + Height
| → Both dimensions are controlled
|
+-- Fixed + Hug
| → One axis predictable, another content-driven
|
+-- Fixed + Fill
| → One axis predictable, another responsive
|
+-- Fixed + Aspect Ratio
→ Proportions remain controlled
Fixed Dimensions are an important part of creating controlled and consistent interfaces in Figma. They allow designers to define predictable widths and heights for important UI elements while still combining those elements with Auto Layout, Hug Contents, Fill Container, minimum dimensions, and maximum dimensions.
The most effective Figma designs do not use Fixed sizing everywhere. Instead, designers choose Fixed when a dimension needs to remain predictable, Hug when an element should adapt to its content, and Fill when an element should occupy available space. Combining these behaviors creates flexible, maintainable, and responsive UI designs.
For more structured Figma and UI/UX learning, visit JustAcademy Figma Training or Register for Figma Course Demo.
