Frames. P3 colors in Tailwind. From shadcn/ui Figma kit to code.
Release Notes
Improvements to frame presets
Miggi shows three updates to frame presets in UI3: the first frame dropped onto a blank canvas will land at 0x0y coordinates; when clicking on the canvas to add a new frame, Figma will default to the size of the last-used frame; when using the frame tool, quick-add indicators will appear beside and between frames so you can quickly insert additional frames.
What’s New
A journey of craft built on trust, confidence, and focus
Yann-Edern Gillet reflects on his first year designing at Linear: “Experiencing imposter syndrome has taught me to accept feedback—both positive and constructive—with openness and to lean on my teammates for perspective and support. It’s uncomfortable, but it’s also a reminder that the work you’re doing matters. Over time, I’ve learned to reframe it as a driver for growth, reflection, and improvement, and that’s been one of the most rewarding parts of this journey.”
How I used AI to design brand-aligned illustrations
Moty Weiss shares his experience capturing and preserving brand consistency with AI illustrations. The idea of analyzing existing brand illustrations with ChatGPT to create a foundational prompt for Midjourney really stood out to me. The resulting illustrations adhere to the brand style and have a unique voice, looking very different from the AI-generated images flooding the internet. While they still need some work, the new tools are truly empowering: “While Midjourney’s results may still require final touches — such as vector conversion, line refinement, detail enhancement, and final polish from a professional illustrator — it represents a significant step toward independence for designers who struggle with illustration.”
The rise of the generalist
Carly Ayres on the value of combining skills: “A design engineer can not only take an idea to a working prototype with little lost in translation, but can spot opportunities and constraints that might otherwise be missed. The emergence of roles like “design engineer” illustrates how intentional (or unintentional) skill-building can create rare resumes for roles that might not exist yet. Few design engineers likely trod that path because they saw a lucrative career opportunity on the horizon—rather, chasing curiosity and a desire to see their ideas to fruition, they gradually skilled up in the areas missing from their stack. Those gaps in their abilities mirrored the needs in the industry at large.”
P3 colors in Tailwind
Tailwind CSS v4 beta includes a modernized P3 color palette. In this thread, Gleb Stroganov explores and compares the new OKLCH palette to the old one in v3. Tailwind’s adoption of P3 colors might be the tipping point in popularizing wide gamut colors on the web.
Using Figma
DPI is often misunderstood
Jacob Miller from Figma ran a poll and discovered that 1⁄3 of designers misunderstand DPI. In this post, he explains the relationship between pixel count, DPI, and physical size.
Text in dark UIs
Yep! Type foundry explains why text in a dark UI often looks better when it’s slightly lightened. That’s one of the reasons why choosing variable fonts for new projects became one of my non-negotiables.
Physical products
Steve Lauda makes realistic illustrations entirely in Figma.
Bridging the Gap: Designing with Annotations
Mal and Akbar discuss ways to bridge the gap between designers and developers.
Using FigJam
Lock background in FigJam
Prevent accidental removal of FigJam sections by locking the background of a section.
FigJam Stories: Building Your Dream Bike
I loved this example of going deep on a topic using FigJam. Tom Lowry, Figma’s Advocacy Director, shows how he approached researching and building a custom mountain bike by mapping out and thinking through every aspect of the build in FigJam.
Resources
Figma iPhone 16 Mockup
Free vector mockups of all models and colors of iPhone 16.
shadcn Figma kit
Luis Ouriach released a free shadcn/ui Figma kit, including Tailwind colors, semantic light/dark colors, typographic variables and styles, effects, components, example pages, and space utility variables. If you’re curious how it was made, Luis documented every step of the process, starting back in September of last year.
Plugins
Figma to shadcn/ui
Speaking of shadcn/ui, Matt Wierzbicki published a new plugin using Claude 3.5 Sonnet (requires an API key) to convert Figma designs into production-ready shadcn/ui and Tailwind CSS code. It’s tailored to work best with his commercial shadcn/ui kit for Figma, but I’d expect it to work with Luis’ kit as well.
Pinwheel Plugin
“The Pinwheel Plugin exports variables as Design Tokens JSON, and can use mode names to create groups for light mode, dark mode, and high contrast variants. It also has support for sRGB and Display P3, allowing colors to maintain correct appearance when being moved from Figma to Pinwheel.” Pinwheel is a new Mac app for color conversions and design systems from Bjango, the company behind the popular app iStat Menus.
Backstage
The Skew Programming Language
Did you know that Figma’s cofounder Evan Wallace created a custom programming language Skew for their mobile rendering architecture? This story slipped my attention, but Andrew Chan wrote a fascinating look at some of its interesting features.
The Future of Design Collaboration with Andrew Hogan of Figma
Erin and Carol from the Awkward Silences podcast are joined by Andrew Hogan, Figma’s Head of Insights, to explore the nature of collaboration today and how the structure of that collaboration can impact our ability to effect UX change.