Plugin parameters. Maker Week. Automator.
If you’re reading this newsletter in your email client, chances are my latest project went well! 😅 Lately, I’ve been working on the final major piece of the new Figmalion 2.0 — moving the newsletter from MailChimp to a custom setup. The new website and content are handled by a powerful Craft CMS, mailing lists and campaigns are managed by the Campaign plugin, and the emails are delivered with Postmark’s Broadcast Stream (hey, I work there!). Now I finally have more control over email templates, can stop copy-pasting content from the website to MailChimp, and save time and money during the publishing process. Hopefully, this setup will help me switch to a weekly sending schedule soon, as issues have been getting too long for a while.
In the meantime, Figma released plugin parameters accessible from the keyboard to speed up the workflow. It was also time for their regular Maker Weeks, where many cool projects were presented — see a roundup at the end of the issue. Christine Vallaure wrote a great post on designing with relative font sizes, and Rafa shared a few highlights from switching to Sketch 😮 Last but not least, the Automator plugin by Jordan Singer is now the hottest project and a few folks have already shared their automations made during the private beta.
— Eugene
Sponsor
Connect Figma Components to Storybook Code in One Click
Ship UI faster with Zeplin’s new Storybook Integration. Now both developers and designers can link and sync design components to storybook code, know when new components have been added, and reuse as much code as possible.
App Updates
Run plugins with parameters from the keyboard
Plugin parameters are out of beta — open the quick action bar with Cmd-/ (Ctrl-/ on Windows), enter the plugin name, and select from a list of plugin-specific parameters or enter a custom value. Great way to speed up work with the keyboard.
Running plugins with just your keyboard
Clara shows some of the plugins that already support keyboard parameters.
Closed captioning for audio
Download or update to the latest version of the Figma desktop app to try it out.
Using Figma
Why designers should move from px to rem — and how to do that in Figma
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!
How we use Figma’s API to deliver design to the production
Alex Dyakov explains how his team at Yandex.Maps uses Figma API and a separate development library to export assets and styles for all supported platforms, such as iOS, Android, and web.
Findings and highlights from using Sketch
This is an unusual link for this place, but Rafa makes great observations about superior parts of Sketch. I’ve been skeptical about their Workspace and Real-time Collaboration, but the UI and native features were always top-notch. Glad they’re still competing with a strong product!
Todo list with Interactive Components
Joey Banks creates a simple todo list using Interactive Components, start to finish in 1 minute.
Using Interactive Components as the first step in the process
Ridd shows an unconventional approach of using Interactive Components from the very beginning of the design process. Also, love his tip on using a second Figma window for the real-size preview!
10 Figma best practices every new designer needs to know ASAP
A very solid list of recommendations, and not only for new designers.
How to Library
Luis Camino, a UI/UX designer at BMW and MINI, shares a few best practices for Library editors.
Level up your designs with UI Kits, design systems, and more
Femke shares some of her favorite educational resources, UI kits, and design systems for Figma.
Advanced Auto Layout Tutorial
Danny Sapio is showing how Auto Layout can be used to create a scalable and flexible interface.
Office Hours: Deeper into Branching
“Join Clara and Chad as they dive into branching with the help with Shana Hu (Product Designer), Oscar Nilsson (Product Designer), and John Fuetsch (Software Engineer), who contributed to getting the feature out the door. Conversation topics include early iterations, key use cases, and what the team is thinking about next.”
Organizing user tests and freezing designs
“Learn how to use branching for exploring and testing alternate designs, and for sharing work with development partners.”
Made in Figma
Little experiment with Autofocus and Parallax inside Figma
Beautiful effect! See also the source file at the Community.
Fun with an infinity symbol
Miggi created a single-point infinity sign, then Vijay came up with a cool animation. Team work 🙌
Making Magic Potions in Figma
Breakdown of using Figma to illustrate and animate Vijay’s first NFT.
Squid Game Guards
Cool illustration based on Netflix’s new TV show.
Maker Week
Figmaverse
The theme of this Maker Week is Figmaverse, and Anthony DiSpezio created beautiful branding and design system. To the moon!
The story of design systems analytics
A peek behind the scenes of how Noah Levin created the first take on design system analytics (now available on Orgs plan) during one of the past Maker Weeks.
Playable Figma Crossword
The New York Times Crossword from 2/20/2012, playable as a Figma prototype through its Interactive Components feature.
Jam Kit and Pixel Art Maker
Cool FigJam widgets made by Bersabel Tadesse and Noah Levin. Hope they’ll be published one day!
Flippy Bird
A widget that lets you play a Flappy Bird-like game right inside FigJam. Love the Flippy!
Custom mechanical keyboard
Now I most definitely want one! See also this cool keycap.
Figma Memes
The indispensable project brought to us by Toni Gemayel and Georgia Lee.
Community 101
Toni Gemayel’s project intended to help Figmates create their profiles in the Community.
Automator
Automating Figma
Jordan Singer on why he is building Automator, a general purpose tool to automate Figma. Its private beta was all the rage last week — see a few creative ways to use it below.
Automating all the things
Ridd shows how he automated a repetitive part of his workflow with Automator.
Consistency in a library
Jan Toman with a thread of different ways this plugin can be used to automate routine operations of maintaining a design library, removing the need to use checklists, and increasing consistency along the way.
Fig-gen
Nate Butler experimented with minimal generative series using Automator.
Six quick automations
Noah Levin came up with six quick automations in just a few hours.
Plugins
Insert Big Image
Insert and retain the original resolution of big images, working around Figma’s limitation of 4,096 pixels during imports. Just last week, I had to add a few large screenshots to the project and ended up cutting them down manually in Pixelmator while thinking of building this plugin. Apparently, Yuan Qing Lim had the same idea a while ago!
Outline to Single Stroke
While outlining a stroke is a common feature in design tools, I’ve never seen the opposite!
Dark Vader
Design in one theme and automatically switch to other themes within a color system.
Resources
Chunk Icons
A set of 144 consistent and commonly-needed glyphs, all tailored to look nice and sharp at 16px.
MacBook Pro 2021 Mockup
Full vector mockups of the new MacBook Pros.
Backstage
From candidate interviews to developer crits: how Figma engineering uses FigJam to scale
“We recently caught up with three of Figma’s engineers — Alice Ching, Joey Wang, and Greg Blaszczuk — to learn more about how they use FigJam to navigate their day-to-day. Here, they share how jamming helps them break down complex problems, work through feedback together, and add more fun to the workday.”
Behind the build: a Q&A with developer Gavin McFarland
Q&A with Gavin McFarland, creator of the Table widget.
Behind the build: a Q&A with developer Tekeste Kidanu
Q&A with Tekeste Kidanu, creator of the SPELLL plugin.