Config 2020. Shadow spread. Style Picker Improvements.
The Figma team is on fire! 🔥 Make sure to check out fantastic updates released during the last two weeks. Figma also announced the next Config conference, which will be in September and completely virtual.
A collection of design systems shared in Figma Community is a great resource to explore and learn from. Relay app looks very promising for integrating Figma into the development process, and in general, I enjoy seeing a rising interest in Figma from developers. If you’re into tabletop games, don’t miss the story on designing and playing Star Trek Adventures in Figma. Enjoy!
— Eugene
App Updates
Behind the feature: shedding light on shadow spread
Now you can adjust shadow spread in Figma on some kinds of objects to create better depth, glows, and borders. It’s fully compatible with the CSS property box-shadow.
Style Picker Improvements
List view for color styles. In-line details for text styles. Search. The edit icon is available in the list view. Fantastic update!
A deep dive on deep search
Figma released Universal Search in April, and now they rolled out Deep Search, which allows to search for files that contain a given word or phrase.
Figma moves away from the “master component” terminology
Sho Kuwamoto provides some context for their decision.
What’s New
Design Systems for Figma
A collection of design systems shared in Figma Community. Lots of great companies and examples to learn from.
Figma for Web Developers
A frontend developer’s glance at Figma. His view of Figma as a GitHub for designers rings very true to me.
Figma tips for developers
Another developer’s perspective on using Figma. Nice to see how shared resources and available UI kits empower developers to design on their own.
Playing Tabletop RPGs via Figma
Designing and playing Star Trek Adventures in Figma, with a group of people who never used the app before.
Using Figma
How to resize images using Auto Layout
A trick that combines Auto Layout, frames, and fills to resize image layers along the vertical and horizontal axes.
Design Challenge For Figma Community
Three interesting challenges for the community. A good way to see how well you know Figma!
Set the width or height of an exported file
I recently learned that in the Size field of the Export panel, a number followed by w or hcould be used to specify the width or height of the exported image.
Build it in Figma: Design responsive and resizable forms
The 3rd part of the series focuses on creating constraint-based field components with Auto Layout to build forms that scale to various browser sizes.
Build it in Figma: Create a Design System — Foundations
Create your style guide, type scale, and brand color scheme and turn them into shared styles, grids, and typography to kick off designing a design system from scratch.
Office hours: Building illustration systems with Pablo Stanley
Using the Blush plugin and illustrations from artists around the world, Rogie and Pablo Stanley will create an illustration system with components, assets, and constraints.
In the file: Building illustration systems and the Blush plugin with Pablo Stanley
Pablo Stanley, a co-founder of Blush, gives an inside look into the launch of the free illustration library and how his team built one of Figma’s most downloaded plugins.
In the file: How to run remote user testing at scale
Get user feedback earlier and faster on your designs by running user testing and turning research into actionable insights.
Switching
Managing and upgrading a UX design team’s toolkit
The team at Youse switched to Figma from Sketch, Marvel, Zeplin, and Google Drive. They tried to solve their problems with Abstract, but gave up and moved everything to Figma after a few months. Not only that improved collaboration and handoff process within teams but also saved almost 65% of tools cost.
Getting Started in Figma
A while ago, Rafal Tomal recorded an hour-long video on getting started in Figma, and now he shares why he switched to it completely.
My top 5 reasons for switching to Figma in 2020
A short but solid overview by Alberto Orsini.
Apps & Integrations
Relay for Figma
Relay allows you to push graphics in Figma straight to the GitHub repository. This is quite amazing, as now, with a proper setup, changes in a design file can be reflected on a live website without fiddling with exports.
Plugins
Contrast
Contrast makes it easy to check the contrast ratios of colors along with passing or failing WCAG levels.
Figma to Code
Convert Figma layouts into responsive webpages (in Tailwind) or mobile apps (in Flutter and SwiftUI). The plugin takes Auto Layout into account, and even when it’s not applied, but objects are aligned, it will make them responsive.
Maximum Override
Compare objects to see what’s different, then copy and paste the changes.
GPT-3 plugin to design for you
I shared some of Jordan’s experiments before, but this one goes much further.
All of my Favourite, Most Used Figma Plugins
Jason Crabtree shares a list of his favorite plugins. Good recommendations.
Resources
Figma Pitch Deck Template
300+ components for creating a professional pitch deck in Figma.
UX Toolkit for Figma
A new UI kit for creating user flow charts and wireframes based on Ant Design System.
SwiftUI Input Kit
This Community resource includes components and styles for colors, typography, inputs, and tabviews to make designing and creating SwiftUI apps a bit easier.
Hicon Icon Pack
A free pack of 300 simple vector icons, all designed in Figma.
Figma Plugin Design System for Svelte
Svelte components for building the UI of Figma plugins. May be a good and lightweight alternative to using React.
From the Headquarters
Config Europe: Call for Speakers
Figma announced that the next Config conference will happen on September 17th, 2020, be completely virtual, and free to attend. Registration opens on August 20th, but right now, they are looking for speakers.