#Features

Figma Low Code – A New Way to Tackle Design Hand-Offs

“Figma-Low-Code is an open-source project that enables the direct inclusion of Figma designs in Vue applications. By ensuring that the Figma design stays the single source of truth, this approach reduces the need for design hand-offs and front-end code significantly.”

Lo-fi Wireframe Kit for Figma

A robust library of over a hundred wireframing components to faster explore more ideas.

Overflow

A service for creating interactive user flow diagrams and design presentations from Figma, Sketch, or Adobe XD mockups.

GIF

A plugin by Rogie to play GIF animations in the editor (!), make memes, and export animated GIFs straight from Figma.

In the File: Building a Design System Around Collaboration, Not Components

It’s all too easy to focus your design system on the perfect component, missing out on the aspect that’ll ensure your success – collaboration. Join Zalando’s Louise From and Julia Belling to understand how they created, educated, and scaled their internal design system.
In the File: Building a design system around

New Instance Swap Menu and Inspect Tab

Two features announced on the Config Europe are already live! New Instance Swap menu and updated Inspect tab help both designers and developers navigate large, complex libraries in Figma.

On pitching and presenting

“Since presenting is a large part of both client-facing work and startup-building, Abigail spent the first three years of college refining her presentation skills in front of a variety of audiences: toy designers, vehicle inventors, entertainment executives, and more. Below, she shares her tips for developing and delivering a presentation that lands.”

TinyImage Compressor

I rarely write about plugin updates, but this one is exciting — TinyImage Compressor added support for AVIF image format. If you haven’t heard about it before, check out the blog post ​“AVIF has landed” from a developer advocate for Google Chrome.

A vector stroke marker pack for Figma

Cool-looking collection of vector strokes.

Keyboard Stickers with Figma Shortcuts

Great help if you’ve been trying to memorize the shortcuts.

An easier way to manage tabular data

A smart combination of using components and Auto Layout.

Getting Started with Figma Webhooks

This is a great addition to the previous article. ​“Webhooks offer a first-class way to react to changes in Figma. In this article, we’ll build a small service in Node to listen for these events.”

How to Automate Design Tokens in a Design System

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.

Updated Fonts

“All Google Fonts, Inter, Noto, Font Awesome 5 Free, and Font Awesome 5 Brands have been updated.”

Figma now uses up to 2,000% less memory

Huge performance improvement.

Design like you code with Auto Layout

“Elements can fill their containers in both directions; you can set independent padding values; and items can be set to space between.” (Coming in November.)

Drag and drop Interactive Components into prototypes

“Add interactions between component variations in your design system and reuse them in your prototypes with no extra work.” (Launching in January 2021.)

Excited about creating variants?

Luis shows how converting the whole GitHub Primer buttons library to variants took less than a minute.

Bridging code and design components with Variants

“Combine variations of the same component for different interactive states, colors, and sizes to mirror your front-end code and simplify your asset library.” (Coming in November.)

Embracing the tension between code and design

Announcements from the above keynote, presented as a blog post. ​“We believe in embracing concepts from engineering and design, adopting the rigor and reusability of code while preserving the rapid iteration and uninhibited exploration that makes visual design so powerful. […] When code and design components mirror each other, teams can move much more efficiently. Today, we announced Variants, Interactive Components, and improvements to Auto Layout that will allow teams to do just that.”

Features

Topics

Products

Design Tools

Figmalion

Issues:
244
Links:
4,238