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 ďŹne 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.