Figma Variables lets GO. Been working on this for so long with our team over here at
@figma
, and I'm so excited to see it finally launch.
AMA about variables! Happy to answer q's.
#Config2023
As a PM for design systems features at Figma, I have to explain what I do for my job to my parents often.
I made decisions around designing tools for designing tools for designers to design other tools.
It's really quite simple I don't see what the problem is.
#DesignSystems
Starting the year off with some library updates in
@figma
🔥
1. There's a new icon to let you know when subscribed styles/instances have changes
2. You can now accept changes for individual instances/layers
3. Also you can now see a before vs after preview before hitting update!
You're making an icon library. This library uses a 1px stroke width as its style guide. You need to center some lines for a + icon. What approach do you take?
Option A is centered, but displays as 2px.
Option B is 1px, but off-center.
Option C is if you hate your users.
Started at
@figmadesign
yesterday. So excited to be here and to make some waves in the design community. I'll be working on
#designsystem
features, so if you have any reqs hit me up!
@ChristianSelig
I love all of these replies stating that there are plugins that help handle this that are completely missing the point.
Law was well intentioned, but simply wasn't thought through. Good intents can still land you with a bad user experience, it's something we can all learn from.
Hello design twitter! Our lil' DS feature team over here at
@figma
is growing. We're looking to hire a DS feature designer! It's one of the best teams I've had the honor of being a part of. Come join!
We're working on typography variables in Figma right now, and would love to talk to some type experts. Anyone have any recs for people who deal with the depths of typography who'd be willing to chat?
Huge shout out to the entire team who worked on this. Was a massive effort!
Would love any feedback you all have when using typographic & gradient variables.
We were dropping hints about typography
Now our typography drop:
→ Font family
→ Font weight and style
→ Font size
→ Line height
→ Letter spacing
→ Paragraph spacing and indent
I love seeing all of these design systems pushing updates with Variables support! Check out
@Atlassian
's Components and Foundations, now live with theming support!!
#Config2023
#designtokens
⌘V should paste text without formatting (what I want 99% of the time), and ⌘⇧V should post with formatting (what I want almost never).
The shift modifier should designate the secondary action, not the primary.
As a PM at Figma working on design systems, one of my major areas of focus is libraries and everything they entail. Pushing direction and vision for how they live and operate in day to day work.
So I guess you could say I joined Figma to own the libs.
What a huge collection of updates for
@figma
today!
Personally I'm so excited for component props v2 to move from beta into GA; I know a few were waiting for this.
Looking forward and thinking about v3, what improvements to props would you like to see?
Got all your tokens in Style Dictionary and need to port them over to variables in
@figma
? Check out this open source plugin
@josephnqle
just made:
Love seeing how fast these plugins are rolling out!!
When I was working at
@Atlassian
, I ragged on
@Confluence
at least once a week.
Now that I've been using Dropbox Paper and Notion for the last 3 months,
@Confluence
is the number one product of Atlassian's that I miss.
I was so wrong. Confluence is legitimately so good.
Psst - hey
@figma
users. Want to see a sneak peak at what we're working on next for component props? Spoilers: it's ⓑⓤⓑⓑⓛⓔⓓ ⓟⓡⓞⓟⓢ and suggested values. Hear about that and how to use props in the office hours we're running tomorrow!
I think I've pushed
@figma
's new Variables and Advanced prototyping to its limit...
I present a fully working version of Flappy Bird!! 🔥
Featuring:
- Scoring + highscores
- Pseudo-randomised pipe placement
- Physics based movement
- Uses 46 variables
#Config2023
As a PM it's important to distinguish requests from requirements. Example:
What
@figma
customers want: design tokens 🥱
What
#figma
customers really need: w3m support 😎⚡
Everyone's favorite game - ds naming polls on twitter (ty to
@disco_lu
for the influence).
Let's talk token nomenclature - what do you call each of the three tiers, and what do you call the pink arrow?
Around the time
@willdepue
started working on their
@figma
computer, I also embarked on a journey to create mine... although now I can't claim to be the first.
~3kb program memory, ~1kb ram, 18 instructions, and a Figma plugin to help compile small C programs using ELVM.
Hey
@figma
friends, we're hosting a recurring live stream kicking off March 9th to talk about Design Systems! Join myself and
@dotdude
as we talk about the journey of creating a design system, with tips and tricks to help you at each step.
@tldtoday
@LinusTech
This just in: hardware encoding faster than software encoding. Stay tuned for our next breaking headline: water is wet.
This is hardly comparing apples to apples (metaphorically that is, as I suppose it literally is comparing apples to apples).
So excited for my
#Config2022
talk with
@ryhanhassan
about ∑̸̥̦͚͕̬̣̦̊̋͆´̵̢̭͓̜͕̏̓̏͋̇̕͝†̸̡̣̼̱̀̊̍͜ ˆ̴̤̳̟̣͇́͐͌̔͠ø̵͙͋́̀ͅ¥̸͇͙̩̖̟̈́̋̈́͠. Come join us where we'll deep dive into how to å̷̩̱͑̈́̅ß̷̻̺̖̒͑̓̓̂ͅ your Ω̶͖̞̈̈√̵̳̀̈ quickly and efficiently!
So much DS stuff happening this week, super excited!
Tomorrow we've got Framework where we're announcing some highly anticipated features for variables:
On Thursday join me,
@donniedamato
and
@resource11
for a token deep dive:
🔥Hot new variable update - we're making it a bit easier to deal with versioning conflicts. You can now select incompatible modes on layers!
This should make it easier to help diagnose layers that aren't able to use the mode, and will make system more flexible!
@santiecam
Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them.
I.e. you can’t apply a style to the color of an effect or a gradient stop, because how would that work if the style were composed
Mirroring a tweet
@skuwamoto
just put out, now that all of the Config launches are done and we have a roadmap out for Variables, what other features would you like to see for Design Systems inside of
@figma
?
Variables roadmap:
My first feature launch over here at
@figmadesign
. Super proud of the teams I was working with on these features. Check them out as they roll out today and let me know if you have any feedback!
Today we're announcing three new updates to components that will help speed up your workflow when using design systems.
1. Move components
2. Swap libraries
3. Quick components
Which one will you use first? 👇
@HonzaTmn
@misaac85
@DesignTokens
You’re 100% on the right track
@HonzaTmn
- heavily inspired by it, but we needed something that worked at smaller resolutions and also fit within our icon language. There were a ton of explorations of this.
It’s been a blast being a part of our
#Schema2022
world tour this year. We just wrapped events in NYC, London, and Tokyo – next up: cyberspace! ✨🌐 Join us for our virtual finale Nov 16 at 11 AM EST:
@emilsjolander
and I are hacking away at making games in prototypes while we wait for our flights back from
#Config2023
.
Veerrrrrry basic game loop logic working!
@skuwamoto
@figma
Ok yea design tokens and stuff are cool, but wouldn’t it be cooler if components had an explosion effect when you deleted them? Would like you to think about the true priorities here.
A couple tips with Figma variables (for ds libraries):
1. Never create a mode that shouldn't be set at the page level
2. Never publish a variable that users shouldn't consume.
These are the some of the most common problems I see with libraries that don't have great UX.
As a PM, one of the hardest things is getting buy-in on future plans. Here's one of my favorite
#figjam
tricks for getting alignment from the team.
What tips and tricks do you have for effective
#productmanagement
?
@notanush
@figma
Modes are going to be the biggest difference. You can use them to contextually swap the values of variables, allowing you to easily swap a design from light to dark mode, or to other visual modes.
I.e.
US is hiring "mid-senior/exec career professionals" to harness the benefits of AI for the government.
Pay: $155k
Comparison for staff-level positions in the industry:
Google L6: 506k
Apple ICT5: 497k
Amazon L7: 547k
Facebook E6: 610k
Microsoft L66:
@jsngr
Too complicated for my blood. I don't even change the number for my projects, I just iterate through obscure units of time, that way I never have to change "1" or conditionally add an "s".
#workSmarter
#shipMVPs
We're trying to do some UX updates to variables in Figma right now and I'm trying to collect some real-world examples. If you're able, would you mind DM-ing me a link to the Figma file where your variables live, along with how many designers are using them?
Oh snaps! Another ep of our Building Blocks livestream for
#figma
is hitting soon. We'll be covering updating your components to use the latest component props features. Come join myself and
@dotdude
on Oct 12th!
@NateBaldwinArt
@figma
Yes. Plugin API is working today and available for all tiers.
Example plugins:
Docs here:
In addition, we also have a REST API available for enterprise customers.
@svorklab
Coming later this year. If you're at Config, come join mine and
@disco_lu
's session tomorrow at 1130am for a preview of what we're building next for Variables!
We launched new component property features. Turn on open beta for…
→ Exposed nested instances for more customization
→ Preferred values for more clarity when instance swapping
→ Simplified instances for more focus on relevant properties
Learn more:
Spend the day working on designs. I'm ashamed to admit I didn't have any of the designs in
@figma
...
couple hours later and got everything recreated, and tightened up a bunch of elements in the process.
1/3
#design
#webdesign
@disco_lu
I prefer to label mine in a way that I'll look back on as cringe in 10 years time, that way when I have the perspective of hindsight once the industry aligns on things, I'll at least accept that I knew I was wrong to begin with:
Another hot item - Nested instance variant binding. You can now bind variables to nested instance’s variants, easily swapping things out between modes.
@Atlassian
Especially being fully remote, the collab canvas-ness of FigJam just makes me feel close with peeps.
Bonus points to it being fun too with things like
#Config2023
Launch 2: Variables
You can now use variables to make adaptable designs—we’re talking different brand themes, device formats, and more. And yup, variables can be exported as tokens in case that’s helpful 😉.
👇 See variables in action
I completed my first freelance design job over Christmas break in 2003. That was my first true dip of my toes into this crazy tech world, and I haven't stopped since. 20 years later I'm still here playing with pixels.
Here's some of those early freelance designs - I kinda miss
Schema is definitely my fav of our conferences. I'm obviously heavily biased, but it's our way to really hear from the community and get insight into the direction the design system community is moving.
SO HYPED to hear from everyone here, AND TO HANG OUT IN PERSON!!
Schema is back and this year we’re taking it on the road!
Apply to join us for our annual design systems conference live in NYC, London, and Tokyo.
Can't make it in person? Our virtual conference is open to all. RSVP to join us on Nov. 16.
#schema2022
DSs are getting crazy complex. Engineers have designed many processes and practices to manage complexity we can learn from, but we have to be careful to not fully treat design like code lest we put design in a box and kill creativity.
Recordings of all talks up early next week!
Question for all you
#figma
users out there, if you were to duplicate this page, would you expect the freshly duplicated page to have new master components created for this card and button, or would the new page be instances of the original page's card and buttons?
So excited for the launch of this. Color scopes are a huge boon to reducing noise for your designers, and code syntax will tremendously help with handoff.
If you're using either of these, would love to hear how your experience has been!
@danieldibartolo
@erenbali
Lived there for 5 years and loved it. I will say though that this misses the requirement of "ambitious people of SF". There's a few for sure, but it's way more laid back. Australia definitely has a "work to live" rather than a "live to work" mentality.
@bramus
I'm actually not a huge fan of this and am somewhat concerned about this implementation. I think it's going to misdirect a lot of people into how to support proper theming, will inevitably cause refactors at a later date, and will prevent color-scheme from scaling.
I'd prefer:
Episode 17 of "Making icons with Miggi in
@figma
" we make a refresh icon... mostly to show how to manage to keep a good rotation point when making these sorts of icons.
Full playlist here:
A comment on hackernews said the best way to compare LLMs was to pit them against each other in a rap battle. I thought it was a joke until some users posted actual examples, and I was blown away at how clear the differences were.
Bard vs ChatGPT v4:
(credit to er4hn & minihat)
@HonzaTmn
Actual answer - scalable yourself means you're saving more time than you're putting in. With design systems, this usually means addressing 90-95% of your users' use cases for repeatable patterns.
One anti-pattern I often see in DS is trying to achieve 99-100% of your users'
Hey
@figma
hear me out: responsive mode in prototype view.
It would be super valuable to see the responsiveness in prototype mode. I want to have the same effect as resizing a frame when I resize the prototype view.
Implementation idea in next tweet.
ping
@disco_lu
@pwnies
I'm not a huge fan of this at all. It feels very inflexible for theming, and it means `color-scheme` will never scale beyond light/dark. I added an alternative proposal here, but I suspect it's a bit too late:
To change a color based on Light Mode or Dark Mode, you’d typically use a `prefers-color-scheme` Media Query.
To make things easier, CSS now comes with a `light-dark()` utility function.
Read to get to know the details.
Browser Support: Firefox 120.
What I’m personally most excited for - EFFECTS. Get those shadow colors and sizes changing in between modes, and save it all in an easy to apply style!
Honestly was one of the reasons why I truly enjoyed my time working for
@atlassian
. Their approach to work/life balance is top notch, and a lot of that is CEO-led culture.
News from
@elonmusk
&
@tesla
today feels like something out of the 1950s: "Everyone at Tesla is required to spend a minimum of 40 hours in the office per week". Very different approach to what we are taking at Atlassian and here's why. 🧵 (1/5)