Tweets

Requesting a plugin approval from admins

Organizations can require approval for using plugins and widgets, and now Akbar shows a new way to request it straight from the plugin’s popup. They’ve also made it easier for admins to review the requests. (If you’re a plugin author, consider specifying networkAccess in the manifest.)

GPT-4V as a product design partner

I’m still waiting for access to GPT‑4 Vision, but examples like this make me so excited about possible use cases! Imagine using LLM for a heuristic evaluation or pairing design and sketching sessions.

How do you update components using variables?

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

Word highlighting with Auto Layout

A smart way to utilize line-wrapping in Auto Layout to achieve word highlighting effect.

Implementing UI with Figma + GPT-4V

Alright, so in the last issue, I wrote that ​“plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.” It didn’t take long for a better example! Ben shows a new feature in Sidekick AI (using GPT‑4) for dropping a link to a frame in a Figma file to improve the code generation and even fix visual bugs. This looks freaking amazing.

iPhone 15 device frames and frame presets

New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.

Copy as PNG

“Copy as PNG” is a lifesaver. I even use it when moving mockups to FigJam for presentation to keep things simple.

Replacing icons

“To replace one icon with another, press and hold Command-Option while dragging a component onto an existing component in your document.”

Creating tab interactions with Variables

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

GPT-4 Vision to convert Figma designs into React

This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

Variables and Styles

Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: ​“Create variables in a private space, feed them into styles, and publish only styles to consumers.”

Documenting color “intentions”

Luis with an interesting approach to documenting use cases or ​“intentions” of specific color levels in a palette. The color scales documentation from Radix recommended in the comments is also a fantastic resource. See also Luis’ Documentation template for colors in the Community.

10 things I learned while adding variables to my Figma design system

Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.

Helpful gradient tips

A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.

Switch between pixels and rem units in Dev Mode

Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!

Swap libraries and variable modes

Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.

Bento plugin

That’s what I love about this community so much. Fons Mans shared an idea for the plugin, Rogie stepped in and offered to build it, and three days later they already had some WIP. Don’t know if I need this plugin yet, but seeing this collaboration makes me so happy.

Community Libraries beta rolling out

I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us ​“one step closer to a shared global design system”. Can’t wait!

Getting Figma files dev ready

This is a short but comprehensive checklist. Worth reviewing before sharing your next file!

Designing a production-ready Figma UI kit

Hamish O’Neill is working on a new Figma UI kit and shares some of the advanced features included in his library. Love seeing a strong focus on accessibility, customizability, and theming!

Features

Topics

Products

Design Tools

Figmalion

Issues:
236
Links:
4,136