luis.
@disco_lu
Followers
59K
Following
1
Media
6K
Statuses
26K
Working @figma. I write a newsletter, host Design & Whine podcast, do things with @8pxmag. Twitter is where I share ideas about ❖. I eat 🌶️ with everything
London
Joined February 2010
As I prepare the next batch of 8px Radio episodes, I've published a readout of my "Building Components For Consumption, Not Complexity" (mega) article. There are two parts, diving into component advice ❖. 🎧 Spotify: 🎧 Apple:
4
1
29
Developer: If you change the designs now, we will have to refactor all of our code. Designer:
122
1K
5K
Anyone else think that the Windows phone design (using Metro Design Language) was a missed opportunity in interface design?. It had a lot of personality 💅
266
192
3K
AS A USER I want to see what I'm playing in 3 places SO THAT the UI is very dense and overwhelming
97
110
3K
Happy to announce that Figma is now available on CD ROM. DM me for a cracked serial number 🔐
40
204
3K
Gmail 🤠. 5 dropdown menus in a row, and they have different:.• Dropdown styles.• Location of content.• Padding rules.• Hover states.• Approach to iconography. Design systems, ey. Gotta love 'em
55
226
2K
Day 1 of you Day 3 of you.building a building a.design system: design system:
18
225
2K
Have you noticed how common this marketing callout component is becoming on websites?. Actually, what would you call it?
132
115
2K
Everyone loves the 4px grid for spacing, but what if we tried something new?. "Designs all look the same nowadays" could be because we all approach spacing the same, so maybe we can shake things up a little with a new way to handle it. The Fibonacci spacing system, maybe? 🧮
56
156
2K
This tool is very cool – it's at the intersection of design exploration & code generation 🧞. You set up your design "rules" and basic component skeletons, then export the code tokens straight away. Only thing missing is a Figma UI kit file generation 💡.
17
175
1K
I just published my best practice guide on how to structure your frames in Figma. To make the design process as smooth as butter, include:. • Consistent naming conventions with numbers and states.• Helper descriptive components.• Consistent spacing .
36
173
1K
Ohhh, Nokia have a new design system called Pure. Feeling very familiar, reminds me a bit of the original Microsoft Fluent style 🎨.
29
122
1K
Designers making a small change to a component and publishing it to the entire team.
14
281
1K
Seeing as Twitter is a bit bleak today, who’d like some swag?. - Figma logo hat.- Two pairs of white socks.- One pair of black cursor socks.- Limited edition stickers, NASA style. I’ll post anywhere in the world 🌎 . To enter, retweet this (sorry, it’s the easiest way to track!)
101
1K
1K
I don't quite know how to describe it, but the mystical and dream-like branding trend that Daylight and Perplexity are running with is delicious. It's now safe to bring back more expressive fonts
34
44
1K
New favourite font 🚨. "Atkinson Hyperlegible Font". It has been designed and optimised specifically for low vision readers from the team at the Braille Institute (@BrailleInst) 😍. Accessibility!.
13
146
1K
A quick tip on creating gradients 🪄. Adding another colour stop in a gradient can make them "pop"* and increase vibrancy. This is where HSL colours can really help, because we can manage the lightness incrementally. *I never said this word 🤫
10
77
1K
Designers arriving at a crit session to unveil a new button in the design system
10
81
1K
If you're looking to start a fresh design system within Figma, here's a jumping off point:. 1️⃣ Team for design system.2️⃣ UI Kit project.3️⃣ Separate files for: Styles, Icons, Components.*️⃣ Extra platform-level libraries if your developers are split into platform teams
29
126
1K
It's common during the handoff process to provide screens to our engineering teammates by "throwing designs over the fence". We've all been there!. This puts pressure on devs to play a game of spot the difference, finding minor changes between screens 🔎. We can simplify this 📣
23
129
1K
Did somebody say. better style management in @figmadesign?. Today we're shipping the ability to:. – Group styles in collapsible sections.– Reorder styles.– Create sub (!) groups of style.– Use the styles panel in its new collapsible beauty. 🎨 #FigmaTip
40
100
996
Design systems team: "We've published updates to .the component library, there shouldn't be any breaking changes!". Your files, inheriting those changes:
16
99
1K
The more I talk to hiring managers and senior designers about what they are looking for in designers, the more I back up the theory that portfolios shouldn't be X, Y, Z case studies, but explorations of your obsession with details.
29
77
1K
As we head into the weekend, a reminder that you can be a great designer and not:. – Work on a design system.– Have side projects.– Be a public speaker.– Be a coffee addict.– Have a side profile headshot. You got this 🤲🏻.
20
84
973
Holy sweet mother of dragons, someone has built a Figma interactive component that simulates typing in form fields. This is not a drill 🚨. Here's the file:
22
113
979
Me watching you use a value that isn't a multiple of 8 in your designs
31
99
946
Do you ever want to only show stakeholders the "ready for preview" designs and not the whole file?. 💡 You could:. 1️⃣ Create new page called "👀 Stakeholder preview".2️⃣ Copy frames into a 16:9 sized one.3️⃣ Set scrolling.4️⃣ Invite stakeholders to prototype only
14
92
904
Interactive components are here my friends. Here's a quick run through of what they mean and also why it's important for design systems teams. 🍜. Sign up for the beta here:
32
113
887
Me before working on a design system. Me working on the design system
21
75
849
One of the unexpected wow moments of using Arc browser (@browsercompany) is the split screen tabs feature. I can now preview my Figma designs in a prototype side by side the design file in the same window 🪄
29
41
854
Passing over your beautifully crafted @figmadesign components to developers like no one’s watching.
18
120
846
I've noticed a trend recently of very thin containers on landing pages and this one is an extremely specific 805px. Because why not I guess?. It's also pretty cool how you can use the live product directly on their home page
29
23
877
Split tabs, now in the Figma Desktop Beta app ❖. Download it and let us know your thoughts!.
42
85
850
In case you were wondering what the Figma offices are called. Personal favourite — Figma Maria 💃
18
41
815
I think it might be time to reconsider whether atomic design helps or hinders the creation of designs and systems. It’s been the de facto rule for looking at interfaces for a long time, but I find that sometimes it can actually create more confusion 💫
40
129
807
Bookmark this one! . A really thorough guide for design systems, with practical steps, tools, resources, and advise on structure ⚙️.
9
96
813
I’ve been thinking about how we can ease developer handoff with prototyping. What about if we could use layer stacking to nudge at how we’ve structured our designs?. This was built using a few interactive components 🍜.
20
90
798
What's the primary goal of an email app?. Compose emails?. Google UX team: Let's hide that behind a menu
56
67
807
Did somebody say. auto layout AND interactive components?. It's now live in Figma for everyone on the beta – can't wait to see what you all make 🪄. You can signup here if you're not yet enrolled:
40
64
737
Hey, I heard you like fonts ⌨️. Here are some new ones to check out! .
6
47
745
When you get caught changing the design after the developer started coding it
28
81
734
Found a dream plugin for making typography scales, it creates:. – Variables.– Styles with variables as values.– Sticker sheet on the canvas. And you can build ramps based on a ratio/calculation as well, saving a tonne of time.
13
52
745
"People chips"?. Google Sheets really trying to give me a design systems naming headache first thing this morning ⛔️
44
30
719
Developer: Did you just changed that signed off design?. Designer:. N. O. O. o. o. o. o. 。. 。. .
7
76
699
Okay this looks cooooool 👀. A new calendar app, where the meetings take place. within the calendar. It looks like Notion, acts like a calendar, and has integrations with things like Figma 🤯.
11
58
698
There are a lot of questions at the moment about colour tokens and Figma soooo. I thought I'd thread some thoughts on it to create a healthy discussion in public 🧂
20
76
673
I found another great Figma plugin that I think you'll all enjoy 👀. "Auto documentation" by @eddysalzmann takes your font and colour styles, then generates notes on the canvas, saving a loooooot of time.
19
83
674
Today I learned that if you double click a layer icon in your @figmadesign file, it centres that element on your screen. Have a great weekend 🤘🏻
18
82
633
Spacing is hard to get right!. This can be easier when thinking about parent/child element context. Setting container spacing as a benchmark, then setting the distance between our elements to 50% of that, it generally feels about right* . 24px container spacing = 12px distance📏
11
51
637
Cursors in your Figma file when you're having a group session.
It turns out herding cats is surprisingly easy.
10
61
625
Been asked a lot over the past few days about how to get started with colour variables, so here are some pointers 🖍️. Hope this is useful!
13
72
630
We spend a lot of time talking about component structure, but the library files themselves are often ignored. So what goes into structuring a good Figma component library?. Here are a few tips, hopefully a good starting point 📈
11
91
624
I don't know why, but using odd numbers for padding feels nicer to me. Fully preparing myself to be sent to 4px grid system jail
43
44
637
What better way to FigJam, than with some Figjammies?. Want to hang out in a file? I’ll be in here, come and say hello 👋.
31
17
606
Really happy to share a new best practice mega article 🕺. Over 6 thousand words, there's advice on:.• Structuring teams in Figma.• Structuring projects.• Structuring files.• Layers naming (yes!). You might want to grab two coffees for this one 📚.
13
94
619
Ohhh this site looks neat 🕵️♂️. It's a list of screenshots of popular mobile apps e.g. AirBnB, Google Maps, Grammarly, PayPal. Really useful if you're looking for some inspiration, or want to use these are as a reference for your own work .
12
75
606
Component props can be hard to wrap your head around, so let's go step by step creating a variant set with nested icons and text properties!. Buckle up 🤠
10
81
586
The Figma variables you didn't know you needed – Le Creuset's palette.
12
41
636
Hey, guess what?. You can now open multiple prototypes from different pages at the same time on the desktop app. Get noodlin' 🍜
23
38
581
It's time for another "what's that component called?". This week it's something we all love and definitely don't get annoyed by 🔴. What is this called?
148
32
591
Been cooking away for a few hours this afternoon on what a minimal email app could look like. I originally started with "what if Gmail and Slack had a baby?" hence the interactions panel. Will see where this ends up!
40
11
615
Last week I was asked by someone in the Figma community to help debug and refactor their variant component. So I'm going to try and walk through how I did it! Let's see if it works as 1 million tweets 🐦. The short answer is: components everywhere
7
82
579
The new Dropbox brand website is so good 👏. I think it's one of the few scroll-based websites I've really enjoyed using because of how incredibly slick and interactive it is. Have a play:
9
31
597
Just hit publish on a new guide!. It's called "Variable mapping and design system structure" and you can grab it here: It's hopefully a way to provide some guidance on how to structure your variables and collections according to how your system is set up
14
85
557
Just published a little freebie:. 36 swatches using the full HSL colour spectrum in flat & gradient styles. There's also a guide on how to create them 📖. They are a very subtle, with a 0 degree gradient, in what I'm calling a vibrant pastel (?). Enjoy 🎨.
10
57
557
Small but mighty Figma update that was shipped last week. Smaller PDFs! They now export at 70-80% smaller than previously 🚛
16
29
560
If you find yourself repeating designs across a few different user flows, consider using "flow slots"*. Repetition always ends in confusion for the team, this should save everyone the headache 🤯 . This example is a "select media from library" flow. *I've invented this term
13
41
540