Christine Vallaure explains the new CSS property clamp() that I wasn’t familiar with: ​“Think of clamp() as a way to establish a ​“Goldilocks zone” for any value in CSS. Imagine a property that’s not too small, not too big, but just right — that’s what clamp() is all about. It allows you to set a minimum, an ideal value, and a maximum, making your design more adaptable and responsive.” 

While this article focuses on typography, clamp() also can be used for controlling padding, margins, or even widths. Depending on the viewport size, it can adjust in either direction, expanding from the minimum value to the maximum or shrinking as needed. 

Christine Vallaure shares an updated list of her old favorites and plenty of new tips, highlighting what you might have missed when working with components in Figma. (Thanks for the friend link!)

Christine Vallaure made a responsive and modular type scale using a scaling ratio approach.

Christine Vallaure’s talk at last year’s SmashingConf on CSS Container Queries and how designers can tackle them using Figma. If videos are not your jam, see her article on Why UI designers should understand Flexbox and CSS Grid.

Christine Vallaure shows how to use typography variables and modes to create responsive typography across different screen sizes. The video also covers applying multiple modes at once and automated typeface changes, such as for iOS and Android setups.

Christine makes a point that we can move beyond the rigid structure of fixed responsive breakpoints with modern CSS layouts, crafting flexible and dynamic designs that seamlessly adjust to different screen sizes. In this article, she covers responsive column-based design vs. modern CSS layout, CSS Flexbox and Grids, and questions if we still need breakpoints.

Christine Vallaure doesn’t like to rely on plugins too much, but in this article, she shares ​“some little helpers that I wouldn’t want to do without.” Some are time-tested tools, but others were completely new to me.

Christine Vallaure with the best Figma tips and tricks of the year! As you’d expect, this year’s edition of her regular roundup has a strong focus on Dev Mode, variables, prototyping, min/​max values, and slot components. Thanks to Christine for sharing a friend’s link with Figmalion readers! If you prefer watching to reading, check out her free video with these tips.

Christine Vallaure explains the basics of CSS Flexbox and how it translates to Figma’s Auto Layout. ​“Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS Grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.”

Christine Vallaure explains how to use boolean variables and modes to reduce the number of necessary components. One important caveat: ​“I would always recommend adding a documentation sheet to avoid confusion as per default, only the first mode will be displayed, and in development mode, hidden elements are not highlighted.” See also a second thread on using variables to trigger actions in prototypes once a specific threshold is reached.

Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.

Christine Vallaure with timeless advice of using percentages instead of pixels for specifying line height in Figma. There are very few cases when pixels make sense, and more often than not they cause inconvenience.

Christine Vallaure just published a free 1‑hour course on YouTube. Topics include Figma’s file structure, creating files and frames, shapes, text, components, and general design setup. A fantastic resource for beginners, and it even comes with an exercise file.

The second guide introduces the concept of ​“container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free ​“friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯

Christine Vallaure reminds us of using Selection Colors for applying variables to multiple objects.

At Smashing Meets Figma event, Christine Vallaure showed how to add real data to your Figma designs, and various ways to include Google Sheets and API data via Kernel.

Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)

Christine Vallaure recorded a comprehensive guide to setting up, connecting, and updating libraries.

Christine Vallaure shares a few practical prototyping techniques and advanced tips & tricks. They include using Auto Layout with Smart Animate, stateful transitions with sections, nesting prototypes, interactive components, and more. This video is also available as an article.