Jambot. Fast-follow updates. Making plugins.
Sponsor
Figma to Webflow — where design meets visual web development
Go from Figma to Webflow, faster. Design with auto layout in Figma, then easily translate your designs to Webflow as responsive flexbox structures — and adjust HTML tags within Figma to get your site live faster.
Jambot
Jambot widget
Jambot is a free widget from Figma to interact with ChatGPT right in FigJam. Use it to create visual mindmaps, take a multi-threaded approach to brainstorming, or generate ideas with teammates and ChatGPT on the same canvas. Quite amazing that it was born during last month’s Maker Week and is already live!
Give ideas more space with Jambot
Amber Bravo sat down with Jambot engineers and a designer to learn what inspired them to make the widget, and why they’re so excited to see ChatGPT go multiplayer. As a power user of Logseq, I loved this bit from Daniel Mejia on where the inspiration came from: “I’ve been a heavy user of these tools called Networked Thought — especially Roam Research and Logseq — which basically allow you to create pages that link between each other, so you can connect, organize, and trace ideas. More recently, I also found this tool called Albus, which adds a visual feel to interacting with AI, and so I thought there should be a way to connect these concepts to create a potentially useful alternative to ChatGPT.”
Figma Jambot AI widget first impressions in under 3 minutes
Miggi causes the “figception” by using Jambot to come up with ideas for making Figma content. Quite amazing to see how it can be used as a tool for thought (or even programming, FWIW).
App Updates
Variables fast-follow updates
A few improvements to variables: 1) in addition to scoping number variables, you can now also scope color variables, 2) select multiple variables with Shift or Cmd for the bulk edit, 3) code syntax for defining different names for multiple platforms, and 4) modes for instance sublayers. Variables are still in beta and it’s great to see how fast the team iterates on them.
Dev Mode fast follows: 200+ new features and fixes
In the last 2 months Figma quietly shipped more than 200 updates to the Dev Mode workspace 🤯 This article goes through the most important 35 changes and improvements.
Design faster with access to our new Community Libraries Beta
“Our new Community Libraries Beta offers the building blocks you need to start designing, right at your fingertips. As part of the Beta, users on free plans will have access to a special selection of community wireframing, UI, and icon kits. Just click into the Assets panel and Library modal to browse through the featured libraries and design faster than ever.”
What’s New
Figma’s collaborative tools could change the way everyone works
Figma is the General Excellence winner of the 2023 Innovation by Design Awards by Fast Company. Collins’s bold campaign for Figma titled “Nothing Great is Made Alone” had also won the Branding award.
Using Figma
How to make next-level Figma plugins: auth, routing, storage, and more
Evil Martians is a product development consultancy behind some well-known services and open-source projects. In this post, they talk about the process of building a full-featured frontend application-style Figma plugin — with storage, auth, routing, and more. A fascinating deep dive for any curious developers!
How to use Auto Layout in Figma with Icons
An in-depth walkthrough of how to use Figma’s Auto Layout to quickly add padding and alignment rules to standardize your design elements from the Noun Project.
Optical balance with optional icons
Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.
Maintain the hierarchy of the elements
A good-to-remember shortcut! Hold the Spacebar while dragging elements to maintain the hierarchy of the elements.
Plugins
Zen Keys
Zen Keys is a new plugin from Corey Lee that extends the Quick Actions menu to provide more keyboard accessibility for Figma features that don’t have dedicated shortcuts. Spend less time reaching for your mouse and lean into Figma zen mode with keyboard actions. (Something is cooking with the Quick Action bar, isn’t it?)
Generator
This plugin made my head spin: “Make procedural geometry, generate dynamic text, design color systems with logic and mathematical precision. Explore endless variations, and automate things that would be too tedious or even impossible to do by hand.”
Cool Thing
Bézier Curves — and the logic behind them
Richard Ekwonye made an interactive guide on how Bézier curves work in CSS animations and SVG paths of illustrations and icons. Such a beautiful and hands-down way to learn!