Community | Figmalion

Updates to quick create for faster diagramming in FigJam

Hover over the quick create icon on a shape or sticky to see a preview of what will be created, or drag it to add connectors between shapes. See a quick demo by Ana Boyer.

Issue #44
Jul 18, 2021
#FigJam
#Ana Boyer

Blend

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

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.

Toro y Moi Illustration

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

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

Loki by Vijay Verma

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

Figma Community “magazine” concept

Ridd shares an idea of what a collaborative magazine made by a Figma community can look like.

Figma files are the single most exciting way to create and distribute content

So what if @figmadesign launched a "magazine" for the community delivered as a design file?

It would be interactive + educational + community-driven

Here's what I think it could look like 👇
— Ridd 🏛 (@Ridderingand) July 14, 2021

Issue #44
Jul 18, 2021
#Ridd

Cropping images

Luis shows a few ways to crop images.

Happy Monday folks, here are a few ways to crop images easier in @figmadesign:

• Double click whilst holding Option (Mac) / Alt (Windows)
• Hold CMD (Mac) / Control (Windows) and drag the handles
• Use shapes and boolean operations

Happy croppin' ✂️ pic.twitter.com/Pex2IcerVF
— luis. (@disco_lu) July 12, 2021

Joey Banks recommends Figma shortcuts

A few of his favorites to move a bit more quickly while working.

A few @figmadesign keyboard shortcuts ⌨️✨ that help me move a bit more quickly while working:

⇧A: Add Auto Layout (⌥⇧A to remove)
⌥L: Collapse layers
⇧⏎: Select parent (⏎ to select children)
⌥W/A/S/D: Align top/left/bottom/right
⌘K: Create link from text
— Joey Banks (@joeyabanks) July 12, 2021

Reminder: never use variants for different icons

Gleb is right – icons as variants can’t be previewed or searched. In fact, Figma doesn’t recommend using variants to group different icons either. If you have different sizes or versions of the same icon, then you could combine these as variants instead.

PSA reminder: never use variants for different icons in @figmadesign!

Use regular separate components to:
- Preview icons when swapping instances
- Search via name and icon description (bonus tip: add synonyms for easier search)#FigmaTip pic.twitter.com/4oGqs2GxIb
— Gleb Sabirzyanov (@gleb_sexy) July 7, 2021

Make a pattern in Figma

Gleb Sabirzyanov shows an easy way to create tiled patterns in Figma.

Randy Savage covers Procreate and Image Tracer plugins

A special guest in a new video by Figma:55.

Figma in 55 Seconds: Procreate Import and Image

Issue #44
Jul 18, 2021
#Plugins
#Figma55

Edit names on canvas

Now you can edit flow and frame names directly from the canvas. Just double-click the name and start typing.

Today at @figmadesign we shipped a fix for one of my longest standing pet peeves about the product — now you can edit frame names directly on the canvas! Just double click and start typing.

Thank you to Linda Zhang for making this happen! pic.twitter.com/iUqTmvl5dw
— Dylan Field (@zoink) July 13, 2021

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

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

#Community