Community | Figmalion

Design potion

This one is from a few weeks ago, but another fantastic artwork by Vijay Verma.

Figma is not just meant for UI design or prototyping. It's a magic wand for the design wizard to design anything you want. Design Potion - purely made in @figmadesign. Available to collect as #NFT from @withFND. pic.twitter.com/aBL6FWzgQP
— vijay verma ᵍᵐ (@realvjy) July 3, 2021

Toro y Moi Illustration

Joey Lamelas with a cool photo-realistic artwork. See the process on Twitter.

Rogie King built a plugin to import .procreate files into Figma, complete with named layers, groups, blend modes, and clipping masks. Make sure to check out a Twitter thread on his challenges during development.

Blend

Blend plugin by Gleb Sabirzyanov allows you to copy any object along the path.

Loki by Vijay Verma

Vijay is a true Figma wizard. Look at his process on Twitter.

Building a menu with nested components

Ridd shows how to build a menu component from multiple nested components.

Building complex nested components is one of my favorite parts of working in @figmadesign

I love seeing how people think about the building blocks!

So this is me peeling back the curtain and showing you exactly how I built this menu component below 👇 pic.twitter.com/2CvgBkPhyj
— Ridd 🏛 (@Ridderingand) June 24, 2021

Right and wrong ways to use Variants

Good thread by Ridd on creating variants from a single base component.

There's a right way and a wrong way to use variants in @figmadesign.

When used correctly, they can be the most powerful part of your entire workflow.

These are the 5 steps I do for every single component I create 👇
— Ridd 🏛 (@Ridderingand) June 20, 2021

Coffee with Charli and Shopify: Scaling Systems

“In this episode, Charli talks with Sara Hill and Dan Ross product design leads at Shopify. They show off the evolution of the Shopify design system, how they’ve managed to scale it, and the challenges they faced along the way.”

UI Checklist by Shift Nudge

Not directly related to Figma, but I’m a big fan of checklists, and this one by MDS is really good: “The top 101 things to consider when designing visually beautiful interfaces. Use this to self-critique any of your designs, whether it’s homework from this course or your own projects.”

Issue #43
Jul 4, 2021
#MDS

Figma’s Series E

Dylan Field’s internal email to the Figma team announcing a new round of investments.

Using Auto Layout to make a table

New short video from Figma:55 on using Auto Layout and Variants to make a table.

Over a year ago I made a 56(?!) second video on how to make a table using auto layout. Since then Figma has released a ton of amazing updates, like variants! Here's a 55 second video on a simple way to make a table with auto layout and variants pic.twitter.com/nZ33gPqSzq
— Figma:55 (@figma55) June 16, 2021

Hiring whole teams and Figma Designer Advocates with Anthony DiSpezio

“How do product teams hire UX Designers? Anthony DiSpezio, Designer Advocate at Figma, explains the most significant factor in cross-functional team hiring and how this may very well be why you are not hired. In the second part of the episode, Anthony describes the role of Designer Advocate at Figma: a mix of hands-on design and advocacy. To be hired for this role, you need to be a Figma expert with a knack for communication!”

Luca

A beautiful illustration of Pixar’s Luca by Vijay Verma.

iOS 15 UI Kit for Figma

The best iOS 15 UI kit by ex-Figmate Joey Banks.

Hide or show the dot grid

Miguel with a nifty tip. (Makes me curious why it’s not in the menu?)

#FigJam Protip: Easily hide or show the dot grid with 'Command + /" and type "Show Dot Grid" to turn the dot grid on and off.

(Command + P on international keyboards)
(Ctrl + / or Ctrl +P) on Windows) @figmadesign pic.twitter.com/INjWcprr2L
— miggi from figgi (@miggi) June 8, 2021

Make duotone-style photo effects

Miggi aka Professor Figma shows how to use stacked fill layers and blend modes to create an easily repeatable, image swappable duotone-like effect for your photo mockups.

Make duotone-style photo effects in @figmadesign with #ProfessorFigma in 59 seconds or less!

While not perfect, you can use stacked fill layers and blend modes to create an easily repeatable, image swappable duotone-like effect for your photo mockups. pic.twitter.com/LDfegzBOev
— miggi from figgi (@miggi) June 10, 2021

Issue #42
Jun 20, 2021
#Miguel Cardona

Create Figma Plugin

Yuan Qing Lim – one of the most prolific creators of Figma plugins – released v1 of his open-source toolkit for developing plugins. It comes with an optimized development workflow, maintainable code structure, utility functions, and even essential Figma UI components.

Excited to ship v1 of Create Figma Plugin, my open-source toolkit for developing @FigmaPlugins!

🤯 Sub-second build times
😌 Separate commands in separate files
🤓 Utility functions
😎 Components that replicate the Figma UIhttps://t.co/m8G9UqS5gs

👇 More info in the thread.
— Yuan Qing Lim (@yuanqinglim) May 19, 2021

Creating an illustration system for comics series

Pablo Stanley shows his use of Figma components and variants for creating an illustration system of characters for a new comics series, The Design Team.

Creating an illustration system for a new comics series using @figmadesign

I’ll make the doodles available as open source and on @blushdesignapp later.

Follow the IG account to read the comics when they’re out https://t.co/9udNJXghdF pic.twitter.com/R4CIUKhRdr
— Pablo Stanley (@pablostanley) May 29, 2021

Interactive Components in Figma

MDS takes a look at interactive components (currently in beta) — what they are, how they work, and the different ways they can be used in prototypes.

Advanced Interactive Components in Figma

In the follow-up to a previous video, MDS builds a prototype with multiple radio button interactive components.

#Community