New FigJam fonts. Advanced sizing. Genius.
Sponsor
Big design takeaways from 2022
Join us at Harmony to learn from product, design, and dev leaders at Rocket Companies, Veeva, and Chipotle. They will talk about their experience in design systems, collaboration, automation, and scaling product teams.
App Updates
New fonts in FigJam
Four new fonts in FigJam to convey just the right message or feeling. “Simple” is a new standard font for long-form text and easy scanning. “Bookish” is a serif font that adds a touch of formality to headers and quotes. “Technical” is a fixed-width font that mimics the look and feel of code. “Scribbled” is a script-based font that’s perfect for comments and annotations. All fonts were custom-made for FigJam by OH no Type Co and come with lots of beautiful details and juicy ligatures (have you seen the exclamation marks?!)
This is one of the FigJam brand updates that Figma has been working on since last year and just started to roll out. Make sure to check out this Twitter thread by Damien Correll, Creative Director at Figma.
Changes to the paid resources policy
Seems like Figma reversed the original policy prohibiting third-party payment tools and delayed the launch of the paid resources in the Community until March 7th. While I believe Figma’s 15% fee for covering transactional costs and acting as the merchant of record is very fair, I applaud their flexibility and openness to community feedback. (Historically, Gumroad was one of the most popular platforms for selling digital products, but with their recent price increase I don’t know why would anyone go with them instead of a built-in community marketplace.)
Restrict access to external content
On the Enterprise plan, Figma introduced external content controls so companies can keep everyone’s work inside their Figma organization and protect their ideas. When access to external content is disabled, domain users can’t collaborate in files, projects, or teams outside of their Figma organization.
Local currencies for new Organization customers
“Rolling out over the next few weeks in Japan, Europe, UK, and Canada, you have the option to purchase a new self-serve Organization plan on your own in the local currency or USD. At this time, invoicing is still only available in USD on the Organization and Enterprise plans.”
Advanced sizing?
Seems like support for min/max width and height are coming to the Auto Layout! Previous leaks by Nima Owji included support for variable fonts and text baseline alignment, so the chance that this is really coming is pretty good!
Using Figma
Six tips for prototyping in Figma
Designer Advocate Ana Boyer with great recommendations for reducing noodles, creating micro-interactions, and organizing separate designs into flows.
Build the perfect combo button
Molly Hellmuth explains how to build the perfect combo button that contains two actions in one component, each with independent states and resizing behaviors. This button allows designers to combine related actions, saving space and simplifying designs.
Organizing files
Jess starts a productive discussion on organizing files in Figma by asking about having one file per feature where iterations/updates happen and another file for all “done” work. That’s similar to how I organize my work projects, but in reality, bringing work back to the “single source of truth” file or abstracting it to the design system is always hard to prioritize.
Figma to Webflow plugin
Thalion played with Figma to Webflow plugin and came up with the video tutorial and a summary of what you can do with it.
How we Jam: How Amplitude makes planning outcome-oriented, inclusive, and fun
“Annual planning — it’s one of the most cross-functional, critical, and downright messy endeavors that teams take on each year. For Amplitude, building great products and establishing an operating plan for success start with aligning on a north star metric and deconstructing user journeys.” Comes with workshop templates to make planning fun as well.
Made in Figma
Galaxy S23 Ultra lenses
Sanbron Liong recorded his process of creating a photo-realistic drawing of Galaxy S23 Ultra lenses. See also his experiments with light effect and placement for it.
Animating a unique toggle
Figbruary submissions keep delivering gems! Double Glitch shows the behind-the-scenes process of making a cool animated light switch.
Plugins
Introducing Genius
Jordan Singer and the Diagram team share the preview of Genius, their new tool for generating user interfaces with AI. “It understands what you’re designing and makes suggestions that autocomplete your design using components from your design system. It’s important to explore lots of ideas and iterate in the design process, and Genius ideates and iterates alongside you as you design.”
Galileo AI
If introducing Genius wasn’t enough, here is another upcoming AI tool for creating editable UI designs from a simple text description. As Vitaly Friedman rightfully put, “It’s about time to get used to websites looking exactly the same everywhere.”
ShaderGradient
This website made my head spin! A new Figma plugin and Framer Component for creating highly customizable beautiful moving gradients.
Colorwell
A preview of a new Figma plugin that offers Paper-like paint mixing. That demo brought so many memories! Paper used to be my go-to drawing app on the iPad a decade ago. Love to see some of its smart UI elements getting a second life as Figma plugins.
Backstage
Icebreakers
Examples of fun prompts and highlights from the Figma design team warmups in FigJam: “Overall, we ask a question, put a generous amount of time on the clock with some tunes, and let folks explore and have fun in FigJam. You don’t need to over-engineer an icebreaker for it to feel meaningful! And letting the room react and respond really lightens the exercise.”