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!
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
List view for color styles. In-line details for text styles. Search. The edit icon is available in the list view. Fantastic update!
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.
Sho Kuwamoto provides some context for their decision.
A collection of design systems shared in Figma Community. Lots of great companies and examples to learn from.
A frontend developer’s glance at Figma. His view of Figma as a GitHub for designers rings very true to me.
Another developer’s perspective on using Figma. Nice to see how shared resources and available UI kits empower developers to design on their own.
Designing and playing Star Trek Adventures in Figma, with a group of people who never used the app before.
A trick that combines Auto Layout, frames, and fills to resize image layers along the vertical and horizontal axes.
Three interesting challenges for the community. A good way to see how well you know Figma!
I recently learned that in the Size field of the Export panel, a number followed by
h could be used to specify the width or height of the exported image.
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.
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.
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.
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.
Get user feedback earlier and faster on your designs by running user testing and turning research into actionable insights.
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.
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.
A short but solid overview by Alberto Orsini.
Apps & Integrations
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.
Contrast makes it easy to check the contrast ratios of colors along with passing or failing WCAG levels.
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.
Compare objects to see what’s different, then copy and paste the changes.
I shared some of Jordan’s experiments before, but this one goes much further.
Jason Crabtree shares a list of his favorite plugins. Good recommendations.
300+ components for creating a professional pitch deck in Figma.
A new UI kit for creating user flow charts and wireframes based on Ant Design System.
This Community resource includes components and styles for colors, typography, inputs, and tabviews to make designing and creating SwiftUI apps a bit easier.
A free pack of 300 simple vector icons, all designed in Figma.
Svelte components for building the UI of Figma plugins. May be a good and lightweight alternative to using React.
From the Headquarters
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.