Figma is 12! Good Craft. Animating SVGs.
Sponsor
Webflow Conf 2024
Join us this October for the conference that brings together the makers, creators, and visual developers behind the world’s greatest websites.
App Updates
Connectors optical spacing
Quality-of-life improvement in FigJam — regardless of connector and shape styling, they will always have the same optical spacing. Also, alignment indicators now appear only when needed and are hidden when the object is being moved across the board. So much cleaner!
What’s New
Figma turned 12
Happy birthday to my favorite design tool!
The Elements of Good Craft
Christopher Butler wrote an essay on how details, focus, time, and taste elevate craft. “Attention to detail is not a personality trait; it is a manifestation of a preference for order and consistency. When that preference is fundamental, it makes it nearly impossible for a person to not see mistakes, flaws, inconsistencies, or differences. […] This is why attention to detail cannot (easily) be taught. Teaching a person to “see detail” requires them to care about and prefer certain forms of order.”
We’re in the “Discord bot” era of design
Ridd on two big issues and two opportunities of designing with AI: “If I’m in my design tool it’s because something is in my brain (even if it’s just a simple sketch). That’s why I don’t buy the so-called “blank canvas problem” as a real pain point for professional designers. Pointing AI at this “problem” is really a way to expand the user base by lowering the bar for non-designers to participate.”
CARE: Structure for Crafting AI Prompts
Kate Moran from Nielsen Norman Group demonstrates how to get better results from generative AI chatbots by writing “CAREful” prompts. Use the acronym CARE (context, ask, rules, and examples) to remember what information to give AI tools to achieve your desired results: include context, what you’re asking the system to do, rules for how to do it, and examples of what you want.
Designing design systems: Constructing an icon system
“Spectrum, Adobe’s design system, already had a robust icon system, but the time had come for a redesign. Evolving a design system’s icons can involve updating and/or redesigning assets, improving how icons are maintained and served to the teams using them, and creating a solution for adding, updating, and deprecating design elements within it. Months of discovery, exploration, reviews, and sharing laid the groundwork for the icon team’s three-phase process. It began with extensive design exploration and beta testing to confirm the needs of product teams, and ended with implementing suggestions for improving search, customization, and serving icons. It’s a method of inquiry, feedback, and refinement that other teams can apply to their work.”
Using Figma
Advanced Figma components tips & tricks: little gems we love 2024
Christine Vallaure shares an updated list of her old favorites and plenty of new tips, highlighting what you might have missed when working with components in Figma. (Thanks for the friend link!)
Animating Figma’s SVG Exports
Nanda Syahrasyad explains how to export SVGs with individual paths from Figma to be animated with CSS. This article is a part of his Interactive SVG Animations course that will be launched this fall.
The three Cs of Figma: A beginner’s guide to success
Designer Advocate Mallory Dean on how learning the three Cs can help you build up the basics and pick up steam: “One of the core responsibilities of my role as a designer advocate is to onboard teams to Figma and help them see the magic of “multiplayer,” as we call it. In doing so, I myself have learned from the experience and collected invaluable resources. Most importantly, I see how I would have changed my approach when I first started out. Instead of focusing on learning specific features, I would prioritize understanding different focus areas, which I call the three Cs of Figma: creation, customization, and collaboration.”
Using Slides
Experience with Slides
Nathan A Curtis maintained ~2,000 slides worth of workshops and talks in Figma for four years, so his feedback on Figma Slides is worth listening to. His biggest complaint is a lack of templates and styles on the Professional plan, but in the replies Slides PM Mihika Kapoor confirmed that Pro templates are coming soon.
Office Hours: Perfecting the product review
Slides PM Mihika Kapoor shares how to run the perfect product review using Figma Slides. You’ll learn best practices for getting the input you need, driving decisions, and aligning stakeholders around the work.
Plugins
Styles & Variables Organizer
The Styles Organizer plugin now supports all types of styles and variables, so it got a new name. This is one of my most used plugins for managing a design system and maintaining style consistency inside Figma files.
Tokens Studio 2.0
A big update to the Tokens Studio plugin introduces W3C DTCG format support, new variables exporting experience, using variables inside styles, typography tokens, and more.
Color Overlay
Recolor and remove colors from raster images with a solid color fill, like the Color Overlay effect in Photoshop.
Pointillism
Pointillism converts images into thousands of vector points. Customize the size and frequency of the dots to achieve the perfect look and bring a unified style to your designs. Compatible with Parallax, Shape move, and Physics animation plugins, it offers exciting animation possibilities.