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.
Since The Last Time
A cool workaround to use Figma on iPadOS using Google Chrome and mouse. It’s not a perfectly smooth experience yet, but getting close!
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.)
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.
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.)
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.
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.
Short video course by Joe Previte on (always fantastic) egghead.io with a quick introduction to Figma.
A collection of iOS keyboards in both orientations and light/dark themes to use in mockups and prototypes.
Figma Design Kit for Tailwind CSS, a utility-first CSS framework for rapidly building custom designs.
Nerdfox builds interesting animation demos using Smart Animate features.
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.
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 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.
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 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 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 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
If you need to show design mockups on a screen of a real device, this library offers 1,000+ customizable device mockups.
Fun shortener for Figma links using figma.fun domain name.
From the Headquarters
If you experience problems with desktop app performance this beta build may be worth trying.
An interesting look into issues and challenges that the infrastructure team at Figma is facing.
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.