“This is a guide for using Figma and Google Sheets to rapidly prototype card games. It includes links to the tools, an overview of the key steps, and links to templates.”
Aleksei Kipin shows how to apply the Atomic Design approach to creating Figma components.
A valid point that specifying an element as a component and then detecting all the places where it has already been used would be a great alternative to the existing approach of defining components before using them.
“You can now activate the Hand Tool with a click in the toolbar or by pressing H, as well as by holding the space bar. This lets you pan with one finger instead of two on laptops with touchscreens.”
Sharing prototypes without giving access to their design files was released after being announced at Config.
We heard your feedback: today we’re introducing a new prototype sharing permission.
— Figma (@figma) February 27, 2020
Now, you can share *just* a prototype without giving clients and stakeholders access to the underlying design files. pic.twitter.com/vWxfbGpYn2
Slide Guides is a collection of grid styles for 16:9 widescreen slides. They’re perfect for jumpstarting a presentation in Figma or for exporting to use in Keynote or Google Slides.
A collection of Moodboard layouts from Mixpanel, and accompanying slides that make presenting design concepts easy.
The plugin provides access to the library of Lottie animations and interactive designs.
Lots of ideas on structuring Figma files and projects in replies to this tweet.
Looking for new ways to structure @FigmaDesign files / projects.
— Josh Hemsley (@joshhemsley) February 18, 2020
We have lots of explorations and micro prototypes, but need a good way for everyone to always know where the latest and greatest is. Any tips? How does your team structure their files?
Design team of 5-10.
Build and animate a prototype for a simple micro-interaction in Figma in this tutorial by Jeremy Osborn, Academic Director at Aquent Gymnasium.
Plugins to accelerate managing, ordering, and labeling design system components. The recommendations are pretty good, but I don’t think it’s fair to call some of these plugins with thousands of installations “underrated”.
How to speed up a tedious process of setting up a basic color system in Figma using plugins Smart Text and Chroma Color.
Solid collection grouped into categories like accessibility, collaboration, productivity, development, animation, and optimization.
Joey Banks from Figma shows how he uses Auto Layout to generate previews of their newsletter template for both desktop and mobile.
Brian and Marshall discuss creating layouts with Sketch’s Smart Layout and Figma’s Auto Layout, and compare the experience with implementing layouts in CSS and SwiftUI.
Adam Noffsinger shares his experience with using Figma for testing a self-driving car interface on a tablet using Figma Mirror.
I haven’t used @figmadesign for prototyping much, but this week we’ve been using it for complex user testing due to time constraints.
— Adam Noffsinger (@ANoffsinger) February 13, 2020
Thought I’d share some thoughts in a thread:
Nice tip! That’s something I use quite often.
Need a vector logo but can't find it online?
— Cory in SF (@coryetzkorn) February 12, 2020
1. Right click on the logo
2. Inspect
3. Find the SVG node
4. Right click >> copy >> copy outerHTML
5. Paste (⌘V) directly into @figmadesign pic.twitter.com/gGObil7yJr
A list of 5 solid principles for building components — reusability, nesting, UI and UX patterns, reusing styles, and consistent naming structure.
Samuel shares a few tips on organizing Figma files.
“A strategy that may help ease some of the pain and confusion when deprecating unwanted components.” That’s something we all have to do from time to time, so I’m glad Steve Dennis documented his approach.