Responsive layouts

Default viewport

When designing, our main focus is to optimise Productboard for enterprise customers who usually own a device with larger viewport. While this allows you to increase the information density on the scene, simply designing for one does not meet the required standard for modern web. You should always check whether the design works for major breakpoints and add necessary changes and rules where need be.

Type scaling

We scale text size according to each breakpoint. You don’t need to make any manual text style changes between them as this is applied globally for the same type scale. Smaller breaks reduce the size of headings, while in the largest breakpoint we increase the size of the body text to make better use of additional space.

Using breakpoints in Figma

In Figma, breakpoints are supported as variable collections. You can simply swap the collection to a different break and preview how your design looks on different device.

Component variants

Sometimes, you’ll need a separate component or variant for particular breakpoint, f.e. switching navigation panel to mobile layout on smaller viewports. We have a specific Figma variable for this called component-responsive. You can create create responsive variants by:

1. Creating a component with a variant for each breakpoint change.
2. Name the variants according to the breakpoint mode, f.e. “xl“, “lg“…
3. Place an instance of the component in your design.
4. In the props panel, assign component-responsive to the variant
5. Done! You should now see component swapping between variants when you’re swapping variable collections. 🥳

Since we’re saving responsive variants inside a Figma variable, you can also alter all components inside a prototype. This gives you a powerful way to modify many components at once using a simple trigger.

In the example above, we’re showcasing a single responsive frame in Figma prototype by changing one mode and variable.

Best practices