Articles

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

Tom MacWright writes about his experience building the Placemark plugin for creating vector street-level maps and Placemark Globe for rendering a globe. He covers several interconnected topics, including tracking usage, sandboxing, plugin architecture, and authoring flow.

A guide to creating icons in Figma with a solid introduction to basic tools, grids, and approaches to designing a cohesive set.

I loved this article by Karri Saarinen from Linear on why redesigns are important and its sequel, ​“How we redesigned the Linear UI,” on tackling that kind of project. ​“This incremental way of building the product is hugely beneficial, and often necessary — though it unbalances the overall design, and leads to design debt. Each new capability adds stress on the product’s existing surfaces for which it was initially designed. Functionality no longer fits in a coherent way. It needs to be rebalanced and rethought.”

On paying off the design debt: ​“While the design debt often happens in small increments, it’s best to be paid in larger sweeps. This goes against the common wisdom in engineering where complete code rewrites are avoided. The difference is that on the engineering side, a modular or incremental way of working can work as the technical implementation is not really visible. Whereas the product experience is holistic and visual.”

On exploring the next version without considering practicality: ​“A secret I’ve learned is that when you tell people a design is a ​“concept” or ​“conceptual” it makes it less likely that the idea is attacked from whatever perspective they hold or problems they see with it. The concept is not perceived as real, but something that can be entertained. By bringing leaders or even teams along with the concept iterations, it starts to solidify the new direction in their mind, eventually becoming more and more familiar. That’s the power of visual design.”

Not the acquisition we had in mind: ​“Canva, the world’s only all-in-one visual communication platform, today announced the acquisition of Affinity, the award-winning creative software suite for professional photo editing, illustration, graphic design and page layout.”

On April 1st, Figma makes URLs shorter and easier to read. If you call Figma’s REST APIs, embed files in your websites or apps, or use these URLs in your plugin or widget, you may need to make a few tweaks to your code.

Fast Company calls Figma one of the ​“most innovative companies in applied AI” for boosting creativity and digital collaboration with the OpenAI-powered Jambot plugin for FigJam. Wild to think that it was born out of an internal two-day AI hackathon just eight months ago. (For additional context, see the above interview with Nilay Patel.)

Nilay Patel, editor-in-chief of the Verge, talked to Dylan Field in a live interview from SXSW about life after the failed Adobe deal, the new multi-edit and Dev Mode, generative AI, the state of the web, design trends, solarpunk, and what comes next. Nilay is a great interviewer, so I highly recommend reading (or listening!) this conversation.

Christine makes a point that we can move beyond the rigid structure of fixed responsive breakpoints with modern CSS layouts, crafting flexible and dynamic designs that seamlessly adjust to different screen sizes. In this article, she covers responsive column-based design vs. modern CSS layout, CSS Flexbox and Grids, and questions if we still need breakpoints.

A detailed guide from the creator of Untitled UI: ​“Create responsive data tables in Figma with our ultimate guide and free Figma file. Learn Auto Layout best practices, how to create visual hierarchy, and how to create flexible and responsive tables the right way.”

Christine Vallaure doesn’t like to rely on plugins too much, but in this article, she shares ​“some little helpers that I wouldn’t want to do without.” Some are time-tested tools, but others were completely new to me.

“Inspired by the Figma design team’s principles and methods for running design crits, a core group of Figma engineers, led by Ojan Vafai, set out to introduce a process somewhere in between a design crit and a technical review. This was the genesis of Figma’s engineering critiques, dedicated time for the engineering team to brainstorm novel approaches to technical problems, get feedback on existing work, and unblock each other. Today, engineering crits are a core part of our workflow, but it didn’t start out that way.”

This technical guide looks into tools and workflows for building a single design system to support multiple brands, platforms, or products. Lots of great tips for anyone involved in building an advanced design system for white-label products with full control over colors, typography, and visual styles.

Joey Banks with the deepest dive on the multi-edit: ​“The team solved and shipped a feature — actually, kind of a whole new way of working within the canvas — to help address a problem I didn’t even know I had.”

Vice President of Product Sho Kuwamoto and Product Designer Nikolas Klein walk us through the journey of multi-edit. Love this observation: ​“When you look at Figma, almost every feature that helps you structure your file has a free-spirited cousin feature for the times when you want to keep things loose. You can use styles and tokens to change your colors quickly, but if you want to leave things unstructured, you can use the selection colors feature to make mass edits. You can use auto layout to group things into stacks and move them quickly, but if you want to leave things unstructured, you can use the smart selection feature to reorder things quickly. When it came to editing, you could use components to edit multiple copies of an object quickly, but if you wanted to leave things unstructured, we just didn’t have a great alternative!”

A fascinating story of using Figma to design and craft… quilts! ​“I would say that I design 80% of my quilts in Figma before I even cut the fabric. Other quilters improvise much more than I do, but I think my UX background and experience preparing assets for engineering teams makes me want to go in with a plan. Everything needs to be measured to the quarter inch, and Figma is a great tool for that.”

An interview with Figma’s CTO Kris Rasmussen about Dev Mode and targeting developers. His take on low-code and no-code tools, like the two featured above: “…we’re actually really supportive of Locofy and also Anima — another example of one of these plugins on the Figma ecosystem. So we’re definitely thinking about their needs as well, as we continue to evolve.“ He added that Figma itself is looking at similar problems, but ​“at different ends of the spectrum”: ​“So we’re very much focused on helping to make the actual design process, the act of essentially visualizing what’s in people’s heads and aligning around it, more accessible and easier for the organization to participate in.”

Christine Vallaure with the best Figma tips and tricks of the year! As you’d expect, this year’s edition of her regular roundup has a strong focus on Dev Mode, variables, prototyping, min/​max values, and slot components. Thanks to Christine for sharing a friend’s link with Figmalion readers! If you prefer watching to reading, check out her free video with these tips.

Replit Vice President of Marketing and Design David Hoang talks about how AI is reshaping the future of product design and development, and the role it’s playing in the company’s team and products. On synergy between design, engineering, and AI: ​“Whether you currently work more in engineering or design, AI offers augmentation for you to do both. Engineering and design are on a course to become one tightly woven discipline.”

On hiring with regards to their Artificial Developer Intelligence (ADI) strategy: ​“At Replit, we’ve always leaned towards hiring multidisciplinary designers who understand the technical depth it takes to create software and bring it into the world. Each designer has the output of three to five designers that you’d ordinarily work with. They code, prototype, review pull requests, do unit testing, facilitate research sessions, and run workshops, too.”

Figma acquired Dynaboard, a collaborative low-code IDE for developers building full-stack web apps.

Here is what stood out to me in one of the interviews with Dylan Field I shared last week: ​“Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: ​“Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”