I’ve seen Penpot 2.0 being brought up in some Dev Mode conversations, and while their support for CSS Grid Layouts is something I’d love to see in Figma, I do not think one-off copy-pasting HTML/CSS snippets is the way to go. It’s a “no man’s land” between no-code solutions and framework-specific codegen plugins that could be customized for the organization’s needs and connected directly to the components in code. (Thanks Christine Vallaure for sharing the video!)
Loved Tom Lowry’s thoughts on designer-developer collaboration in this thread. I think most teams agree that the traditional process of throwing designs over the wall to engineers is broken and we need better tools, but I’m also cautiously skeptical of designers working directly with the source within the design tools. While this is already possible for marketing websites (hello, Webflow and Framer!), products and design systems bring a whole new level of complexity and challenges. This iteration of the Dev Mode seems like a first step in the right direction to me, but the road ahead is lengthy but bright.
Totally agree that the traditional handover “throw stuff over the wall” to eng is broken—it's not a good way to work. I think the future is both disciplines investing in understanding one another’s craft—and knowing each discipline has different concerns and ways of working.
— Tom Lowry (@negativespaceca) January 25, 2024
An interesting take from Jacob, a co-founder of Pierre — one of the dev tools I’m most curious about. “Figma is where I go to approximate a finished product. World-class Product teams collaborate here on rough sketches with components built to track their perfectly engineered counterparts. […] Instead would love to see Figma start building their creative suite. Specifically, imagine a Figma engineering tool? Built from the ground up? With the same Figma principles? And built to be interoperable with their design tool…”
Imo the source of truth for the visuals of your app isn’t design files anymore. It isn’t in figma. It’s code. Specifically design systems.
— Jacob (@fat) January 25, 2024
The best product teams in the world aren’t sweating pixel perfect mocks or handoffs. They’re staffing up and wrangling design systems. https://t.co/3CWxVpaXrh
After being introduced at Config 2023 last June, Dev Mode will move out of free beta on Wednesday, January 31. Last week, Figma showed improvements and features they’ve been wrapping up before the release. Annotations are a big one — “designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.” Teams that did this manually will save a ton of time and effort. (As the top comment on Reddit suggests, flow arrows are a missing piece for annotations and something I’d love to see brought from FigJam.)
The compare changes modal was redesigned to show diffs both visually and in code. This is one of my favorite features, and I wish it wasn’t limited to the Dev Mode. I duplicate frames to riff on ideas all the time, and the compare view is an incredible tool for reconciling the differences between the two versions.
Enterprise customers can set plugins to run by default in Dev Mode for all files in their organization — “for example, you may want to check that you’re using a design system correctly, show links to design systems documentation, include information about internal APIs to use, or confirm whether a design uses components that already exist in your codebase.” Finally, the Figma for VS Code extension was redesigned to run plugins and improve the navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with a focused view.
It all started with Rahul Chakraborty’s question about a particular illustration technique used by Sketch in their blog. Two days later, Isaac Miller built the Extrusion Effect web app to generate cool extruded illustrations, and Anvesh Dunna turned this technique into a Figma plugin — hopefully, it will be available in the Community later this week. That’s why I love the design community!
Turned this into a plugin with a bunch of props. I love doing procedural stuff, so gave this a try. Learned a lot about vector networks. #figma #figmaplugin https://t.co/Z7ffG23eu9 pic.twitter.com/aAhCxL8oM5
— Anvesh Dunna (@anveshdunna) January 19, 2024
A new plugin from Designer Advocate Hiroki Tani for generating color variables from the palette on canvas. It creates a collection from the section name, modes from nested frames, and variables from rectangles.
Common keyboard shortcuts for developers to perform actions like zooming, dragging the canvas around, copying the link to a specific screen, selecting the parent of your selection, exporting selection, and toggling a layout grid.
Chad shows how to use variables to change your variants on nested component instances when setting a mode.
Did you know that you can use variables to change your variants on nested component instances when setting a mode in @figma? Here's a quick tip showing it in action!
— chad (@dotdude) January 18, 2024
Are you already using variables with nested instances in your design files? I'd love to see what you're making! pic.twitter.com/z2YXNccqPt
A few less-known and undervalued tips from Mal on working with comments in Figma. Personally, I had no idea that comments can be added to a selection or can contain images! I’d also suggest enabling the “Only current page” filter to keep a list focused.
got 2 mins? ok cool cuz I have a few tips for working with comments in @figma. Stick around to the end to see how you can add media to your threads now 😎 pic.twitter.com/2BZwX6FScR
— Mal (@mdeandesign) January 17, 2024
Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit “background”, “border”, and “text” color variables. “What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)
I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.
You can now select incompatible modes on layers, to make it easier to diagnose layers that aren’t able to use the mode (via Jacob Miller).
The Designer Advocate team recently hosted another Office Hours AMA focused on the use of variables in Figma. Watch Lauren Andres, Luis Ouriach, Chad Bergman, and Shana Hu discuss nested instance variant binding, applying boolean variables, and a few related questions.
A cool technique of using randomizer plugins like Random Swap Variants and Variants Randomizer to generate a set of unique illustrations from predefined components.
Some #figma tip
— Max (@Aximoris) January 11, 2024
I was tasked by my manager to create around 6 covers for our blog page.
So I prepared a few components with different variants (background color, texture, shape, doodle), and then - using a randomizer plugin I quickly generated more than 6 covers per second 😎 pic.twitter.com/sWrMNwOU2E
Figma is changing how they refer to paid seats across all of the products (Figma Design, Dev Mode, and FigJam). The paid seats are used to be “Editor” seats, and now they are “Full” seats.
Using variables to create a night and day version of the same illustration. Love this approach!
Had some time to make an isometric Japanese 🫖 tea house in @figma for fun.
— Dallas Barnes ☀️ (@DallasBarnes) January 3, 2024
This was realllly just an excuse to use variable collections/variables in FIgma in order to create a 🌙 and ☀️ version of it. pic.twitter.com/aDL3IzHcZh
Miggi goes over all of the basics when getting started with variables and modes for your design layouts. “Explore what it takes to use variables to create a dark and light mode experience, change the density of your spacing, vary the languages your design UI can accommodate, and so much more.”
Miggi celebrates his 3rd anniversary at Figma (congratulations!) by demonstrating how to make a color wheel. (A coincidence, but just earlier this week I was making the same color wheel with a very similar technique!)
Celebrating my three year anniversary by showing you all how to make a color wheel in @figma and giving a bonus hex value explainer along the way! 🎨 https://t.co/1pxyr9W3hX pic.twitter.com/uF07YDtPCo
— Miggi ✌🏽 (@miggi) January 5, 2024
Ridd recommends including little nav menus in high-fidelity prototypes so that viewers can easily inspect the different states of a page. Great advice and something I’m going to introduce to my prototypes!
Prototyping pro-tip:
— Ridd 🤿 (@ridd_design) January 2, 2024
When I'm sharing a high-fi prototype for feedback it helps to include little nav menus so that viewers can easily inspect the different states of a page 👀 pic.twitter.com/QlYI08bgrV
A cool tutorial on creating an animated card background using Rogie’s popular Noise & Texture plugin — fast-forward to the end to see the final result.
See our new tutorial to learn how to use @rogie's Noise & Texture Figma plugin to create a beautiful bento card.
— Alex Barashkov (@alex_barashkov) November 23, 2023
Send me DM or reply in a comment to get a Figma link. pic.twitter.com/EcpLMt30oT
That’s a pretty useful desk mat! It’s still worth investing in learning shortcuts while we’re waiting for the Figma Creator Micro keyboard. Made by Ratsuns.