By far one of the best design system demos i've seen! More of this please!
@judgydesigner2 жыл бұрын
This is beauty. The indept versioning and headless nature makes it scalable at ultimate level. Also the log files perfectly syncs the team to the changes. Very well drafted. Kudos to Esther Cheran for this indept knowledge sharing.
@esthercheran15322 жыл бұрын
Thank you. Glad you liked it!
@1deplatt2 жыл бұрын
Some semblance of this token plug-in should definitely be incorporated into Figma. Very powerful
@NaniNaniX2 жыл бұрын
Totally agree. This plugin should become an official part of Figma itself. Making sure that we don't become dependent on a plugin that might not be supported the next day.
@platinumdynamite2 жыл бұрын
This and any kind of logic in components would take Figma to the next level.
@user-ti9zc1xv2b2 жыл бұрын
They are working on it; confirmed this on Twitter.
@IStMl2 жыл бұрын
@@NaniNaniX it's open-source
@djoaniel2 жыл бұрын
This is very helpful to organizations looking to modernize their design system and is looking at growth that the current legacy design system cannot reach. Thank you for sharing.
@esthercheran15322 жыл бұрын
You're welcome :-)
@ianturk2 жыл бұрын
This is spectacular! Thank you Esther for sharing your knowledge!
@esthercheran15322 жыл бұрын
My pleasure!
@ytRap0072 жыл бұрын
Thank you very much figma for the support. I hope more videos coming like this. very needed much
@MadeByAlireza2 жыл бұрын
This is a giant move in design system. Thanks a lot.
@telemachia2 жыл бұрын
This was fantastic and really useful. Very clear explanations and examples.
@charles-henrilison2313 Жыл бұрын
Outstanding work! Thank you for sharing this video, this is an eye opener!
@md.imranmolla5192 жыл бұрын
Awesome plug-in loved it
@princhipehdesigns59222 жыл бұрын
Very powerful plugin, will be interested to have a lot of the functionalities moved to default Figma. Love the themes feature.
@jasonwadeshannon2 жыл бұрын
Any chance you could share a generic figma file so those who want to follow this example aren't starting from scratch ?
@jade_ch2 жыл бұрын
Thanks for the video and the good explanation. But I cannot find the option for automatic documenting the component tokens, shown at 31:30 min of the video. I'm using the Version 95 of the Figma Tokens plugin and the "Add an annotation" option is just missing in the Inspect tab. Can someone help with that?
@lucilatallone30302 жыл бұрын
This is great! Thanks for sharing, there is any chance to get a copy of the semantic naming/labelling file? I'm a bit struggling with how to structure and name the tokens.
@thanksalaska2 жыл бұрын
Would you be open to sharing the repo to the visual mapping tool?
@modernbeatnik2 жыл бұрын
When Figma, when are we getting design token support? And Dark Mode and the ability to create a design system and change the design tokens to support different sites.
@HaraldHumml2 жыл бұрын
Hello, thank you! Very insightful. I have a question regarding the versions: can you detail how you do this? Does the version just act as a copy / backup? What if you have to go back to an old version? How do you ensure that you don't loose the relation between the component and the products that are using it? Thank you!
@engebret2 жыл бұрын
We leave components specific tokens to the developer, who will implement them when needed on his end. Nathan Curtis gave the same advice in his Smashing mag workshop on engineering design systems.
@intelone8142 жыл бұрын
do you have a link please?
@paulashcroft62252 жыл бұрын
This was really insightful, only just getting started with design tokens so very helpful, thank you Esther. Can anyone recommend further reading on this topic?
@goryl_we_mgle2 жыл бұрын
32:04 - what is the name of this visualization tool?
@erice71922 жыл бұрын
I love the idea of this like everyone else but has anyone used it with a team? I'm wonder how it scales, how easy it is to use for the individual creating styles and designer that consumes components built with it. Any other pain points....
@kristianl14852 жыл бұрын
If each component lives in a separate file, how do you use them when drawing? Do you have a Figma library per component?
@guitaranswerguy2 жыл бұрын
If I understand what you're asking, I think your question is answered at 42:00, where she shows which libraries she's enabled for that section of her demo. So yes, when you create a new file, you'd need to enable the individual library file for each component you plan to use. Then, they'll be available in the Assets panel.
@edengildesign64232 жыл бұрын
Won't over organizing make the designers loose their tail when they want to update something in the DS? To change something in the button, for an example, the designer will have to go through an "Inception" type of route just to get to the value they want to change? button - token - token in token - etc...
@esthercheran15322 жыл бұрын
This granular organisation is definitely not suitable for every kind of project, but when you're managing multiple brands in multiple themes from a single component library, IMO it soon pays off. Of course, this would only be used by library maintainers. Product designers would only consume the components, possibly 1 per brand and use a subset of tokens, possibly in the form of figma styles, to go about their day to day design work. Again, this project is partly experimental, and trying to address a really complex multi-brand DS environment. For a more basic DS I can imagine a different approach working better.
@user-ti9zc1xv2b2 жыл бұрын
@@esthercheran1532 I completely disagree, having worked on Twitters and Github DS's management, your approach has many flaws and will tank productivity, looks like its intentionally overthought
@briansing34938 ай бұрын
in creating different versions of pages, how are some pages avoided in publishing?
@jossbdn57812 жыл бұрын
i think we shouldn't consider that we have to choose between one file & multiple file library as made on for different purposes. Multiple files for managing content (production), and one file for explorations or improvments (devlopment). As we have now headless systems solutions, both shoulds works together
@weirdink2 жыл бұрын
Can't help but notice that the CTA's in Storybook are pill-shaped , but the buttons on the Figma component file are not?
@iam_nick2 жыл бұрын
Is there a downloadable example?
@Steezy9672 жыл бұрын
I’m struggling to see the value in this method, it’s looks over engineered, solving problems that don’t really exist and it doesn’t look like it speeds anything up. All this looks like it could be done with a tradition DS
@dotsona072 жыл бұрын
It would have been useful before they added branching if you wanted different versions of components. But yeah prob not anymore other than it being somewhat more organized.
@BohnnaChhim2 жыл бұрын
@@dotsona07 You can't use/reference components in branches. Although the previous versions are unpublished in this presentation, they could publish past versions in a library update for consumers who wish to remain on an older version of a component.
@crucifix6ARRIVAL8wigwam2 жыл бұрын
If you work with only one brand or product you are correct. However a lot of us work with multiple brands where the underlying components are the same but layouts and styles change. A situation like that makes design tokens invaluable, it also makes handing off to developers super easy with just a JSON file containing all your styles. Not to mention the fact you can control things like padding or border-radius globally which you can’t do in Figma natively.
@IStMl2 жыл бұрын
What's the roadmap for the native token support ?
@vikavik847010 ай бұрын
Is it possible to purchase such the DS?
@muhawenimanajanvier62802 жыл бұрын
Cool stuff, But I'm not happy with the new payment plan 🙁
@danielDefoe812 жыл бұрын
Since you can only locally store tokens within the plugin for one file. How do you provide tokens for all, individual component files ? I love those demos, but it would be also a great topic to talk about how to setup your plugin in order to supply multiple files.
@creativeembargo2 жыл бұрын
The tokens are stored on GitLab and not in the plugin itself.
@kasidyray Жыл бұрын
@@creativeembargo I think tokens are stored locally by default, you can choose to connect and sync to a repository
@welling12 жыл бұрын
Impressive.
@esthercheran15322 жыл бұрын
Thanks :-)
@edgardabboud4641 Жыл бұрын
What is the font used in this presentation?
@SpaceFederation2 жыл бұрын
Figma Tokens is nice, but it is not really handy to use. Please bring this feature in a way it is also implemented like text-styles and color-styles into figma.
@김보미-n4f1w Жыл бұрын
Can you give me some info on this plugin? can someone please tell me
@arthurbertaglia42432 жыл бұрын
How do You visually map those tokens? most of the documenting tools are not capable to show those in a intuitively view like that. It's been a challenge to keep the documentation updated with tables and "JSONish" views (like Zeroheight do)
@hoangocnguyen63682 жыл бұрын
same question!
@zhovnir2 жыл бұрын
Thanks a lot!!!
@1deplatt2 жыл бұрын
Tokens are essentially cascading style sheets, no?
@ChrisSarca2 жыл бұрын
In CSS you can have Custom Properties, example: :root { --blue-500: #0000FF; --primary-color: var(--blue-500); }
@kristinludlowUX2 жыл бұрын
Sure looks like it. If someone had explained it to me THAT way, I wouldn't have wasted so much time reading convoluted online articles.
@kristianl14852 жыл бұрын
Tokens are platform agnostic, and can be transformed to platform specific variables using a service like Amazon's Style Dictionary or Saleforce's Theo. Those services take tokens grouped in a JSON-file or YAML-file as an input, and generate platform specific variables. They also allow platform specific unit conversion like px to dp or pt depending on platform output. Surprised this video mentions nothing about the most valuable aspect of a design token.
@SvetoslavNikolov-go3vh2 жыл бұрын
❤
@user-ti9zc1xv2b2 жыл бұрын
I think the way the design system is organized is waaaaaaaaaaayyyyy overthought and engineered, classic example of being obsessed with process instead of output
@ludwigvillalba18862 жыл бұрын
save space, lol
@mawreexio2 жыл бұрын
Great content. Awful delivery. This demo could have been reduced to 30min with some structure and preparation.
@asimgiri42692 жыл бұрын
It would be amazing if Figma introduced Dark Mode
@oscardeee2 жыл бұрын
Don't know why everyone wants dark mode so bad. Dark mode will literally just affect both sidebars and that's like 25% of the screen, tops.
@kristianl14852 жыл бұрын
@@oscardeee Thank you.
@utkarsharya50542 жыл бұрын
@@oscardeee You can always change the canvas background color to match the dark mode.