Constraints, Auto Layout V3 & Resizing for Front-End Developers

UPDATE: Figma fully revamped its Auto Layout & Resizing features in November 2020. This article’s content reflects these changes. This guide is updated for Auto-Layout V3 from my previous article of a similar name.

Constraints, Auto Layout, & Resizing are Figma features used by designers to ensure structure and re-usability in our mockups.

This guide is meant for developers who use Figma’s developer handoff features and aims at explaining where to find, how to decode, and how to understand the decisions designers have made and encoded into Figma’s toolset.

Figma can be used to design for Android, iOS, Web, or…


TL;DR all Constraints and Auto Layout code examples

Constraints & Auto Layout are Figma features used by designers to ensure structure and re-usability in our mockups.

This guide is targeted at developers who use Figma’s developer handoff features and aims at explaining where to find, how to decode, and how to understand the decisions designers have made and encoded into Figma’s toolset.

Explanations will be translated to CSS-equivalent vocabulary. The goal here is not to prescribe implementation but rather to describe behavior. How you achieve the effect may depend on your own implementation.

Constraints

Constraints are added to a child object…


Taking selfies with friends between talks

From February 3 to 9 2019, I had the privilege of attending the Interaction 19 conference held by IxDA (Interaction Design Association). The yearly “Interaction” conference brings together some of the brightest minds in Interaction Design from all over the world in one place for a few days. This conference has been going on since 2008 and since 2012 alternates having the host cities in North America and Europe. Interaction 19 was my 2nd Interaction, having also attended Interaction 17 in New York.

The Interaction conference (for me) is a yearly reminder to me of why I do my job…


Sketch is awesome. It’s used for wireframes, visual design and soon end-to-end prototyping. In fact it’s now a mainstay in the UI + UX world down to employers requiring it as a skill.

As such, lots of designers share their tips or plugins about how to get better and faster at using Sketch. Let’s face it: in the right hands, it’s really quick and feels so much faster than other apps.

Despite having used Sketch for over a year and a half, meeting Meng To and attending his Design+Code Workshop (which I highly recommend), and reading pieces about optimizing Sketch…

Alexis Morin

Staff Designer - Design Systems @ Compass, Interaction21 Co-Chair, MFA IxD, dad, hyperpolyglot

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store