Figma best practices, UI checklist, and removing a photo background with AI
Promo
Book “Designing in Figma”
My practical guide to Figma, showing how to create layouts that will evolve over time, build design systems at scale, and stay organized and efficient in the process.
What's New
10 Figma Best Practices to 10X Your Workflow
Most “best practices” articles are too basic and superficial, but this one by Danny Sapio is a rare gem. All of the recommendations are solid, and by following them you can make a huge difference to your Figma workflow.
We gave up Sketch and rebuilt our design system in Figma
Karen Liu shares the pains of using Sketch + Abstract combo and why her team at Brave embraced Figma, even while it meant completely rebuilding the design system.
Why UX writers should learn Figma
“Because many of us have little to no background in visual arts or graphic design, Figma is not usually prioritized as a skill for writers, and we’re not usually asked if we’re proficient. However, there are numerous benefits to learning the basics. Many folks working in content have become self-taught Figma aficionados because taking the time to master the essentials has made their work easier — and their role on the team more effective — in the long run.”
Building a menu with nested components
Ridd shows how to build a menu component from multiple nested components.
Right and wrong ways to use Variants
Good thread by Ridd on creating variants from a single base component.
Trick to Show/Hide Header on Scroll in Figma
“Here is a simple trick that you can use to hide and unhide the app header on scrolling down. This trick can be used in web and mobile app prototyping, as the user scrolls down the header will be hidden and as the user scrolls back to the top the header will be shown.”
Copying individual properties
How to copy and paste an individual property for color or an effect.
Auto Layout chat bubble components for FigJam
“In this Figma Tip, we create an Auto Layout chat bubble to be used in FigJam. Chat bubbles outlined in this tip and some additional Auto Layout notecards can be downloaded and reused from a community file.”
Coffee with Charli and Shopify: Scaling Systems
“In this episode, Charli talks with Sara Hill and Dan Ross product design leads at Shopify. They show off the evolution of the Shopify design system, how they’ve managed to scale it, and the challenges they faced along the way.”
FigJam
Async Design Sprint
Template for running an asynchronous and remote design sprint in FigJam.
FigJam tip: fun with stickies
“Learn some FigJam shortcuts, bring FigJam stickies into Figma, change the colors, copy-paste stickies as action items in Asana or a list in text-based applications.”
Resources
UI Checklist by Shift Nudge
Not directly related to Figma, but I’m a big fan of checklists, and this one by MDS is really good: “The top 101 things to consider when designing visually beautiful interfaces. Use this to self-critique any of your designs, whether it’s homework from this course or your own projects.”
Plugins
Responsive
Preview your responsive designs inside Figma. Check out a new video by Figma:55 on how to use it.
Remove BG
Remove the background of images automatically, using remove.bg’s clever AI.
JSON to Figma
Parse JSON files and populate any layers with text or images.
Backstage
Software Design Startup Figma Is Now Worth $10 Billion
“Software design company Figma Inc. has raised fresh funding at a valuation of $10 billion, quintupling its pricetag since last year. The company, which allows customers to collaborate on software as they build it, said demand jumped during the pandemic while more people worked remotely. Figma raised $200 million in the funding round, the company told Bloomberg. Backers included Durable Capital Partners and Morgan Stanley through its Counterpoint Global group.”
Figma’s Series E
Dylan Field’s internal email to the Figma team announcing a new round of investments.
Design Startup Figma Just Opened a New ‘Hub’ in NYC and Is ‘Growing Like Crazy’
“Not to be confused with the traditional office space of the pre-pandemic before-times, Figma’s hubs are designed to accommodate its new hybrid work model. In this model, each employee — or “Figmate” — can decide if they want to be fully remote or associated with a specific hub. Those who are aligned with a hub are expected to go into the office a minimum of two specific days a week, meaning they will be the same for everyone in the office.”