Danny Sapio shares some great Auto Layout tips and shortcuts that can speed up your work.
The lack of precision in the gradient tool is an old annoyance, but as this tweet grew in popularity I’ve been quietly hoping that maybe the fix would make it to the Little Big Updates. Regardless, the replies provide a ton of smart workaround — distributing stops through double-clicking, nudging stops, using the Precise Gradients plugin, and even looking in the Inspect tab!
Hey @figma, can you show me the position values on here please? I don’t like having to eyeball 15%… pic.twitter.com/cWVLzqNAda
— Arix (@Arix_Ki) March 21, 2023
FTE is an open-source tool for creating an automatic communication channel between design decisions (represented as design tokens) and code. The main objective of the tool is to simplify the standardization and update of these decisions throughout all the digital products sharing a Design System. Its creator Daniel Casado shows how to install, configure, and use the FTE to transform design tokens (either as Figma styles or from Token Studio) into CSS styles.
On Tuesday, March 28th, 2023 at 9:00 AM PT, Figma will livestream the launch of 30+ little updates “that will be BIG improvements to your workflow”. The video teaser mentions the preview of blend modes and on-hover previews 👀 Sign up for a free webinar by their team of designer advocates and product managers.
A new plugin from Angelo Libero, creator of Supa Palette: “The ultimate tool for creating stunning snapshots instantly within Figma. Simply select one or more layers, and watch as the plugin quickly generates a high-quality snapshot.”
Luis keeps digging into different ways of structuring Figma libraries and styles. In this thread, he thinks through naming conventions on styles and explores the pros and cons of more abstract and specific naming conventions.
Here's another thread about managing Figma styles 🗂
— luis. (@disco_lu) March 16, 2023
It's pretty hard to know how far to push naming conventions on styles, and you can end up in some heavily nested folder structures if you're not careful
So let's take one component and work it out! pic.twitter.com/cO30LFzAd8
Dan Hollick with a fascinating thread on an optimal x‑height size and a visual arc.
Why are some typefaces harder to read than others at the same font-size?
— Dan Hollick 🇿🇦 (@DanHollick) March 16, 2023
Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓ pic.twitter.com/QElNG1aq7q
“You can now seamlessly copy-and-paste between your iPad and desktop. Just open a FigJam file on your iPad, and another FigJam or Figma file on your desktop at the same time. Copy something on iPad and an in-app notification on desktop will ask you if you want to paste the selection from the other device. You can copy-and-paste from desktop to iPad, too.”
Such a fun thread by designer Jakub Świadek on how the FigJam team redesigned the sticky note curl. See also another thread by Noah Finer on how it was implemented with CSS and SVG animations.
We're on a roll over here at @figma... we’re launching a redesigned sticky note curl today. Here’s why we’re excited about this tiny little design detail. pic.twitter.com/duFnHshOGc
— Jakub Świadek (@jakub_swiadek) March 16, 2023
“Now you can create tables in FigJam right from the bottom tool bar. Organize information and ideas in custom-sized tables to build project plans, decision matrices, pro/con lists, and more.” Check out a quick demo video and read the blog post on how the product team arrived at the approach, tackled multiplayer bugs, and finessed design details.
The level of customization to virtual spaces that this kit provides is mind-blowing. Make sure to watch the video on the homepage! “LabKit offers a new collaborative way to create digital experiences using Figma and FigJam. Our highly detailed vector components come with loads of easy-to-use variants for customization. Everything you find is designed with joyful multiplayer interactions in mind.”
Figma always supported #RGB
and #RRGGBB
CSS syntaxes in color fills, but now you can also use rgb()
, rgba()
, hsl()
, and hsla()
. Pretty neat!
Paid resources are finally available on Community! The days of dealing with license keys, paying through 3rd-party websites, and importing downloaded files are over. As a customer, you can try most resources before buying, and if something went wrong easily apply for a refund.
While this release makes the whole experience much smoother for end users, it’s a huge change for Community creators — “there’s no dealing with payment integrations, license keys, emailing files, or even managing refunds — just set your price, publish, and start earning”. A few years ago, I was delighted to learn that some creators earn a living from selling Figma plugins and resources. This will become much more common now because of additional exposure and a lower barrier to entry. There has never been a better time to start contributing to the design community.
A demo of a really smart FigJam widget that lets you collect data onto the canvas, fine-tune a model, and keep that tuned model directly on the canvas to generate new images: “With a few simple API endpoints (/train, /status, /imagine), I made a multiplayer-enabled (!) canvas that had live-trained ML models living in it. Many people can come together and try out the model, you can alt-drag trained models to try out explorations without losing your history, you can mark it up with pencil drawings and stickies and do anything else you’ve gotten used to in FigJam and Figma.”
If that game wasn’t enough, check out these spatial 3D animations made using SkewDat plugin. There is a tutorial as well.
Honestly, at this point, I gave up on trying to understand how Double Glitch creates their prototypes. All possible Tic Tac Toe moves were manually tied together in this prototype, which is an incredible amount of work. Make sure to get a copy of the file and look under the hood!
“Hear from Sprig’s Product & Designs teams to learn actionable steps to incorporate user feedback as a core part of your design process in Figma.”
Luis shares a few tips on structuring library files. He recommends optimizing variants for searching and usage rather than maintenance, and suggests this file structure: Page → Section → Variant. Also, check out his other thread on naming and splitting your library files.
We spend a lot of time talking about component structure, but the library files themselves are often ignored
— luis. (@disco_lu) February 27, 2023
So what goes into structuring a good Figma component library?
Here are a few tips, hopefully a good starting point 📈 pic.twitter.com/2zL7xk9eSx
This is my favorite kind of blog post! Software Engineer Dorothy Chen went down the rabbit hole of international keyboards and emerged from the other side in November when Figma shipped keyboard shortcuts support for a set of non-US QWERTY keyboards. Lots of fascinating details, and the story about the new uppercase eszett character is wild!
On the Enterprise plan, organization admins and workspace admins can now enable libraries for all files in a given workspace. On the Organizations plan, organization admins will see an updated layout for the libraries tab in the admin settings.