In another article, Luis Ouriach shares tools that save him hours when starting a new design system and introduces 9 recent design systems features (covered in Issue #206) that address some common frustrations.
Luis Ouriach is laying down some uncomfortable truths: “The issue I have with the even number 4px calculation grid systems is that they can feel a bit loose, either vertically or horizontally. Although this is the de facto standard in product design now, I find myself getting focussing on what feels like a few pixels of extra flab within our components.”
Love this experiment, the proportions in multiple-based systems often feel too close to each other: “If I were to try and roll this idea out into a system, I’d probably want to at least try to build in a method to the madness. This is where we can lean on systems like the Fibonacci sequence to handle the heavy lifting.”
The new curved connectors mode for right-brained people. I’ll stick to my neatly organized “elbowed” connectors.
My friend Molly Hellmuth Tsacudakis is bringing back her morning hike and coffee on Tuesday, May 6th from 7:30 to 11 AM. I’ll be arriving the night before and might need a caffeine drip along the way, but very excited about this event. “Make new connections while stretching your legs, soaking in the gorgeous bay views, and sipping on espresso. UI Prep’s Molly Hellmuth will guide you along a coastal trail with views of the Golden Gate Bridge. Afterward, we’ll enjoy some well-deserved coffee on the beach courtesy of UI Prep.”
Designer Advocate Corey Lee wants to help teams understand how to make the shift from just using design to becoming a truly design-driven organization. His central observation was that “the highest-performing teams don’t just use design; they embed it across every function.” After months of research and writing, Figma published his ebook to provide teams with insights to build a solid foundation of cross-functional design culture to navigate the current landscape of business and beyond.
Miggi breaks down his favorite features in Figma Slides, including automatically changing text color for accessibility, choosing slide templates from other decks, grid view, slide numbers, live interactions, and more.
Advocates Jake Albaugh and Chad Bergman wrote a tactical guide to collaborating with your developer counterparts, including common pitfalls, practical tips, and guidance on when to lean in.
In time for fully transitioning to UI3, Jay chats with Tim Van Damme who shows how he designed UI3 icons in Figma. You will learn about Tim’s icon design process, preserving visual weight, how he makes icons playful, and more. Don’t miss part 2, where they discuss designing UI3.
Y Combinator President & CEO Garry Tan sits down with Dylan Field to discuss “the evolving world of design in the age of AI, the challenging early days of the company, and how his team forever changed the way designers and engineers collaborate.”
Luis Ouriach sat down with the Figma team to talk about craft – what is it, how do they define it, and how can you get better at it. This is the first out of three videos in a new mini-series called Blend Mode.
Dann Petty has been one of the most vocal Figma critics lately. (See his previous post for some context, or go all the way back to moving drafts drama in the summer.) I don’t think corporations need help defending themselves, but in this case, I see the situation from a different angle and want to share some thoughts.
First, I built my first Framer website recently and thought it was a compelling alternative for designing websites. It often takes me longer to prototype a throw-away interaction in Figma than to do it straight in code (especially with AI!), so designing and animating the actual website instead of a mockup felt refreshing. I missed some of the more advanced features (no variables, really?), but I’m sure they are on the roadmap. In the end, it wasn’t the right tool for this project, but I agree with Dann that similar tools will be “owning the web design market”. That said, they have nothing to offer product designers.
Here is the part I disagree with: “(People are) mad at Figma because they lost focus on designers and got over bloated with useless features no one wanted or needed and started to focus on developers and their Config event.” Dann doesn’t specify which features he considers useless, but I assume it’s those related to larger design systems and developer handoff. Personally, I rarely feel restricted while working on visual design, but often hit the wall with a lack of CSS grids, inability to replicate the props.children behavior in components, still incomplete variables support, barebones design system analytics, Dev Mode, prototyping, etc. On my product team engineers outnumber designers 5 to 1, so a lot of our time and attention is spent on cross-team alignment. These features might be useless to freelancers and agencies, but worth their weight in gold to product teams.
Lastly, a note on Figma becoming “incredibly expensive.” First, they kept the same $15/m price of the Professional plan since 2018. According to the CPI Inflation Calculator, $15 in 2018 had the same buying power as $19.31 today — pretty close to $20. Second, at least in the US, $20/m or $192/year is not much for a pro tool — some of my streaming and newspaper subscriptions cost more. Third, it now includes two more products! My team just upgraded our Figma account to the Organization plan and it was cheaper to wait for the new pricing as we no longer needed separate licenses for FigJam and Slides. This will not be true for everyone, but not all seats increased in price while getting some perks.
Luis is working on an incredible community resource. Can’t wait to dig into it!
Ridd shows an advanced way of using variables to simplify prototyping and save a bunch of screens.
Cool page curl prototype by Miggi. Don’t miss the page turn animation on click.
Creators can now add structured tags to boost visibility and make it easier for you to find the right templates, UI kits, or design assets in Figma.
Luis Ouriach built a plugin for copying or exporting your Figma variables into CSS variables format.
A new plugin by Vijay Verma to quickly create animated smart components that are used most of the time, like rotate, zoom, slide, etc. It generates a set of components based on the selected animation preset.
Chad from Figma explains how Library Analytics in Figma Organization and Enterprise enables you to gain insights into library usage trends and drill into component, style, and variable usage.
Miggi explains and shows the new export options in action.
Jake returns with my favorite video series, this time explaining how to modify variable code syntax using JavaScript in the dev console. (Kudos to the video editor!)