Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #19

July 27, 2020

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 h could 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 Contrast makes it easy to check the contrast ratios of colors along with passing or failing WCAG levels.

Figma to Code

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

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.

Archive

Book “Designing in Figma”Designing in FigmaComing this summer