Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #2

November 25, 2019

In this issue we talk about essential apps for running a design team, making Figma work on an iPad, different approaches to organizing and maintaining projects, integrating with Tailwind CSS, and a quick guide for beginners. There is also a collection of great plugins for building flows, wireframing, documenting designs, enhancing work with components, and building themes. Feel free to send me any related links by replying to this email or contacting me directly.

Eugene

Since The Last Time

Getting Figma to work on iPad

A cool workaround to use Figma on iPadOS using Google Chrome and mouse. It’s not a perfectly smooth experience yet, but getting close!

Why you should be running your design team entirely on Notion + Whimsical + Figma

Not specifically an article about Figma, but an argument that all you need to run a design team today is Notion for documentation and PM, Whimsical for diagramming and sketching ideas, and Figma for hi-fi design and prototyping. (I’d say that you can go further and replace Whimsical with Flowkit plugin described below.)

Brown CS Alums Dylan Field And Evan Wallace Named INC 2019 Rising Stars

Inc. Magazine recognized Figma cofounders Dylan Fields and Evan Wallace as “Rising Stars of 2019”, and Computer Science Department at Brown University talked to Dylan about what sparked the idea for the company.

Stories

7 ways to level-up Figma

Great article by Ollie Jackson covering a lot of ground, including how to make prototypes more maintainable, communicate effectively with comments, organize text styles, and even integrate Tailwind CSS framework into a Figma design project. (If Tailwind CSS is your jam there is also a design kit for it in Community Projects section.)

Marie Kondoing for UX Designers: Organizing my Figma files

Raquel Piqueras from Microsoft shares her approach to organizing Figma files for collaboration with designers, developers, PMs, researches, and other team members. Good advice on clearly communicating to others of what they are looking at and what is expected from them.

12 super helpful Figma plugins you can start using now

A solid overview of some of the most useful plugins, ranging from generating content to organizing projects, creating visual effects, and even checking designs for WCAG conformity. Something for everyone.

The Beginner’s Guide to Figma

Short video course by Joe Previte on (always fantastic) egghead.io with a quick introduction to Figma.

Community Projects

iOS Keyboards

A collection of iOS keyboards in both orientations and light/dark themes to use in mockups and prototypes.

Design Kit for Tailwind CSS

Figma Design Kit for Tailwind CSS, a utility-first CSS framework for rapidly building custom designs.

@nerdfox

Nerdfox builds interesting animation demos using Smart Animate features.

Interesting Plugins

💰 Flowkit

Flowkit icon Flowkit is designed for building user flows and annotations right inside Figma, Sketch, or Adobe XD. The components are very nice and flexible — check out the demo video of a Figma plugin. This is a commercial plugin requiring a license.

HTML To Figma

HTML To Figma icon This is some serious sorcery. I tried this plugin on a few websites and while results weren’t perfect it did 80% of the grunt work. If you want to iterate on an existing website in Figma it will take just a little time to fix a few problems instead of implementing everything from scratch.

💰 Master

Master icon Master creates a new component from a set of similar objects. The demo video makes it easier to understand the concept. It seems like a really powerful tool for tidying up a project after design exploration is over.

AutoLayout

AutoLayout icon While we are waiting for a real auto-layout to ship, this plugin dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. Demo video in the author’s Twitter.

Themer

Themer icon Themer enables you to create and swap themes from your published styles in your team library. Can be really useful for building light and dark themes of the app.

Smart Text

Smart Text icon Smart Text helps with building automatic documentation and style guides. Create custom text expressions with special tokens for layer’s properties like size, colors, fonts, etc. Then run a plugin to update these tokens with up-to-date data from the layers. Check out the demo video in the author’s Twitter.

Wireframe

Wireframe icon Wireframe plugin is useful for creating user flow prototypes and basic structures. It has a list for web, mobile, tablet, and flow templates divided into categories that can be added directly to Figma.

Useful Products and Services

Angle 3 – 1000 Devices & Mockups

If you need to show design mockups on a screen of a real device, this library offers 1,000+ customizable device mockups.

Figma Link Shortener!

Fun shortener for Figma links using figma.fun domain name.

From the Headquarters

Figma Desktop App Beta Testing

If you experience problems with desktop app performance this beta build may be worth trying.

Figma’s infrastructure: What goes into powering a web-based design tool

An interesting look into issues and challenges that the infrastructure team at Figma is facing.

Opening up the data behind your design systems

This feature is only available for teams on enterprise-level Figma Organization plan, but thinking behind it is fascinating. Design System Analytics shows how the system and individual components are used across the team, and highlights if some of them are too rigid and get detached often.


Found something interesting in this issue? Please upvote Figmalion on The Product Hunt so more people can get to know about it.

Archive