Interactive Components. FigJam widgets and plugins. Design tokens.
During the last couple of weeks, Figma released multiple updates that were in the works for a long time. First, after being introduced at Config Europe in 2020, Interactive Components are finally out of closed beta and available to everyone! The power they provide is hard to take for granted, and I’m excited about using them in my projects and getting fully interactive components from the Community.
Second, FigJam rolled out its biggest release to date: new pricing, open sessions, widgets, plugins, embedded content, new shapes, code blocks, templates… oh my! I included a few tweets from the team giving an insider look at how these features were built, along with some of my favorite new widgets.
Last but not least, read how Google’s Material Design is teaming up with Figma to bring great UI from design to code, see how GitHub uses Jan Six’s plugin to work with design tokens, and listen to Dylan Field talking about creators economy and low-ego leadership.
Enjoy the issue!
— Eugene
Sponsor
Connect Figma Components to Storybook Code in One Click
Ship UI faster with Zeplin’s new Storybook Integration. Now both developers and designers can link and sync design components to storybook code, know when new components have been added, and reuse as much code as possible.
Interactive Components
Interactive components: less wiring, more inspiring
Interactive Components are now available to everyone! Thanks to this powerful feature, we can now create reusable and shareable interactive elements for design systems and prototypes. (If you didn’t participate in the beta and want to catch up with new possibilities, check out the Interactive Components topic at the Figmalion website or this Twitter thread by Figma.)
Design tools should uncover ideas you didn’t know you could have
A few more fantastic Interactive Components usage examples from Nikolas Klein.
Designing Interactive Components
A first-hand perspective by Nikolas Klein on designing and building Interactive Components.
How Interactive Components were built
Sho Kuwamoto on why it took so long to build and how other smaller features fit in a bigger vision.
Figma Updates
What’s new in Figma: October 2021
A recap of everything that got shipped in October: new FigJam capabilities (see below), Interactive Components, and Branching. A busy month after a multi-year effort!
LIBRARY_PUBLISHED webhook now triggers on style updates
“Previously the LIBRARY_PUBLISHED webhook only got triggered when components were updated. Style updates now also trigger this, giving users more accurate insights into their library updates.” See more on how to use Figma’s webhooks.
A new transition when opening a file on the Community
One of the many improvements that Figma ships unannounced. Looks really cool!
FigJam Updates
What’s new to FigJam: Widgets, plugins, & more
Video recording of the latest announcements at FigJam: “Hear from Rogie, Bersabel, and Emily as they introduce Templates, new shapes, code blocks, open sessions, plugins, widgetsand new pricing! We’ll also feature live demos of widgets from our partners at Donut, Stark, and CoderPad; watch to learn how you can make FigJam the home for your brainstorms.“
Introducing new FigJam prices and a more open platform
So many great things in a single announcement! New pricing starting February 2022 ($0 – 5/editor/month), open sessions, widgets, plugins, embedded content, as well as new shapes, code blocks, and templates.
Open sessions: jam with anyone, anywhere
A huge change for organizations with external collaborators and education. “Open sessions is a way for visitors to join your FigJam file without having to create an account. Now FigJam is a welcoming space for all participants — from the teammate, to the external partner, to the occasional jammer.”
The way we work has forever changed
Thread by Dylan Field, the CEO of Figma, on not just translating physical experiences into digital realms but also making digital experiences even better than physical counterparts.
FigJam features for education
Fantastic examples of real-life FigJam use cases in the classroom.
Tools that help people to think and communicate visually
Sho Kuwamoto on the role of widgets and how Figma and FigJam work together. See also his thoughts on why design tools exist.
Visual programming with FigJam widgets
Speaking of visual thinking, this prototype is a great illustration of the power of widgets. Can’t wait for it to get approved!
FigJam Widgets
Calendar
Fully-fledged calendar widget by Mirko Santangelo.
lil todo
A simple todo widget by Jordan Singer.
Photo Booth
Take memorable team selfies with the whole team.
Tic Tac Toe
Play Tic-Tac-Toe with 2 or more players.
Rock Paper Scissors
Play Rock Paper Scissors with your friends in FigJam.
Stark
Stark’s FigJam widget provides designers, engineers, and product managers role-specific accessibility checklists.
Using Figma
Design to Code: Turning Handoffs Into High-fives
Google’s Material Design is teaming up with Figma to bring great UI from design to code: “Our design to code workflow allows teams to create UI components in Figma and export them in a portable container we call a UI Package. These Packages can be directly used in Jetpack Compose projects for Android applications, can be edited in Figma, and can be directly updated in code with good developer ergonomics for component reuse and change management.” Don’t miss the video from Android Developer Summit with a new workflow.
Design Tokens in Figma
Jan Six, Sr. Product Designer at GitHub, talks about creating a design tokens system in Figma. See also his plugin Design Tokens below.
How We Transitioned a Fortune 100 Company’s Product Design Team to Figma —And Lived to Talk About It
Good write-up from Think Company on switching to Figma from the perspective of an agency working with high-profile clients.
How we improved our project and file structure in Figma
The team at Onfido Tech moved to Figma from Sketch and Abstract, and they organized projects and files to work around the lack of branches back then. Their structure may be a good fit for a larger organization.
Add the component name to the component description
A nice tip to UI kit maintainers from Jan Toman.
Building Form Components
Ridd with a step-by-step walkthrough to help you design form components that scale without drowning yourself in variants.
Theming Visual Studio Code
Powerful use of Figma variants and VS Code design toolkit to work on dark and light themes.
Automator
Jordan Singer shows some of the automations in his AI tool. Looks amazing, and you can join the waitlist at his website.
Plugins
Figma Tokens
A Figma plugin allowing you to define & use tokens directly in Figma, including smart aliases for colors, typography, spacing, border radius, etc. Jan Six is also working on the way to sync tokens with a GitHub repository.
Material Theme Builder
Announced at Schema 2021, this is a new tool that helps you visualize Material You’s dynamic color and create a custom Material Design 3 theme. With built-in code export, it’s easy to migrate to Material’s new color system and take advantage of dynamic color. Don’t miss the article Introducing Material Theme Builder.
Spirous
Mathematically generate beautiful spirographs with the desired shape, color, and stroke width.
Paint
A new plugin from Gleb Sabirzyanov for getting custom colors from Figma to FigJam.
FigmaOP
Open-source Figma plugins for speeding up the workflow — great way to look inside and learn.
Resources
macOS Monterey UI Kit for Figma
New UI Kit from Joey Banks for the latest version of macOS. Like all other kits by Joey, this one is spectacular and incredibly well done.
Material 3 Design Kit
The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.
Backstage
Championing Low-Ego Leadership at Figma
“In this episode of Uniquely Led, Dylan Field, CEO & co-founder of Figma, shares his journey of going from intern to CEO at the age of 20, discovering the difference between leadership and management, and the importance of being a low-ego leader. He discusses Figma’s culture of growth, which focuses on bringing in amazing people and ensuring they achieve their full potential.”
Index Creator Summit: Why is everyone talking about creators?
“Why is everyone talking about creators? Jack Conte, co-founder of Patreon, and Dylan Field, co-founder of Figma, discuss the creator phenomenon with Danny Rimer at the Index Creator Summit.”
Rogie King at DesignOps Island Discs Podcast
“From community-driven design process improvements to the world of plugins and the future of design tools, we talk to Rogie King, Designer Advocate at Figma, about the power of community.”
Behind the build: a Q&A with developer Tru Narla
“We are always impressed with the Figma Community and wanted to share what they’ve come up with, so we reached out to three developers to learn more about who they are, what they built, and what they’re working on next. Read our first Q&A in the series with Tru Narla, and check out her widget on the Figma Community.”