Community | Figmalion

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.

Build it in Figma: Create a Design System IV — Testing

Testing a design system to see if the component library is robust enough in real-world scenarios.

Build it in Figma: Create a Design System lV —

Build it in Figma: Create a Design System V — Documentation

Rogie shows the best practices for documenting your design system using Figma and other tools.

Shape 2

A gorgeous library of fully customizable icons and illustrations from Meng To. Includes a custom app that lets you change style, stroke width, and size of the assets.

Color Name

Ever wondered what’s the best name for that specific shade of the color? This plugin lets you select any node with a solid fill and see the closest color’s name.

Community Spotlight: Design Starter Kits

Three Figma community resources to get you started on your next web, iOS, or Android design project. Hope Community Spotlight will become regular series!

Issue #22
Sep 6, 2020
#Community

How to handoff your designs to Engineering

Femke shows her engineering handoff process at Uber Eats. Among other things, she adds a Handoff page to her files, breaks it down into work streams, uses templates to show flow statuses, and adds notes to document changes and implementation details.

Collaborate from Anywhere

“In the latest episode of Greymatter, Figma CEO and co-founder Dylan Field sat down with Greylock general partner Sarah Guo to discuss how the company has evolved to meet a surge in demand, and how he is approaching leadership during this time of great upheaval.”

Issue #21
Aug 23, 2020
#Dylan Field

How work is changing at Figma

Dylan Field wrote about moving Figma towards a hybrid model, where both in-person office hubs and remote work is possible. I found this part from their internal survey especially interesting: “…almost half of employees currently based in San Francisco said they would consider moving to another city within commute distance if we offered multiple WFH days per week. Nearly two thirds of employees said they would consider moving to a non-hub location before the end of 2022 if all roles had the option to be remote.”

macOS Big Sur UI Kit

Another fantastic resource by Joey Banks, who also recently built iOS & iPadOS 14 UI Kit.

How to add “native” Find functionality to Figma

Joel Califa suggests assigning a system shortcut to the Find & Replace plugin.

Figma tip:

1. Install the Find & Replace plugin: https://t.co/pRNsFbm8ag

2. Go to your mac's System Preferences > Keyboard > Shortcuts and make ⌘F trigger it.

3. You now have "native" Find functionality on @figmadesign 🔍✨ pic.twitter.com/R3aJz6AFaz
— Joel Califa (@notdetails) August 15, 2020

Return to Instance after editing the Main Component

Meng To points to a useful feature that can be easy to miss.

I didn't know this @figmadesign trick for the longest time. You can return to instance after edit AND after selecting back the component. pic.twitter.com/BVYLVs7pyt
— Meng To (@MengTo) August 12, 2020

Anyone else using spacers in Figma’s Auto Layout?

Can’t wait to see what they’ve got!

We’ve got something brewing that I think you’ll like ;–)
— Rasmus Andersson (@rsms) August 20, 2020

Explore the Figma Community

Figma Community went out of beta, and over the last two weeks was rolled out to all users.

Issue #21
Aug 23, 2020
#Community

Manage Your UX Writing With Ditto Words

Femke shows Ditto Words, a new tool for UX writing.

First Day of Class With Figma Design

Miguel Cardona gave a virtual talk demonstrating the ways to develop and foster community through collaborative prompts and activities in a classroom with Figma.

58. [Workshop] First Day of Class with Figma

Cmd/Ctrl + right-click the object to show child/parent objects

Rogie shares a good tip on navigating nested layers.

Tired of clicking into nested layers in @figmadesign & don't know how many layers deep you have to go to get to the thing?

Cmd/Ctrl + Right Click the object and out whips this friendly little menu that shows child/parent objects. Ditch that layer panel like a boss.#figmatips pic.twitter.com/fU0T26leL7
— ˗ˏˋrogieˎˊ (@rogie) July 27, 2020

Option/Alt + L to collapse all groups and frames in the Layers panel

Gleb Sabirzyanov on how not to lose your head while navigating layers.

Figma shortcut of the day: Alt/Option + L will collapse all groups & frames in the layers panel! ✨

When there are so many objects that you start losing your head while navigating the layers — Alt + L (win) or Option + L (mac) is your savior! @figmadesign #FigmaTip pic.twitter.com/8KGeka1E9r
— Gleb Sabirzyanov (@gleb_sexy) July 29, 2020

Build It in Figma: Create a Design System — Components

“Part ²⁄₅. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”

In the File: What’s Next After Product-Market Fit?

“You have a product that is loved, and your customers are bombarding you with feature requests. How should you prioritize? Drawing from his experiences at Uber, YouTube, and Figma, Yuhki shares some helpful ideas for how you might approach this phase.”

#Community