FigJam AI. DesignCode UI. Table Chart.
Sponsor
UX Tools reviews Figma Dev Mode vs Zeplin
Dev Mode will require a paid seat in 2024. UX Tools compares Figma Dev Mode vs Zeplin in their annual survey of the best design handoff tools.
App Updates
Introducing AI to FigJam
The AI is now integrated into FigJam to “help you instantly visualize ideas and plans, suggest best practices, and, of course, automate tedious tasks, so you can focus on the bigger picture.” What started as an experimental widget Jambot is now a first-class part of the product using GPT‑4. I used it this week to create a structure for a presentation which was a useful 0 to 0.1 progression. You can give it a try at the playground or check out how Zander Whitehurst uses it to create crazy flow charts.
Yuhki Yamashita (CPO Figma): Inside How Figma Built FigJam AI
Peter Yang interviewed Yuhki Yamashita about building FigJam AI, creating a culture where PMs and designers love their craft, making design accessible to everyone, and balancing new and power user needs. Most of Yuhki’s advice in this interview is for PMs, but it still applies to any product designer. (The interview is paywalled, but there is a lot of good stuff in the preview.)
Love this story about FigJam’s early days: “We had a meeting with our board two months before we were going to launch FigJam. The board asked us what our differentiator was since there were many other whiteboard tools. And Dylan said, “Well, it’s fun!” But then we realized that the product wasn’t fun enough. So the FigJam team ran a sprint called “FunJam” to come up with all the playful features that you see today like cursor chat, emotes, and more. So you’re absolutely right – fun was a core principle. Most workplace tools are a little boring and confine you in a box. We want to give you an inviting canvas with many lightweight ways to express yourself.”
Detaching instances
Finally a solid improvement to detaching instances.
Using Figma
Reverse engineering YouTube’s video grid UI in Figma
A new series from Patrick Morgan focused on UI design execution and strategy. The first video is a step-by-step walkthrough reverse-engineering YouTube’s video grid UI, with the Figma community file of the output of the work session.
Into Design Systems Favorites — Figma Variables & Design Tokens
A solid roundup of the design systems resources from one of the most respected conferences.
Boolean variables
Christine Vallaure explains how to use boolean variables and modes to reduce the number of necessary components. One important caveat: “I would always recommend adding a documentation sheet to avoid confusion as per default, only the first mode will be displayed, and in development mode, hidden elements are not highlighted.” See also a second thread on using variables to trigger actions in prototypes once a specific threshold is reached.
Selecting objects below your cursor
The good thing about evergreen tips is, well, that they do not get old — I keep forgetting about this one! Right-click while holding the Control key to see a list of objects below your cursor.
7 Minute Snippets: Collaboration Across Design and Development
Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.
Prototype with variables: Create an onboarding flow
A short tutorial from Figma on using variables, interactive components, and conditional logic to build a prototype. These advanced features help prototype faster, reduce memory usage, and minimize maintenance time.
Office hours: Getting started in Figma, AMA
“Figma can be a magical place to collaborate, build, and ship, but if you’re just starting out, it can be overwhelming. Join our team for a Q&A focused on the need to know features for those just getting started to help you build out your Figma designs successfully and efficiently.”
Made in Figma
Walkman
I missed Vijay’s Figma recreations! A great illustration of the Sony Walkman, full of little details and textures. “Most of the shapes are created using primitive shapes with shadows and blend modes.”
Resource
DesignCode UI – Figma and Framer Components
A new design system from Meng To with hundreds of customizable Figma and Framer components and templates. Looks incredible, and the kit is meticulously organized with variables, variants, and adaptive layouts. See also his recent livestream with a discussion around key challenges while building the design system, the experience of using Figma variables and components, and tips for transitioning from Figma to Framer.
Plugins
FigWig
Love the idea! An activity tracker companion to Figma, inspired by GitHub’s contributions chart at user profiles.
Table Chart
A new plugin from Lichin Lin turns your FigJam table into a beautiful and editable bar chart. See a short demo of how it works.
Design System Tracker
An interesting new plugin for design system management that scans your Figma files to track usage and identify remote, local, and unlinked/detached components, styles, and variables.
Uno Platform
Teams building .NET applications may know Uno Platform, which recently launched v5.0 and now includes the first and only Figma to C# Markup export plugin. Now designers and developers using the platform can generate C# Markup directly from Figma.
Backstage
Figma Hired 500 Employees Since Adobe Acquisition Announced
Pretty incredible in this economy: “Design startup Figma Inc.’s headcount has grown roughly 60% since it announced merger plans with Adobe Inc. in September 2022, a sign the company hasn’t been standing still while it waits for the deal to close.” On the acquisition: “The Adobe acquisition is scheduled to be completed by the end of March, though it may be hard to conclude the purchase in that time frame with at least one of the regulatory agencies likely to challenge the deal, Bloomberg Intelligence antitrust analyst Jennifer Rie wrote in September. Adobe may owe the design startup a $1 billion breakup fee if the transaction takes longer than that and the deal collapses, according to the merger documents.” (See the archive link.)