300+ components for creating a professional pitch deck in Figma.
Jason Crabtree shares a list of his favorite plugins. Good recommendations.
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.
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.
Get user feedback earlier and faster on your designs by running user testing and turning research into actionable insights.
I recently learned that in the Size field of the Export panel, a number followed by w
or h
could be used to specify the width or height of the exported image.
TIL: you can set the width or height of an exported file in @figmadesign by entering a number followed by 'w' or 'h' in the Size field. pic.twitter.com/MfNcbhssIl
— Eugene Fedorenko 🇺🇦 (@efedorenko) July 20, 2020
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.
A trick that combines Auto Layout, frames, and fills to resize image layers along the vertical and horizontal axes.
Designing and playing Star Trek Adventures in Figma, with a group of people who never used the app before.
Sho Kuwamoto provides some context for their decision.
This week, we partnered with our friends at @AdobeXD and @sketch to move away from the "master component" terminology.
— Sho Kuwamoto (@skuwamoto) July 22, 2020
Predictably, we were met with a few replies from haters who thought we were being too "PC".
1/n https://t.co/8PcNjkDiau
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.
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
.
Marcin Wichary, Design Manager at Figma, gives an inside look into how selection colors and OpenType support were built.
A starter wireframe kit for quick design and prototyping of ideas. Its library contains more than 150+ components and 50+ ready to use mobile screens.
“Magically create and present stunning slide decks from your Figma designs.”
Cool app for creating high-fidelity prototypes and exporting HTML from Figma designs. See also their review on DesignCourse YouTube channel.
Quant UX is a prototyping tool supporting importing from Figma. I was impressed with their tools for analyzing data collected from user tests.
I wrote about plugin HTML to Figma before, but now we came the full circle.
In the first part, Rogie uses constraints and components to build navigation that scales from mobile to desktop. In the second part, he shows how to use Auto Layout to design flexible grids, hero, and card components that adapt to any browser size.