Happy holidays to everyone who is celebrating this week! 🎄 In the last issue of 2019, we have the whole section dedicated to Auto Layout coverage, a few stories on switching, a podcast with the creative director of Figma, fantastic article on the current implementation of line height, and a look back at this year and the whole decade from the company itself. Enjoy!

— Eugene

Auto Layout

Figma: Learn Auto-Layout

An in-depth tutorial covering 3 common use cases for Auto Layout — button with an icon, content card, and a chat log screen.

Putting Figma’s Auto-Layout through its paces

Auto Layout can be used for so much more than just buttons and lists. This post shows how useful it is for working with copy and images.

Quick tips for Auto Layout in Figma

Not sure if this post should be called “quick tips” as it mostly surfaces unresolved problems, but it’s an interesting look at the limitations of the current implementation.

Twitter thread: why the items in an Auto Layout frame go backward

Figma’s Director of Product wrote a detailed explanation of why layers are ordered backward inside an Auto Layout frame. This thread is a good illustration of how many factors have to be considered even for a seemingly simple design choice.

We got Auto Layout 🎉 now we need States 🎛

An interesting observation that what we need next is states, styles groups, and variables. Yes, please!

Switch

Moving Bonfire to Figma

Dan Strogiy writes about the pains of their previous Sketch workflow, the benefits of moving to Figma, their new organization system, and some fresh pains of a new workflow.

Moving from Sketch to Figma

It’s interesting to see how this team of 9 designers transitioned to Figma. I’m particularly impressed with their planning and communication with other team members. Part 1 provides some context for the switch.

Since the Last Time

Framework Podcast: Tori Hinn

A conversation with a creative director of Figma about recent brand refresh.

Tweet: “Figma renders the letter X as a multiplication sign in the layer list when it’s surrounded by numbers”

Nice observation. Figma’s team has great attention to detail.

Older Stories

Getting to the bottom of line height in Figma

One of the most epic posts in Figma’s archive, diving deep into the history of leading and line height in traditional printing, desktop publishing, and on the web. It explains why Figma works with type the way it does.

Figma vs Sketch vs Adobe XD: Which Is the Better Design Tool?

A comprehensive comparison of modern design tools, looking at features, extensibility, collaboration, supported platforms, and price. Not to spoil the result, but Figma takes the first place.

Plugins

Typographer

My second plugin got approved just a week ago. Typographer formats text with typographic features traditionally used in fine printing — en- and em-dashes, curly quotes, apostrophes, ellipses, and more.

Contrast

Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

Tailwind CSS

Add color styles straight out of your Tailwind CSS config file.

Advanced SVG Export

Export SVG files optimized with SVGO.

Mobile Upload

Snap photos with any phone and send them directly to Figma. Great for notebook sketches or whiteboard brainstorming sessions.

SmoothShadow

After Smooth Shadow generator made rounds in the design community, its author built a matching Figma plugin. It’s the easiest way to build a nice smooth shadow, and as it’s based on a box-shadow CSS property it’s easy to export and reuse in code later.

Redlines

Redlines is a toolkit designed to make developer hand-off easier. Create and generate redlines from a selection of objects with ease, while also enabling full control over the style and display of each redline element.

Products and Services

A design toolkit for Visual Studio Code

I assume this will be a highly valuable resource for VS Code theme designers, but also it’s just interesting to look at the organization and building blocks of a design system for such a popular product.

Figma plugin TypeScript boilerplate to start developing right away

A boilerplate for developing Figma plugins that take care of setting up and configuring TypeScript, Webpack, ESLint, Stylelint, Prettier, Jest, EditorConfig, etc.

From the Headquarters

Measuring the value of design systems

Figma’s Data Scientist created an experiment to see if a well-maintained design system really saves time for designers. “We found that when participants had access to a design system they completed their objective 34% faster than without a design system.”

Made in Figma, 2019: Design by the numbers

“What fonts, styles, and pantones are most popular? What frame sizes are most common? What does it look like, on the file level, for teams to design together?” Report based on data from over 50,000 active users.

“The Decade of Design”: How the last 10 years transformed design’s role in tech

With help from 12 industry experts, this article looks back at the decade and how the role of design transformed during it. “So to recap, in 2010 a few factors converged that motivated tech companies to invest more in design. To handle the transition to mobile, they needed people trained in the power of distilling complexity to its fundamental elements. Naturally, once users got accustomed to beautiful and easy-to-use experiences on mobile, that raised their standard for all user interfaces. At the same time, it got easier to start and build a tech company than ever before, so companies faced far more competitors and had to differentiate via their user experience.”

---

Follow @FigmaNewsletter on Twitter to see retweets of all the goodness that doesn’t make it to the newsletter.