Organizing and maintaining projects. Tailwind CSS. Flows & wireframes.
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 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
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 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
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 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 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 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.