luis.
@disco_lu
Followers
53,180
Following
699
Media
5,352
Statuses
24,396
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
LDN
Joined February 2010
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
seokjin
• 95189 Tweets
Rio Grande do Sul
• 82440 Tweets
#BAZAARSGxFreenBecky
• 50105 Tweets
Rayados
• 42064 Tweets
MARTIN AL 9009
• 31521 Tweets
フジコ・ヘミングさん
• 29943 Tweets
Clippers
• 29774 Tweets
MEW X MONTBLANC
• 25377 Tweets
Amazonas
• 24335 Tweets
Monterrey
• 21250 Tweets
ネルフェス
• 20228 Tweets
FEDERICO AL 9009
• 19088 Tweets
Columbus
• 17965 Tweets
Maxi
• 17518 Tweets
ワンボタン瞬獄殺
• 13645 Tweets
Gerson
• 12853 Tweets
カード付き
• 10622 Tweets
Developer: If you change the designs now, we will have to refactor all of our code
Designer:
124
1K
6K
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 💅
290
196
3K
AS A USER I want to see what I'm playing in 3 places SO THAT the UI is very dense and overwhelming
101
115
3K
Happy to announce that Figma is now available on CD ROM
DM me for a cracked serial number 🔐
42
211
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
58
237
2K
Day 1 of you Day 3 of you
building a building a
design system: design system:
21
229
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? 🧮
58
160
2K
Have you noticed how common this marketing callout component is becoming on websites?
Actually, what would you call it?
129
110
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 💡
18
183
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
37
179
1K
Ohhh, Nokia have a new design system called Pure
Feeling very familiar, reminds me a bit of the original Microsoft Fluent style 🎨
29
123
1K
Designers making a small change to a component and publishing it to the entire team.
15
288
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!)
109
1K
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!
14
152
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
83
1K
Designers arriving at a crit session to unveil a new button in the design system
10
87
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
136
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
30
128
1K
Design systems team: "We've published updates to
the component library, there shouldn't be any breaking changes!"
Your files, inheriting those changes:
16
101
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
45
107
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 🤲🏻
22
87
1K
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:
25
117
1K
Me watching you use a value that isn't a multiple of 8 in your designs
33
103
998
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
20
94
939
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:
33
116
939
Me before working on a design system
Me working on the design system
22
75
908
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
43
884
Passing over your beautifully crafted
@figmadesign
components to developers like no one’s watching.
18
121
883
Split tabs, now in the Figma Desktop Beta app ❖
Download it and let us know your thoughts!
45
88
882
In case you were wondering what the Figma offices are called
Personal favourite — Figma Maria 💃
18
42
848
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 💫
42
131
839
What's the primary goal of an email app?
Compose emails?
Google UX team: Let's hide that behind a menu
56
71
832
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 🍜
22
93
827
Bookmark this one!
A really thorough guide for design systems, with practical steps, tools, resources, and advise on structure ⚙️
9
99
825
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:
42
64
788
When you get caught changing the design after the developer started coding it
29
85
769
Hey, I heard you like fonts ⌨️
Here are some new ones to check out!
6
48
762
"People chips"?
Google Sheets really trying to give me a design systems naming headache first thing this morning ⛔️
47
31
744
Developer: Did you just changed that signed off design?
Designer:
N
O
O
o
o
o
o
。
。
.
.
.
.
9
76
733
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
718
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
81
709
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
86
697
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📏
12
50
668
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 🤘🏻
20
83
664
Cursors in your Figma file when you're having a group session.
10
62
660
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!
15
72
652
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
45
46
653
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
639
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
96
642
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 📈
12
93
643
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
84
610
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
74
620
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?
152
32
615
Hey, guess what?
You can now open multiple prototypes from different pages at the same time on the desktop app.
Get noodlin' 🍜
23
40
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
602
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
587
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
89
583
Let’s talk about Figma design system libraries again, only this time...file names ✍️
What should we call the libraries?
And how is this impacted by their contents?
9
68
557
Design team: Our documentation is really concise and easy to read. You have no excuse!
The documentation:
11
50
550
Anyone else think login codes are so much better than having to manage different passwords for every app? 🔑
76
14
553
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
14
42
557
Apple: We'll tell you when your device is too close to your face
Apple: Put this computer on your face
4
73
537
I'm playing around with the idea of managing styles in Figma slightly differently
Let's take a look at:
• Styles as components
• Contextual, semantic styles
• Simulating "aliases"
• HSL colours
🔎
18
50
524
This magnetic paper is breaking my brain 🤯
Basically got a forever notebook here
19
21
519
Okay I found my new favourite plugin
Propstar takes a variant set with component props and generates a table view of all the instances 🪄
Are your component sets already tidy? Would you prefer to use Propstar to create a standalone table of all your component instances?
This is finally out today! Choose between creating embedded or standalone instance tables, with Propstar on Figma.
8
19
232
11
54
516
Variables for typography are live!
I've just published a "typography variables starter kit" to the community, so you can see how to set things up 🙌
There are variables for:
1) Font family
2) Font weight
3) Line height
4) Font size
25
67
522
Small wins update 📣
You can now copy and paste as PNG from the browser, as well as our desktop app.
Tell your friends
19
42
515
Designers: I'm a unicorn product designer who puts accessibility first
Also designers: TURN OFF CAPTIONS ON THIS VIDEO
23
25
515
Developer: The Figma file just changed, did you update this after we signed it off?
Designer:
8
42
517
If you've wanted to mock up designs using Figma's internal design system UI2, you may have seen our community file
It hasn't been updated in 3 years! This week, I dedicated 4 days to updating it, including (almost) everything launched since
Grab a copy!
14
75
510
