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.

Christine Vallaure highlights some of Figma’s features and possibilities to help you build a design that aligns with code as much as needed and improve your teamwork.

Great article by Christine Vallaure on improving accessibility by using relative font sizes in CSS, and how to work around pixel-based sizes in Figma. While I always use a combination of rem and em units, I wasn’t familiar with the 62.5% CSS hack or that units can be switched during hand-off in Zeplin. Very cool!