Branching. Schema Conference. No code.
It only fits that the 50th issue of the newsletter is the largest one so far. While on average every issue has about 27 links, this one is 41! Between the Schema conference, the release of Branching, and major updates to popular no-code tools, there are lots of good things to write about.
If you missed the Schema conference, this issue contains the most complete list of video recordings. They’re not listed on Figma’s YouTube yet, and some of the smaller talks and panels are not available in the event account. I gathered links from a few sources, so spread the word and enjoy great content! While I attended the online conference and watched the first few talks live, I still have to catch up with a few of the later talks.
Special thanks to Webflow for sponsoring Figmalion. Check out their Webflow Inspo newsletter for quality design and no-code resources.
— Eugene
Sponsor
Webflow Inspo
It’s like if your favorite uncle was a Figma pro and knew his way around Webflow, and also happened to have an email newsletter.
Branching
Branching in Figma is here!
Branching is now available to teams on the Organization plan. It was announced in April at Config 2021, but according to Rasmus Andersson, it’s been in the making for 5 years. The lack of branches was the main issue when my team switched from Sketch and Abstract to Figma in 2018, so I hope it will become available on the Professional plan one day.
The challenges of building branching
Figma’s Director of Product Sho Kuwamoto shares some of the challenges of building branching.
How (and why) we built branching
John Fuetsch, Software Engineer at Figma, explains why they’ve built branching. “Branches are exploratory spaces that enable designers to try new ideas without changing the main file until they’re ready and approved. They are especially useful for preserving the integrity of approved designs, while making room for work that’s experimental or iterative in nature, like contributing to a design library and previewing work for stakeholders.”
Collaborative design system contributions
“In this tip, learn about maintaining component libraries and enabling more seamless contributions from consuming design teams by using Branching.”
Schema 2021
Video recordings from Schema
All talks are already available in Schema’s event account. (NB: if you didn’t attend the conference, you’d need to create an account first.) Alternatively, I’ll share the direct YouTube links below with some relevant resources.
Conference Kickoff
Sho Kuwamoto, Director of Product at Figma. “Join Sho as he kicks off our inaugural Schema conference with opening remarks. Tune in for his reflections on how design systems have grown and changed and how us system designers can help shape a better, more inclusive future.”
Guidance over governance
Jen Yee and Luca Orio, Netflix. “Jen and Luca will reveal how systems and freedoms can coexist and how your design community can thrive at any stage. Letting go of consistency and control might sound scary, but embracing a culture of context and trust is the key to supporting an ecosystem where collaborative creation can truly fuel innovation.”
Mastering the art of code — aligned UI kits
Jan Toman, Productboard. “Not sure where to start? Get your libraries off the ground by learning how to craft UI kits that designers will love using. We’ll dive into building flexible components, aligning their API with code, and dealing with changes as the design system evolves.”
Reimagining Atlassian design system
Jennie Yip, Atlassian. “Design systems have evolved into robust ecosystems of interconnected tooling, documentation, conceptual models, and more. We’re excited to bring you on a journey to celebrate and reflect on the past decade as we shift our mindsets, apply systems thinking, take on the monster of scale, and embrace the complexity of “platform.””
User-centered design system resources
Jeremy Dizon, Runi Goswami, Michael Yom, and Joanne Deng from Lyft. “Like any product, a design system is only as useful as it is usable. In this session, the Lyft Design Systems team will share the end-to-end resources that enable their system users to build consistent, quality products and features at scale. We’ll learn about their most resilient processes, their past mistakes, their new-ish contribution model, and more.”
Design tokens on Asana’s Design Systems team
Jina Anne, Ivy Wang, and Ainsley Wagoner from Asana. “This talk is about how the Asana Design Systems team uses design tokens to get designers and engineers working at the same level of abstraction. We will talk about how Figma’s design system tooling, along with design tokens, enables us to make the redundant parts of designing more streamlined so that we can focus on solving design problems.”
Building custom Figma plugins
Kelly Gorr and Prasanna Gunuru, Microsoft. “Figma is a powerful design tool that is used by many designers across Microsoft. Building custom Figma plugins can unlock new capabilities, resources, and shortcuts that are tailored to enhance design processes. Kelly and Prasanna take you through what it’s like building Figma plugins and how they are used at Microsoft.”
Material You and Figma
Ivy Knight and Rody Davis, Google. “Material You is enabling a new level of individuality across interfaces. But how does dynamic color interact with the distinct brand expression in your design system? In this session, we’ll dive into the NEW Figma plugin for generating dynamic color schemes and see those changes reflected throughout your app’s UI.”
Design systems panel discussion
“Figma’s Designer Advocate Luis Ouriach has been collecting your questions in chat and online. He’ll dig in with our speakers to tackle design systems questions big and small.”
Design system change management
Hugo Raymond, Burberry. “How can we better understand the context of our Design Systems among our broader product teams? Join us to learn Burberry’s approach, including how to best work with engineers, standardise and understand shared context for reusability, and how to think about both strict and loose frameworks of adoption.”
The Governance of Design Systems
Heldiney Pereira, Monzo. “We all spend time reflecting on structures of design systems, but have we invested enough understanding the governance of those systems? Join Heldiney as he digs into the different models available to run and scale design systems globally.”
Behind the system: A showcase of files that inspire us
“Ever wonder how other companies set up their Figma files? Joel Miller from Figma will take us behind the scenes and provide tips, tricks, and examples you can implement today.” See also a Twitter thread with all the resources that Joel shared.
Tips shared during Schema
Patrick Banta compiled a list of design system resources recommended during Schema.
Backstage at Schema
Pretty cool to see the backstage of the production. Schema wasn’t a typical Zoom conference.
Using Figma
Design tools: usage vs. satisfaction
According to the results of Jamstack Community Survey 2021, 60% of respondents use Figma, and its satisfaction score is 8.8. Look at the chart to see how incredible this score is when compared to other design tools. There is nothing like this in any other category either (except for IDEs, but that’s not a specific tool.)
Figma Guide for Auto Layout & Constraints
“Creating components with automated sizing behavior saves a lot of time during the process. They also let us think more like a developer that has to implement the real application. That is why it is essential to master Constraints and Auto Layout in Figma.”
A recent trick/tip that you share with everyone
As always, Rogie’s tweets gather a lot of fantastic replies.
Match Variant properties & names with what’s reflected in the code
Joey Banks with an excellent suggestion on how to bring designers and engineers closer.
Write changelogs
Jan Toman (see his Schema talk above) with a few recommendations for design system maintainers.
System for keeping a file in order
Anton Lovchikov shares his approach to structuring pages in the Figma file.
Naming arrow Variants
Bonnie Kate Wolf suggests using Unicode emojis in front of the variant name for a quick preview.
Fully interactive calendar
Impressive hyper-realistic prototype of a calendar made with interactive components.
Replicating PlayStation 5 UI
A cool recreation of PS5 UI with Smart Animate.
Mastering design systems components in Figma
If you liked Jan Toman’s talk at Schema, check out this one as well.
Batch create styles
Luis shows how to create styles at rocket speed using batch renaming and the Styler plugin.
In the File: Building a Design System for designers
“Join to hear from Lauren Duxbury and Julie Lee at Honeywell about how they evaluated, tested, and advocated for a design system that works for designers.”
No-code
Introducing Anima 5: bringing Material Design to Adobe XD and Figma
“Today’s launch of Anima 5 marks another milestone on our mission to perfect the design-to-development workflow: truly functioning Material Design in Figma and Adobe XD. This means you can now build prototypes using actual code-based Material UI components.”
Bravo Studio 3.0
Bravo Studio is a platform for building mobile apps from Figma prototypes without writing code. The new version adds a whole new set of functionalities. See also their new demo video.
Resources
Isometrica
Isometric 3D constructor for creating complex scenes easily in Figma.
Product Design Portfolio Presentation Template
The template from Furquan Ahmad to help you structure your portfolio presentation and talk about yourself and your case studies with ease.
Plugins
Warp Tools
”Warp your designs using Smudge, Twirl, Bulge, Pinch, Arc, and Free Transform tools. This plugin brings the typical warp tools known from other vector apps to Figma.“
Logo Layout
Such a great idea and a useful plugin for optically scaling and distributing logos! Check out Cory Etzkorn’s video demo.
Backstage
GraphQL, meet LiveGraph: a real-time data system at scale
“For the infrastructure team, the question was: how do we empower our product engineers to build these real-time views easily, while abstracting away the complexity of pushing data back and forth? To provide a general solution to this fundamental business need, we developed LiveGraph, a data fetching layer on top of Postgres that allows our frontend code to request real-time data subscriptions expressed with GraphQL.”
Kyle Parrish (Figma): Sales Culture Matters
“Kyle built Figma’s sales team from scratch. When he joined, company culture was established and PLG was already driving hypergrowth. Learn how Kyle integrated sales into Figma’s culture, and got the whole company cheering for the next gong.”