Cole Bemis demoed this experimental plugin for creating state machines and integrating them into your designs at the Figma × GitHub event last week. (Hope the video will be released later!) ​“Think of a state machine as a way to organize all the different ​‘states’ your design can be in. For example, a form might have states like ​‘empty,’ ​‘filled,’ ​‘submitting,’ or ​‘error.’ State machines help you clearly define these states and the rules for moving between them, making complex interactions more manageable.”

“Diana Mounter, Head of Design at GitHub, hosted a panel of Hubbers from research, engineering, and design, discussing everything from customer-first approaches to the integration of AI, and collaboration across GitHub teams.”

Sam Oshin, Senior Director of Brand and Marketing at GitHub, demonstrates how GitHub’s brand team uses Figma and a unique philosophy to building and maintaining brand systems.

The myriad of design annotation kits and countless types of accessibility training only works if designers want to use them. Learn how Alexis Lucio and Jan Maarten, Senior Accessibility Designers at GitHub, build new tools in Figma and host product design bootcamps to get designers involved and excited about accessibility.

A day before Config, teams from GitHub and Figma hosted a dev community event with lightning talks. The recordings are finally available.

In the first talk, Katie Langerman, Staff Systems Designer at GitHub, shares how designing, testing, and shipping new design tokens at scale without disrupting users requires meticulous planning and care. She discusses how the Primer design system team revamped Primer Primitives with a new naming convention and build process, connecting core Figma libraries with code.

Speaking of design conferences, the GitHub Design team recently held its second internal design conference, LGTM. You can watch talks from last year in the YouTube playlist, but a couple of this year’s talks have already been published as well — ​“Who is the We in the How Might We” on building trust and ​“Async/​Await” on close collaboration across non-overlapping time zones.

June 25th, 5:30–8:30 PM at GitHub’s SF office. ​“You’ll hear from GitHub designers, developers, and researchers, about their work on design systems, accessibility, brand, and AI.” 

A super useful video from Akbar, a Developer Advocate at Figma: ​“Want to sync your Figma Variables with your codebase? In this video, we’ll show you how to use our Variables GitHub Action example repo to sync your Figma Variables to your codebase and vice versa.”

You know I love color tooling! GitHub has been doing some excellent work on its color system, which is the foundation of the Primer design system. Last year they wrote about building internal color tooling for theme building, and in the new post, they share their process for making contrast changes in both default light and dark modes as part of GitHub’s larger accessibility strategy.

A live stream of a discussion between GitHub Education and Figma Education teams.

Jan Six is a Product Designer at GitHub and author of the Figma Tokens plugin. In this talk, he shows a few plugins he built to speed up his own design workflow.

Jan Six, Sr. Product Designer at GitHub, talks about creating a design tokens system in Figma. See also his plugin Design Tokens below.

“Unlocking collaboration is hard, especially for large remote teams. In this livestream, LinkedIn’s Renee Reid and GitHub’s Ash Guillaume share their insights and methodologies for creating collaborative and inclusive design processes.”

Can’t imaging a better place for GitHub to share their design system.

Brian Lovin from GitHub turned his Config talk into an article.

“The published plugin is private to our org, but hopefully the implementation is useful for anyone trying to build something similar.”