At work we've decided our next generation work for designers and developers will be based on Figma vs Sketch. Using Figma is a bit like using Google Docs instead of Office, in the sense of everything is browser-based and shared in real time, rather than passing files around (or using a supplemental program such as Invision)
I'm a little surprised that both programs are still fundamentally vector based, vs being grounded in like DOM elements or what not... though I guess this has a lot more flexibility, especially since it's not like web is the only target medium.
Anyway, "Design Tokens" are the new hotness - in atomic design thinking, these are almost like the "subatomic particles", the consistent properties like color and padding that you'd expect to see applied across many different atomic units.
(Which really... is just designers discovering the power of key-value pairs. Some of my shtick is when I think what Perl showed me in the mid-90s, having only used C prior to that (along with some BASIC and LOGO) -- key-value pairs (associative arrays), duck typing, not having to manage memory obsessively, strings as first-class objects, and regular expressions - maybe key/value pairs was the most important...)
Anyway, this article goes pretty in-depth into the whole process of setting up design tokens in Figma and then the kind of js you would need to pull them out for use elsewhere, such as your CSS.
No comments:
Post a Comment