Designing Linear. How OkLCH works. Syncing variables to tokens.
Sponsor
Meet the new Webflow
The refreshed brand speaks to the heart of what Webflow has always stood for: giving everyone the superpowers to build professional, visually stunning websites — all without having to write code to achieve developer-grade results.
App Updates
Visual customization for workspaces
Admins in Enterprise organizations can now make workspaces feel distinct with customized icons, header colors, and descriptions.
What’s New
Primer on how Linear is designed
Karri Saarinen shares how their team is building one of the best-designed products out there: “The main point is that the design is only a reference, never any kind of deliverable itself, so the way it’s constructed doesn’t really matter.“ Don’t miss a follow-up on this approach and tech debt, as well as an older thread on their simple design system. Last but not least, his recent interview with Lenny Rachitsky on how Linear builds product was just fantastic (a good chunk is behind a paywall, but a podcast version is free.)
How OkLCH works
Great thread explaining the “weirdness” of OkLCH by one of the authors of the new Harmony color palette. Here is something I never thought about: “In electronic displays, yellow, cyan, and magenta are products of shining two lamps – subpixels. The more light is emitted, the brighter we perceive the color. It means the max lightness of the yellow is much higher than the blue’s.”
Using Figma
Leveling up your UI kit with variables
Ridd points out two common problems with UI kits (manual updates of shared attributes and maintaining multiple breakpoint variants) and shares a variable system to make your life way easier.
Making a spooky ghost icon
Step 1: Learn from Miggi how to create a ghost icon just in time for Spooky Season.
Cute animated ghost
Step 2: Learn from Vijay Verma how to create a cute animation using variables and conditions.
Glowing loading animation
A quick how-to video from Zander on creating a glowing animation inspired by the Disney logo. (And one more with a hover scale effect.)
Synchronizing Figma variables with Design Tokens
Nate Baldwin works on design systems at Intuit and writes about his experience of using Figma’s REST API to tie design tokens directly to design resources and integrate Figma as part of a CI/CD pipeline for their multi-product setup. The article is quite technical, but he explains every step of the process.
Getting started with Figma: UI Design course for beginners
Christine Vallaure just published a free 1‑hour course on YouTube. Topics include Figma’s file structure, creating files and frames, shapes, text, components, and general design setup. A fantastic resource for beginners, and it even comes with an exercise file.
Plugins
Nearest Color Finder
Great idea, but I wish this plugin would suggest the nearest color for a fill of the selected object and not just for the hex value. With some polish, this could be an essential linting step before handing mockups off to a developer.
Cool Thing
Incomplete List of Mistakes in the Design of CSS
A fascinating look into thinking behind API design from CSS Working Group, and a reminder that some things we accepted and got used to do not in fact make much sense.