A picture looking up towards The Shard. It is dark and cloudy, with the light emitting from the top of the building creating a smoke effect in the sky

Variables set up for you to start playing with them in your design system.  I have created an example type ramp, and made variables for: Font familyFont sizeLine heightFont weight Let me know what you think!

Typography variables starter kit | Figma

https://www.figma.com/community/file/1362098125068472724/typography-variables-starter-kit

https://www.figma.com/community/file/1380235722331273046

Photograph of individual Good Time shampoo and conditioner boxes

https://www.figma.com/community/file/1414738876845632189/shadcn-figma-kit

💡 Loose thoughts: No variable is an island

https://read.cv/disco_lu/variable-islands

The Figma logo redrawn to look similar to the new Twitter icon

Zoom is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems. Zoom Rooms is the original software-based conference room solution used around the world in board, conference, huddle, and training rooms, as well as executive offices and classrooms. Founded in 2011, Zoom helps businesses and organizations bring their teams together in a frictionless environment to get more done. Zoom is a publicly traded company headquartered in San Jose, CA.

Video Conferencing, Web Conferencing, Webinars, Screen Sharing

https://figma.zoom.us/webinar/register/7216880736255/WN_rCgAfvNZTrerldI4-_EJdg

A rough guide, offering an approach to naming components within your Figma component libraries.

There is advice on naming:

Component namesComponent typesComponents instancesChild layersVariant propertiesVariant valuesDisabled statesResting statesSystem elementsIcons

Guide: Component naming manifesto | Figma Community

https://www.figma.com/community/file/1345404188541317938/guide-component-naming-manifesto

A photography of a collection of iced coffee cans

Thank you for participating in our survey! We greatly appreciate your time and input.We’re considering making changes to the Library Modal UI and would like your feedback about what’s working and what could be improved. If you can, please focus your feedback/requests on changes to the library modal UI rather than new functionality.

Figma:Library Modal File Experience Survey

https://open.spotify.com/episode/1eJ3ioZyFhxhAa12fsyt1N?si=730b40abdb39477a

https://podcasts.apple.com/ca/podcast/9-what-even-is-design/id1660585663?i=1000638285070

https://read.cv/disco_lu/consolidating-variable-states

Picture of an events stage with a screen reading “design systems London”

Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls.

Building Components For Consumption, Not Complexity (Part 1) — Smashing Magazine

https://www.smashingmagazine.com/2023/12/building-components-consumption-not-complexity-part1/

A picture of 4 stickers from the company TLDraw

A mock web design for "simple domains" in bright blue design.

Glass box office with Figma style mural on the wall

Photograph of a “colourful sticky notes” card, with 6 thin sticky note strips on it. They are all purple but range from light to darker purple in colour

Figma Community file - A collection of variables for background, text, border, icon, and text!  The values are (mostly) empty right now, so go ahead and fill them with your team's existing values.  This is all based on this Twitter thread: https://twitter.com/disco_lu/status/1674774009274302467?s=20  --  Updated 1 Augu...

Variable starter kit | Figma Community

https://www.figma.com/community/file/1256624568359563073/Variable-starter-kit

Figma Community file - A primer on how to structure your variable collections for:
Single brandMulti brand with shared primitivesMulti brand with different primitives
There's also an introductory primer to variables, explaining the different types and how they are structured within Figma.


Guide: Variable mapping and design system structure | Figma Community

https://www.figma.com/community/file/1262724388830684966/Guide:-Variable-mapping-and-design-system-structure�️

Variables for typography are live!

I've published a "starter kit" to the community, with examples 🙌

There are variables for:
1) Font family
2) Font weight
3) Line height
4) Font size

https://www.figma.com/community/file/1362098125068472724/typography-variables-starter-kit

Really proud to share Simple Design System, which I’ve been working with @jak_e on for the past couple of months

It’s a base kit available in Figma by default, and backed with a React codebase that’s fully Code Connected

https://www.figma.com/community/file/1380235722331273046

I don’t think we have enough font styles on this bread 😃

Really digging the brand design on these solid shampoo and conditioner bars 🍫

I made a shadcn Figma kit! 🕺

Included:
• Tailwind colors
• Semantic colors in light/dark
• Type variables & styles
• Effects
• shadcn components
• Example pages
• Space variables

https://www.figma.com/community/file/1414738876845632189/shadcn-figma-kit

No variable is an island, and that's why I think we've gotten semantic naming conventions all wrong*

https://read.cv/disco_lu/variable-islands

Variables livestream
Today
See you there 🎟️

https://figma.zoom.us/webinar/register/7216880736255/WN_rCgAfvNZTrerldI4-_EJdg

New guide alert 🚨

"Component naming manifesto"

It's a rough set of recommendations (opinions!) on how to approach component, prop, and value naming within Figma component libraries

https://www.figma.com/community/file/1345404188541317938/guide-component-naming-manifesto

Can’t get enough of mixed font weights and styles like this

I don’t remember the last time I opened a Medium link from their newsletter

Hello friends. I return with another survey! Our team at Figma wants to learn about your experience with libraries in the editor. Short survey, should be 1 min or less and really helps us out. Thank you!! 🫰 https://forms.gle/XZLYmhgyxDyR7hmK6

@auareyou & I have some more Design & Whine 🎤

"what even is design" is about design's existential crisis

🎧 https://open.spotify.com/episode/1eJ3ioZyFhxhAa12fsyt1N?si=730b40abdb39477a
🎧 https://podcasts.apple.com/ca/podcast/9-what-even-is-design/id1660585663?i=1000638285070

Read.cv is slowly becoming my dream state of the Figma community – the new "writing" section is what I've wanted for aaaaaages

I converted a recent Twitter thread into a post to test it out: https://read.cv/disco_lu/consolidating-variable-states

This might be my new Medium 🧐

The start of a new guide on how to manage styles 🖼️

Published a new article! It's about components, and took a year to write 😅

"Building Components For Consumption, Not Complexity" is kind of my thesis on ❖

Let me know what you think!
https://www.smashingmagazine.com/2023/12/building-components-consumption-not-complexity-part1/

Got some new shiny stickers ✍️

Happy to share if anyone would like one!

Figma variables has 6 fresh new updates 🚢

1) Individual corner radii
2) Effects, now driven by variables
3) Layer opacity, variable-ised (technical term)
4) Layout grids, driven by variables
5) Strokes can now use variables for width & colour
6) Nested instance swapping is live

Little throwback to some custom emojis I designed back in 2018 ✍️

Having play and making some skeuo-squidgy design

Figma has a new London office! If you'd like to chat about design systems, we're by Liverpool Street 🙌🏻

How cute are these gradient sticky notes though 🌈

Published a new file!

"Variables starter kit" includes:
• Primitive colours
• Semantic background, text, icon, border examples
• Variables sticker sheets
• Example usage

Let me know what you think!
https://www.figma.com/community/file/1256624568359563073/Variable-starter-kit

Published a new Figma guide!

It's called "Variable mapping and design system structure” and has tips on variables and collection organisation 🗂️

https://www.figma.com/community/file/1262724388830684966/Guide:-Variable-mapping-and-design-system-structure�️

Posts