Beyond Pixel Perfect

A responsive design approach with flexible units.

Author

TaktForm
November 12, 2024

Introduction

We've all been there - a beautiful desktop design meticulously crafted that shatters on mobile. As designers and developers working with Figma and Webflow, mastering responsive design units is key to creating truly adaptable websites. This guide cuts through the complexity of responsive units, showing you exactly when and how to use each one effectively in just about 10 minutes.

In this post we'll talk about:

  • The Perks of Responsive Design in Webflow and Figma

  • The Most Common Design Unit

  • Responsive Design Units

  • When Should You Use Pixels?

  • Common Pitfalls and How to Avoid Them

  • Resources for Responsive Design in Figma

  • Key Takeaways

The Perks of Responsive Design in Webflow and Figma

Apart from the obvious perk that your design will look good on every screen, some of the less obvious benefits of responsive design are:

  1. Lower Customer Drop-offs: While your Target Audience will have their device preferences, to reduce customer drop offs, consistent UX implementation needs to be ensured across all breakpoints.

  2. Improved Search Ranking: Google prioritizes mobile-friendly websites in its search rankings.

  3. Efficient Workflow: Designing responsively in Figma and implementing in Webflow streamlines the design-to-development process saving effort and time.

The Most Common Design Unit

Pixels (px) are perhaps the most commonly used and widely recognized design units. Every designer and developer will be well acquainted with them. They are however fixed units and not variable or responsive. 

.element {
    width: 300px;
}

Figma: Primarily uses pixels for sizing elements.

Webflow: Supports pixel values and has them applied by default.

Pros: Precise control, consistent across devices.

Cons: Not inherently responsive, requires breakpoints for adaptability and much more minute oversight.

Now let’s not demonize pixels, they absolutely have their very important place in the design and development world. A few examples of that are shared later in this post.

Responsive Design Units

Now let's go over some popular responsive design units and how they apply in both Figma and Webflow:

Percentages (%) in Responsive Layouts

Percentages are relative to the parent element's size: 

.element {
    width: 50%;
}

Figma: Doesn’t directly support it, but can be mimicked using constraints and auto-layout.

Webflow: Easily implement percentage-based widths for responsive layouts.

Pros: Naturally responsive, easy to understand.

Cons: Can be unpredictable if parent sizes aren't carefully managed. Can specifically backfire if used for text sizes.

Em (em) for Scalable Typography

Em units are relative to the immediate parent element's font size, creating a cascading effect in your typography system: 

.card {
    font-size: 16px;          /* Base size for the card */
}
.card-title {
    font-size: 1.5em;         /* 24px - scales with card */
    margin-bottom: 0.5em;     /* 12px - proportional spacing */
}
.card-description {
    font-size: 0.875em;       /* 14px - smaller than base */
    line-height: 1.4em;       /* Maintains proportion */
}

Figma: Doesn’t directly support em.

Webflow: Fully supports em for both layouts and typography.

Pros: Scales with font size, good for maintaining proportions.

Cons: Can quickly compound when nested, leading to unexpected results that can be confusing to debug. Too many divs inside other divs all using em start to become unmanageable quickly. 

/* Demonstrating em compounding */
.navigation {
    font-size: 16px;              /* Base size */
}
.nav-item {
    font-size: 0.875em;           /* 14px */
}
.nav-item .sub-menu {
    font-size: 0.875em;           /* 12.25px - compounds from parent */
}
.sub-menu .deep-item {
    font-size: 0.875em;           /* 10.72px - gets too small! */
}

/* Better approach using rem */
.nav-item { font-size: 0.875rem; }
.sub-menu { font-size: 0.875rem; }
.deep-item { font-size: 0.875rem; }

Root Em (rem) for Consistent Sizing

Rem units are relative to the root element's font size. I use rem for setting all my typography, margins, paddings etc. and then start implementing the design. The default font size is taken as 16px for the sake of planning: 

html {
    font-size: 16px;
}
.element {
    font-size: 1.2rem;   /* Will be 19.2px (16px * 1.2) */
    padding: 1rem;       /* Will be 16px (16px * 1) */
}

Figma: Doesn’t directly support rem, but can be planned for in your design system by assuming 16px = 1rem.

Webflow: Fully supports rem for both layouts and typography.

Pros: Consistent scaling across the site, avoids compounding issues.

Cons: Requires setting a base font size on the root element.

Viewport Units (vw, vh, vmin, vmax)

These units are relative to the viewport's dimensions. These are what you will be ideally using to create layouts that span your entire screen.

  • vw: Viewport Width

  • vh: Viewport Height 

.hero-section {
    height: 80vh;
}

Figma: Doesn’t directly support viewport units.

Webflow: Fully supported.

Pros: Adapts to screen size.

Cons: Best avoided for text sizing as it can create issues on extreme screen sizes.

Viewport Minimum (vmin) and Maxium (vmax)

These units are also based on the viewport's dimensions, but with a twist.

A vmin is 1% of the viewport's smaller dimension (either width or height, whichever is smaller)

Similarly a vmax is 1% of the viewport’s larger dimension (either width or height, whichever is larger) 

.hero-section {
    min-height: 80vh;         /* Tall but not full screen */
    padding: 5vh 5vw;         /* Proportional spacing */
}

.side-margin {
    margin: 0 max(2rem, 5vw); /* Responsive with minimum */
}

/* Fluid hero text */
.hero-title {
    font-size: min(5vw, 3rem);/* Scales down, but not up */
}

/* Common responsive patterns */
.content-section {
    /* Padding that scales with viewport but has limits */
    padding-inline: clamp(1rem, 5vw, 3rem);
    
    /* Maintain reasonable reading width */
    width: min(90vw, 1200px);
    margin-inline: auto;
}

Figma: Doesn't directly support these units.

Webflow: Fully supported.

Pros: Great for creating designs that scale well on both portrait and landscape orientations.

Cons: Can be quite tricky to conceptualize at first, and may require more testing across devices.

vmin is particularly useful for responsive typography that needs to scale based on screen size but shouldn't get too large on wide screens.

Fractional Units (fr) in Webflow Grid

Primarily used in CSS Grid to distribute available space, 1fr is one fraction of the available space. If you have 2 columns inside your grid and give each of them 1fr, you essentially make them each 50% of the grid container. 

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

Figma: Not supported directly, but can be simulated using auto-layout and flexible widths.

Webflow: Fully supported in Webflow's grid system and applied by default.

Pros: Excellent for creating adaptive grid layouts making responsiveness a breeze. Cons: Limited to grid contexts.

Character Units (ch)

I love using the 'ch' unit when I'm working on typography. It's based on the width of the '0' character in the current font, making it perfect for controlling line lengths. It is bad UX to have sentences spread across the entire length of the screen (on larger displays, not mobile or tablets). Using ch allows you to remedy this easily. 

.paragraph {
    max-width: 60ch;
}

This nifty little unit helps ensure that the text blocks maintain a comfortable reading width across different fonts and sizes.

Fluid Units (clamp)

Sometimes we want our values to be responsive but within reason. That's where clamp() comes in - it lets us set minimum and maximum boundaries while allowing values to scale smoothly between them. 

/* Without clamp - text might get too small or too large */
.heading {
    font-size: 5vw;
}

/* With clamp - text scales smoothly but stays within bounds */
.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* Minimum: 1.5rem (24px)
       Preferred: 5vw (scales with viewport)
       Maximum: 3rem (48px) */
}

/* Real-world example: Responsive padding that never gets too tight or too loose */
.content-container {
    padding: clamp(1rem, 5vw, 3rem);
    /* Minimum: 1rem (comfortable on mobile)
       Preferred: 5vw (scales with viewport)
       Maximum: 3rem (doesn't get excessive on large screens) */
}

/* Maintaining readable line lengths */
.text-content {
    width: clamp(300px, 90vw, 900px);
    /* Minimum: 300px (never too narrow)
       Preferred: 90vw (adapts to viewport)
       Maximum: 900px (maintains readability) */
}

Figma: Doesn't support clamp.

Webflow: Fully supports clamp for creating fluid, bounded values.

Pros:

  • Creates smooth scaling between breakpoints

  • Prevents extreme values on very small or large screens

  • Reduces the need for media queries

  • Perfect for fluid typography and spacing

Cons:

  • Slightly more complex syntax

  • Requires careful planning of min/max values

  • Needs fallback for older browsers

When should you use pixels?

  1. Borders: Avoid using rem or em on borders. Border typically are 2px, to achieve that with rem you will need to use 0.125rem. This unnecessarily adds complexity and brings very little value. The difference 2px will make to any otherwise responsive website is likely negligible.

  2. Box Shadows: Similar to borders, it's often better to use pixels for box shadows. The visual effect of shadows is often subtle, and using rem or em can lead to inconsistent appearances across different screen sizes. With pixels you can minutely control and lock down the x and y spread of your shadows along with the blur.

  3. Icon Sizes: For icons that need to maintain a specific visual weight regardless of the surrounding text size, using pixels is the logical implementation.

Common Pitfalls and How to Avoid Them

  1. Not Testing Thoroughly: Use both Figma's prototyping and Webflow's preview mode to test your designs across various devices and scenarios.

  2. Responsive Testing: In Webflow you can simply adjust the preview mode’s width by clicking and dragging the edge of the preview. See how well your design adapts to the increasing and decreasing of width.

  3. Creating Design for Every Breakpoint: Having designs for every breakpoint will ensure a smoother handoff process. This leaves little open to interpretation and makes sure you have a consistent design language throughout your site.

Resources for Responsive Design in Figma

Figma Plugins:

  • "Responsify" for creating responsive layouts.

  • "Breakpoints" for visualizing different screen sizes.

  • ”Type Scale“ can help you plan your typography in Figma for implementation in Webflow.

Key Takeaways

  • Leveraging Responsive Design Units: They are crucial for creating flexible, adaptable web layouts that look polished on all screen sizes.

  • Think Flexibly: Remember, effective responsive design is about more than just using the right units—it's about thinking flexibly and considering how your design will adapt to different contexts and screens.

  • Practice and Experiment: In both Figma and Webflow, you'll develop an intuition for creating designs that are both visually stunning and functionally responsive.

  • Think in rems: It might take some time, but thinking more in rem instead of px will help in the long run.

  • No Hard and Fast Rules: As with a lot of things related to design and development, evaluate your project and see what units fit best where. It is best to approach it with a use-case based reasoning.

Happy designing and developing! May your designs be responsive and your load times be low!

If you need a great and responsive design for your digital product, hit us up at [email protected].