Miggi goes over all of the basics when getting started with variables and modes for your design layouts. “Explore what it takes to use variables to create a dark and light mode experience, change the density of your spacing, vary the languages your design UI can accommodate, and so much more.”
In this interview, Figma CPO Yuhki Yamashita reflects on his journey as a PM and what he has learned trying to build products that people love.
Ana Boyer with a tutorial on how to create a range slider with Auto Layout.
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.”
Double Glitch presents the video tutorial on cursor tracking technique as the first part of his series on advanced prototyping in Figma. You might remember his demo of this effect from a few months ago. A smart way to achieve the effect with a grid of interactive components!
Ridd interviewed Nikolas Klein and Garrett Miller from the prototyping team at Figma. Together, they provide a behind-the-scenes look at everything that led up to the advanced prototyping release at Config 2023. For a few takeaways on two types of prototypes and the use of variables, see this thread by Ridd.
Speaking of Diagram, Ridd interviewed Marco Cornacchia — the founding designer at Diagram, and now a product designer at Figma. “In this episode, Marco shares how he (accidentally) created a new trend of animated bento grids. And we also get a behind the scenes of what it was like being the founding designer of Diagram and ultimately getting acquired by Figma.”
Tutorial Tim dissects a beautiful Fey website and shows how to leverage developer tools in the web browser to extract CSS values and implement them in Figma.
A new webinar is a panel discussion with Hugo Raymond, a Designer Advocate at Figma, and three guests: Karl Kech, Design Engineer at DuckDuckGo; Amber Feinerman, Design Systems at Netflix; and Pranathi Peri, Product Designer at Graphite. They discuss the evolving role of design engineers and technologists in the tech industry, career progression, impact, specialization, and navigating the gap between design and engineering.
“Discover how you can import all of your existing Jamboard files to fully editable FigJams! From sticky notes to sketches, watch as we demonstrate how to seamlessly transition your Jamboard content into FigJam, where you can harness the full range of FigJam’s interactive capabilities.”
A workshop by Miggi and Alex exploring ways to use FigJam like a pro, including shortcuts, deep-dive features, and ways to speed up your workflow — both independently, and when collaborating with others!
“Prototyping in Figma allows us to create realistic designs to test on real users, but there’s a lot that goes into taking designs from static to something that looks functional. Join our team for a Q&A focused on bring your designs to life with prototyping and user testing.”
“In this livestream, Figma designer advocates, product managers, engineers, and designers will take you through everything we launched — from new on-canvas previews for the font picker, to fun new ways to collaborate in FigJam and time-saving prototyping updates.”
“In Figma, scroll position defines how individual objects behave when you scroll past them. There are three types of scroll positions: scroll with parent, fixed, and sticky. In this tutorial, we’ll focus on sticky scroll and see how we can use it make our prototypes even more dynamic.”
Luis shows how to make slot components more useful by “outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.
Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.
“Figma can be a magical place to collaborate, build, and ship, but if you’re just starting out, it can be overwhelming. Join our team for a Q&A focused on the need to know features for those just getting started to help you build out your Figma designs successfully and efficiently.”
A short tutorial from Figma on using variables, interactive components, and conditional logic to build a prototype. These advanced features help prototype faster, reduce memory usage, and minimize maintenance time.
Miggi shows how to incorporate video prototyping into your designs and make interactive presentations. “Using video in Figma prototypes can create a more realistic experience, and add a level of polish when testing designs. We will dig into some real-life examples and walk through the many ways you can interact with, and use video to drive your interactions. We’ll cover aspects of video prototyping such as adding video to the canvas, previewing and adjusting video on the canvas, state management and video continuity across frames, and advanced interactions like “when the video hits”.
“Need help aligning on what to build next? When product teams need to figure out what to prioritize, user journey maps can help them see where their attention is needed most. In our new user journey map video, we’ll show you how to quickly customize a user journey map session using templates in FigJam.”