Videos

Dylan Field talks about startups and European regulation on stage at Slush 2024.

Nick Babich shows how to create a responsive grid system and explains the difference between Center and Stretch grid types, as well as how to calculate the right gutter and margin for different viewports. See also his layout grid cheat sheet.

Ridd brings up an important point — design systems became too complicated and associated with scale, but they’re still the perfect first step for startups. The solution is to keep things simple and focus on a few basic components and primitives in the ​“design toolkit”.

I had a few conversations about building design systems lately, and my general approach was to start from scratch only if a dedicated team is working on it. Most often, picking an open-source component library like shadcn/​ui or similar and customizing it to your needs is a much faster and more aligned approach.

Component properties can now be bound to variables, unlocking the ability to use translation strings in props. Learn how to bind them together in this video by Chad Bergman or this thread by Jacob Miller.

Really well-made video tutorial explaining masks in Figma: ​“We answer questions such as: What is a mask? How does it work? How do you use it in Figma? We demonstrate advanced usage and share real examples from our projects.”

I covered October updates in the previous issue, but now you can watch the recording of the second episode of Release Notes with advocates Jake Albaugh and Kaitie Chambers.

Mark Foo from Figma shows how Dev Mode addresses common issues in design handoffs by providing a unified workspace where developers can access up-to-date design elements, annotations, and measurements directly within Figma. With features like version comparison, sandbox testing, and integrations like Code Connect and Jira, Dev Mode aims to streamline development workflows, improve efficiency, and foster a cohesive design and development environment.

Molly Hellmuth hosted a Q&A with Lewis Healey, Lead Designer for Atlassian’s Design Systems. They discussed how 55 designers on his team collaborate with over 600 product designers and thousands of engineers, ensuring cohesive design through Figma-based foundations and a targeted 95% adoption rate of design standards. Lewis emphasized flexibility in component use, a focus on education through champions and office hours, and precise tracking with custom dashboards to monitor design system adoption across 20 products.

Luis and Molly discuss how every small and large decision was made in Figma’s Simple Design System.

A good demo of all Figma AI features by Tair from a few months ago.

In this workshop, Miggi explores approaches to Advanced prototyping in Figma: ​“We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”

Smart technique and a cool effect! Blur is a power tool in capable hands.

Linear launched a series of conversations with product leaders on how things of quality get built: ​“What is quality? It seems hard to describe and even harder to measure, but you can feel it when it’s there. You know it when you experience it.”

“Join Luis from Figma and Daniel Henderson-Ede to talk all things accessibility with components, variables, and design at scale. Daniel is an accessibility expert and has contributed to the CVS accessibility kit, now used by companies, and has inspired new kits from GitHub, to document how components can be used and handed off to development teams.”

“Notion, Arc and Figma are teaming up to help you have your best semester yet. Join us for a special Back-to-School webinar featuring an exclusive panel with all 3 co-founder/CEOs (Dylan Field, Figma; Ivan Zhao, Notion; Josh Miller, The Browser Company) reflecting on their student days, followed by demos from fellow students showing how they set up these tools to organize their busy lives (and tame the chaos).”

Kaitie Chambers and Miggi kicked off the first episode of monthly Release Notes, where they dropped new features and recapped everything shipped in September. Readers of this newsletter will be already familiar with most of the changes, but there are some new things worth covering. 

UI3 rolls out for everyone on October 10th. The biggest change in the final version is the return of fixed panels — Figma listened to the feedback from the design community and closed the gaps. The panels still float when the Minimize UI (Shift-\) mode is turned on. Other changes include the always visible Auto Layout pixel values along the resize modes, the layer header showing 3 reorganized actions by default and one more when the panel is wider on larger screens, and showing the component library info in the component properties panel. It’s now even easier to set the Auto Layout object’s width and height to Fill Container or Hug Contents via the quick actions menu (Cmd-K) or a custom macOS shortcut.

After research or brainstorming sessions, FigJam stickies can now be sorted by color, author, stamp count, or stamp type in addition to the previously announced FigJam AI. Figma Slides now supports custom slide deck templates, which can even be published in the community. Slides are now viewable on your mobile device, so you can view and join a presentation from anywhere. 

Gary Simon makes a controversial case for not using grids in design. My 2 cents: grids help reduce the number of decisions you need to make, and maintaining a large set of mockups laid out with guides instead of Auto Layout sounds like a nightmare. That said, I think grids and Auto Layout should be added after figuring out the right direction, spacing, and hierarchy, not in the beginning.

In this video, Ridd shares the behind-the-scenes process of redesigning a website for Genway, from generating and exploring new ideas to skipping wireframing and going straight to high-fidelity work to progressively presenting ideas to stakeholders.

In this webinar, Designer Advocates Corey Lee and Hugo Raymond will guide you through communicating effectively through story-driven presentations and share techniques to up-level your slide designs to make your presentations and decks more compelling. ​“Good design tells a compelling story. How you convey that story can significantly impact its resonance with your audience.“

Luis Ouriach: ​“No one can deny the importance of accessibility, but successfully embedding accessibility into the heart of a business is no simple task. So where do you start?”