Making of Visual Search. Vector Fields. Config identity.
Sponsor
figma.to.website – Figma’s missing PUBLISH button
Design your website in Figma and hit PUBLISH to instantly get a live, fully responsive website. Free hosting and all the settings you need for SEO, custom code, embeds, analytics, forms and more.
What’s New
The story of Figma’s big AI pivot
In this episode of Dive recorded at Config, Ridd talks to Figma design engineer Vincent van der Meulen about how the new Visual Search feature was born from a mid-project pivot. Don’t miss Vincent’s original pitch video for visual search in Figma.
What Figma AI means for design
Mia Blume from Designing with AI with a controversial take: “In fact, I think Figma AI changes nothing for design. […] Besides the immediately useful feature of smart naming, Figma AI doesn’t alter the existing trajectory. This isn’t a dig on Figma, or its role in the future of tooling. It’s more that as a discipline, we were already “here”—some people just didn’t realize it.” If you’ve been paying attention to AI-related links in this newsletter, you would agree with her points.
Bingo: “The real weakness that jeopardizes our field has existed long before the invention of generative AI tools for creatives. If our value (even if it’s only perceived) lies solely in drawing boxes, then we will inevitably become obsolete. And if we remain focused on the wrong things, we will miss the moment in which we could do something about it.” In the end, she suggests three key areas that design leaders can focus on.
What Config 2024 taught me about design’s next golden age
Abdus Salam, Product Designer at Meta, writes at UX Collective: “The future belongs to designers who can master AI, not be mastered by it. Our value lies not just in our technical skills, but in our creativity, our empathy, and our ability to wield these tools in service of crafting experiences that resonate on a profoundly human level.” Also: “while AI can help us reach “good”, achieving “great” still requires human ingenuity and an unwavering commitment to quality.”
Has AI made everyone a designer? A spicy conversation with Pablo Stanley
Design Systems WTF podcast from zeroheight: “AI tools are transforming the landscape, making it easier than ever to create and design. Is this making everyone a designer? Will design system makers have to herd even more cats? We’ll be joined by special guest Pablo Stanley, the brilliant co-founder of two AI-based design tools, Musho and Lummi. We’ll unpack the potential of AI-based design tools and some risks. Join us for a lively conversation filled with spicy takes about how AI is reshaping the boundaries of design.”
Config APAC 2024: Live in Singapore
If one Config wasn’t enough for you, here is a second one-day event at the Asia Pacific region, “full of keynotes, sessions, and programming designed to connect a dynamic community of builders to the future of product design & development.” Most of the talks were unique to this event.
Affinity’s Adobe-rivaling creative suite is now free for six months
I don’t use Affinity apps day-to-day, but I bought a license a while ago (a glorious one-time fee!) and use it whenever I need to do something for print, convert a tricky vector from EPS, or edit a photo. It won’t replace Figma for me, but it filled a void that Adobe Creative Cloud left. They were acquired by Canva earlier this year and currently run a promotion offering a six-month free trial and 50% off all perpetual licenses ($82.99 for all apps on all platforms). Worth giving a try!
Using Figma
In the file: How Linear and Replit go from design to code
“How do Replit & Linear approach designer to developer collaboration? We’ll talk to two high-performing teams about streamlining design-to-code handoff for shipping better products. Learn insights on effective collaboration and ideal workflows with Figma’s Dev Mode, Linear, and Replit.”
Icon bounding boxes
Luis brings up an interesting point about optical spacing and bounding boxes of icons. That’s been bugging me as well, but I don’t think there is a universal solution besides creating two sets of icons for vertical and horizontal alignment, which feels like an overkill for most systems.
Building a plugin with Claude
Building a Figma plugin with a server side and API calls in 2 hours using Claude AI.
Rogie King has another example of roughening up icons for wireframes.
Plugins
Figgy
Figgy is a web app that visualizes your Figma activity with a GitHub-style contribution chart. It allows you to easily track your daily design contributions, monitor your productivity, and gain insights into your work patterns.
Vector Fields
A new plugin from Daniel Destefanis with a fantastic name. Vector Fields is a generative tool that helps you play, tinker, and hack together patterns made from shapes. It came out at just the right moment for me, as I was in the middle of the project and used it immediately. See some examples and behind-the-scenes on Twitter.
Resources
Letter Checker by Stark
Roughly 20% of the population has dyslexia. The Letter Checker by Stark helps you pick fonts that are more likely to work for those people.
Backstage
How Figma built the identity for its mammoth design conference, Config
It’s Nice That talks to Damien Correll, Figma’s creative director, and Jessica Svendsen, its design manager, about designing the identity for this year’s Config and the response from the community. “The visual identity that goes alongside Config is a ten-month design project completed mainly internally, this year with help from Danish design team Relay on the motion front. Extending Figma’s core shape-based language with transforming glyphs, the branding is colourful, clean and much-hyped.”
See also Crafting the visual identity for Config 2024 at Figma blog.
The mode selection toggle
A great example of Figma’s attention to detail in this post from Ryhan on the Dev Mode toggle in the toolbar: “Our current logic accomplishes this by waiting for mouseout — so if you’re hovering over the control […], the width will stay constant for a split second longer — just long enough for you to click again to toggle back — without being perceived as “slow”. However, if you mouse out immediately, or do this via shortcut, the animation is sped up to be slightly faster, since there is no action to cancel.”
Cool Thing
Family Values
Benji Taylor on creating guiding principles and designing interactions for the Family crypto wallet app: “This is not a technical post or tutorial. There are many good resources about how to craft smooth animations or design pixel perfect UI, by people much smarter than I am. This is about how we made something complex feel welcoming. It’s about what makes Family feel familiar.”