Create Design Tokens with ChatGPT - Workshop Teaser with Chris Lüders

Summary

Je ne peux pas générer de résumé en français car le texte d'entrée est en anglais. Pour produire un résumé précis, j'ai besoin que le transcript soit également fourni en français.

Takeaways

• 👨‍💻 Chris is an expert in design systems and AI
• 🎥 The workshop will teach how to automate design system tasks with AI
• 💡 AI can help generate design system documentation
• 🔀 Token Studio plugin helps manage design tokens in Figma
• 💰 Using Token Studio saves 30% of time
• 🤖 AI can generate full type token sets for Token Studio
• 🔧 The workshop will demo latest AI tools for designers
• ❤️ AI frees up designers to focus on important tasks
• 🚀 Exciting new AI tools coming up for designers
• 🗓 Workshop on June 11th, 4 hours with live Q&A

Q & A

Quel est le sujet principal de l'atelier de Chris?

L'atelier de Chris porte sur l'utilisation de l'intelligence artificielle pour automatiser certaines tâches répétitives liées aux design systems, comme la création de jetons de design et la documentation.

Quels sont les avantages de Token Studio pour les designers?

Token Studio permet de créer et gérer facilement des jetons de design dans Figma, ce qui fait gagner beaucoup de temps. Cela rend également plus facile la création de thèmes et la mise à jour globale des styles.

Comment l'IA peut-elle aider pour la documentation des design systems?

L'IA peut fournir un point de départ pour la documentation des composants, des guidelines, des principes de design, etc. Bien que les résultats doivent souvent être affinés, cela accélère grandement le processus.

Quel prompt ChatGPT Chris a-t-il développé?

Chris a développé un prompt ChatGPT permettant de générer automatiquement un fichier JSON contenant des jetons de design pour une échelle de types, comme les tailles de police pour les titres H1 à H5.

Comment le fichier JSON généré par ChatGPT peut-il être utilisé?

Ce fichier JSON peut être directement importé dans Token Studio dans Figma pour créer les jetons de design et styles correspondants de manière automatisée, faisant gagner beaucoup de temps.

Quels nouveaux outils d'IA Chris anticipe-t-il pour les designers?

Chris anticipe des outils comme UI Wizard qui pourront créer des interfaces à partir de simples esquisses, libérant ainsi les designers des tâches répétitives pour se concentrer sur l'expérience utilisateur.

Quand et où a lieu l'atelier de Chris?

L'atelier a lieu le 11 juin de 16h à 20h, heure d'Europe centrale, et est diffusé en direct. Des passes d'enregistrement sont aussi disponibles.

Quels sont les avantages de Token Studio par rapport aux styles Figma natifs?

Token Studio permet d'ajouter plus de sémantique et de changer facilement les valeurs de manière centralisée. Les styles Figma natifs sont limités pour la gestion avancée des thèmes par exemple.

Pourquoi l'IA ne devrait-elle pas complètement remplacer le travail des designers?

L'IA ne devrait être utilisée que pour automatiser les tâches répétitives, pas pour remplacer la créativité et le jugement des designers nécessaires pour des interfaces de qualité centrées sur l'utilisateur.

Comment les outils d'IA peuvent-ils aider les designers à se concentrer sur l'essentiel?

En automatisant la mise en place technique, la documentation, etc., les outils d'IA libèrent du temps pour que les designers puissent se concentrer sur les aspects clés comme l'expérience utilisateur, l'accessibilité, les animations, la cohérence du système de design.

Outlines

00:00

😄 Un mot d'accueil chaleureux pour l'atelier sur l'IA dans les systèmes de conception

La présentatrice souhaite la bienvenue à Chris pour animer un atelier de 4 heures sur l'utilisation de l'intelligence artificielle dans les systèmes de conception. Elle le présente comme un expert dans ce domaine.

05:01

😃 Utiliser l'IA pour générer de la documentation et des composants UI

Chris explique comment l'IA peut aider à créer un point de départ pour la documentation des systèmes de conception. Elle peut aussi générer des inspirations de composants UI. L'IA est parfaite pour supporter la rédaction fastidieuse de documentation.

10:05

🤯 L'IA change la vie quotidienne des systèmes de conception

Chris parle des avantages de Token Studio pour gagner du temps dans la création de jetons de conception et le passage d'un thème à l'autre. L'IA facilite la mise en place initiale du système.

15:06

😎 Générer automatiquement des jetons de conception avec l'IA

Chris montre comment utiliser une invite ChatGPT élaborée pour générer automatiquement un fichier JSON de jetons de type d'échelle utilisables dans Token Studio Figma. Il gagne énormément de temps.

20:07

👌Ajuster facilement les jetons et styles de conception avec Token Studio

Chris importe les jetons JSON dans Token Studio et Figma pour créer facilement des styles de typo utilisables. Il est très facile de modifier les valeurs par la suite. L'automatisation est époustouflante.

25:08

😄 Conclusion enthousiaste sur la prochaine conférence

En conclusion, la présentatrice est emballée par les fonctionnalités montrées et invite les auditeurs à participer à l'atelier le 11 juin et à la conférence les 8-9 juin.

Keywords

💡Design Systems

Design systems are collections of reusable components that can be used to build digital products quickly and consistently. Chris is an expert in design systems and will be teaching how AI can help automate parts of design system creation and maintenance.

💡AI

AI or artificial intelligence refers to software that can perform tasks that typically require human intelligence. Chris will demonstrate how new AI tools can help generate design system assets like design tokens.

💡automation

Automation means using technology to perform tasks automatically instead of manually. A key benefit of AI for design systems is to automate repetitive and time-consuming tasks.

💡design tokens

Design tokens are central to design systems. They contain values like colors, fonts, spacing that can be reused across UI components. Token Studio is a Figma plugin that helps manage tokens.

💡theming

Theming refers to defining different visual treatments like light and dark mode. Token Studio makes it easy to switch themes across a design system.

💡documentation

Documentation captures guidelines, components, code snippets etc. of a design system. AI can help generate documentation automatically.

💡ChatGPT

ChatGPT is a conversational AI tool from Anthropic that can generate content like documentation, code and more from natural language prompts.

💡prompt engineering

Prompt engineering means carefully crafting the inputs to AI tools like ChatGPT to get better quality outputs.

💡JSON

JSON is a standard file format that Token Studio uses to store design token data. Chris demonstrates auto-generating JSON token sets with AI.

💡time savings

A key benefit highlighted is the significant time savings from automating design system tasks with AI, allowing more focus on strategic work.

Highlights

AI can help generate design system documentation and component libraries, saving designers time

ChatGPT can help create initial design system documentation, but you may need to provide more specific details to get good results

Token Studio plugin helps manage design tokens in Figma, saving ~30% of time

Token Studio makes theming much easier compared to native Figma styles

New AI tools coming that could analyze wireframe scribbles and generate UI code

AI prompting is an iterative process - it takes time to create effective prompts

With the right prompts, ChatGPT can generate full JSON token sets for Token Studio

The generated tokens can then be automatically turned into Figma styles

AI should optimize repetitive tasks so designers can focus on more creative work

AI will keep evolving capabilities rapidly - exciting new opportunities ahead

Be strategic in deciding what tasks to automate with AI

AI augmentation allows more creative freedom

Repetitive UI work leaves little room for innovation - AI can help

More automated documentation could facilitate motion design

ChatGPT struggles with some UI terminology, prompts help guide it

Transcripts

hello design system friends thanks for

tuning in Welcome to our video today we

want to talk about the power of AI in

Design Systems and our upcoming workshop

with Chris Ludas and Chris is a design

system sleet and he's super deep into Ai

and Design Systems his Workshop will

take place live June 11 and if you don't

have time you can get one of our

recording passes so today I want to know

what the workshop is about Chris what

are you going to teach people it's a

four hour session that's a lot but

you're so deep into AI you're posting

all these hacks on social media and you

you are the right person to do this

Workshop the best person I could imagine

what please introduce yourself Chris

yeah and thanks for having me hey

um yes mentioned I'm freelance DS or

design system leads working with several

clients building up the Design Systems

and I'm doing this for

I think four years now so started when

it was really yeah in in the beginning

of the whole design system topic I mean

this topic is around for like way more

years now but when it started uh with

yeah we started with Sketch and

um

but it was a cool tool abstract right so

that you have virgin control and so on

so it was really

um yeah different in the beginning but

now it's a bit better or way better and

um yeah doing this for several clients

and it's really fun and it's cool but

yeah I when the AI topic came up I

thought we can make it even better and

let us help with the annoying tasks

um for the Design Systems so the

repetitive stuff and um yeah

documentation stuff like this and this

is what the workshop topics will be

about so um it's about creating design

tokens with AI

um and UI component inspiration because

of course we need some UI components in

the end and we can let us help from my

journey for example but there are other

tools as well

then as I said the documentation because

a lot of companies don't have enough uh

yeah people to do the documentation and

it's really annoying and takes a lot of

time and AI is perfect in supporting us

that then in general how can chat gbt

help us because I think jbt is the most

powerful tool out now for Design Systems

but there are other tools coming up and

I will speak about the upcoming AI tools

as well and yeah everything that will

come up maybe within the next weeks

right because I want to have the really

new stuff in there

that's amazing let's let's actually show

people some details here this is Chris

Workshop coming up the power of AI in

Design Systems it's a live Workshop so

there will be also live q a so you can

ask your questions and Chris will try to

automate automate your problems so you

will save a lot of time but you will

already learn a lot it's a massive Time

Saver to use AI right especially as a

freelance designer you don't have that

much much time for your clients so

imagine you can automate all of your

repetitive tasks like creating design

tokens and also something we are going

to show in a second in this in this

session

so the link to the workshop will be in

the description and it will be really

amazing to see a lot of people in this

Workshop because I think

you will love it you will save a lot of

time and um so Chris you have been

working a lot in Design Systems for

clients and design tokens is a big one

right design tokens and design

documentation

for design and system documentation

there's either no time or nobody to do

it

but or nobody reading it unfortunately

yeah but

um if there's something coming up you

need it but then you need it right but

beforehand there's nobody to do it to

create it and often there's nobody who's

going to read it is there anything AI

can help us with with the design system

documentation

yeah of course so um I think especially

to have a starting point for

documentation it's very helpful so every

client and every company has their

unique problems or the unique brand and

so on so there are specific challenges

for every company but

to have a starting point for a

documentation it's it's very good for

the component documentation but even for

the guidelines or the design principles

and so on and

um I think one important thing to

mention is that people think they type

in one prompt and chatibility and then

the perfect result will come out will

come up but sometimes you really need to

talk to this thing and uh yeah ask more

specific questions or give more

information about yourself so if the

um the answer is too generic for

component documentation for example then

give it more information that you want

to have in there and so this is a small

thing that I experienced a lot that this

helps a lot to get better results from

chativity for example

you're also a big fan of of tokens

Studio which is the plug-in saving all

of our Lives because finally you can

create design tokens and figma which is

a massive Time Saver for you as a

freelance Design Systems lead now you

don't have to apply adjust and maintain

figma size manually like doing it by

hand all day and losing control and an

overview how has token Studio helped you

in your daily work as a freelance Design

Systems lead yeah it changed my daily

life a lot because it's way more

efficient so um yeah I'm not sure how

much time I'm saving but uh estimation

or estimation is around about 30 percent

maybe so especially if you're setting up

the design system and I think this is uh

yeah the most

time consuming uh part in the beginning

is to set up everything right like the

type scales the color palette and so on

and then the different themes and yeah

if you don't use token studio theming is

especially very difficult and there are

some plugins that try to do it but most

of them are not really really good

because they are just inverting the

colors and that's not it and with token

Studio you can Define manually

um what what kind of colors should

replace the ones from the light mode for

example

um and yeah if if you set up everything

and with AI it's a little bit easier as

I will show later

um then team switching is super easy and

super fast and if you want to change

some of the

things later than it's way faster than

before because you can really yeah add a

purpose to a color for example right and

with figma Styles the native ones it's

really difficult to whether you have a

lot of different colors and a lot of

writing in there and then people get

confused or you don't have it and we've

talked through it is very yeah you can

set this purposes and the meanings of

the colors and this is really helping a

lot

yeah 30 that sounds like almost two days

per week you can save it as I said in

the beginning right so if you have later

later you want to change some things and

then it's but I mean it's really quick

as well if you want to change something

so it will save a lot of time definitely

yeah I can recommend it as well we are

using it for all of our clients it's a

massive Time Saver if you want to set up

themes like theme dark team for

multi-brand multi-product if you want to

explore headless Design Systems where

you only have skeletons of your

components unstyled

um you can connect it with token studio

and just style all of your components

and control everything that's every

value can be controlled by token studio

and we recently did a workshop with

young six the creator of the token

Studio plugin we will put the link in

the show notes totally

recommend to have a look and this

Workshop is also taking place during our

conference the power of AI in Design

Systems is taking place during the

future of Design Systems we'll be doing

another conference coming up in June 8th

and 9th so it's only a couple of weeks

left and we have invited the

best the creme de La Creme of design

system pioneers and leads

to talk to you about Design Systems so

this time we want to focus on headless

Design Systems automation of Design

Systems

and design system data-driven design

system management design tokens all the

good stuff we will be shaping the future

of Design Systems again

because I remember two years ago we

invited young six the grade of token

Studio to speak at our conference and

this plugin is still massively used so

we're looking for all the cool stuff

which you can use later in your

day-to-day work practical Hands-On

content and the URL is

interdesignsystems.com tickets are now

on sale and now back to you Chris we

have mentioned token Studio

and you have found a cool way to create

design tokens automatically which is a

massive Time Saver it is also part of

your Workshop

but I know that this stuff takes like

almost I don't know two or three weeks

and now you can do it with a few clicks

do you want to show us the hack yeah

sure please

um

sharing my string

okay can you see it yes generating type

token set for token Studio while the

token Studio folks will love it yeah so

um this is one from and uh it took a lot

of time to get this to this prompt so

the idea in the beginning was to save a

lot of time for myself but I think I

didn't save too much time for myself

because it took a lot of time to get to

this result but I finally have it and uh

you will now uh everyone else will now

save a lot of time exactly I know that

it took days for you to come up with

this prompt with the right prompt right

yeah so and I had to test it because the

thing is that the results are not really

consistent if you don't know how to do

it

um so I it took a lot of time to get

consistent results that's why it took so

long

um so and I saved this prompt here and I

just copy it so

um

basically what is it about or what's

what is it doing so it's creating a Json

file

um because token studio is working with

jsons and therefore asking it to create

a Json for a design system or type scale

within a design system and what should

be contained so headline intro body

caption and you can of course change

that if you have something else

um than what kind of headlines we want

to have H1 to H5 then the font sizes

what you want to have of course you can

customize that here one way normal

should be named regular this is one

thing sometimes chat gbt is doing stuff

that might be correct from code

perspective for example

um the font weights are called sometimes

like a numeric like 400 instead of

regular or 700 instead of bold and then

you need to tell it to change activity

to do it right and yeah to make it quick

in the end I give a short

example of the formatting that I want

for the Json structure and yeah then it

works

okay so I just copy this and go to chair

gbt which is still here wait a second

okay and you need uhbt for for this

um

yeah to use the paid version to get

better results right yeah but it's it's

definitely worth it I mean if you don't

have anything for your design system yet

and you pay like twenty dollars a month

for chargeability Plus and you're doing

what I'm now doing adding the stuff here

and you have your typescale for example

then you already saved more than twenty

dollars right yeah I think designers or

people need to think uh more like time

and money wise so you will spend twenty

dollars or you will spend three hundred

dollars to get a ticket to your Workshop

but you will save weeks of time yeah

exactly and if you have a daily rate or

hourly rate

in two or three hours you will have like

your money back yeah so the twenty

dollars are nothing right so yeah

um enter this now

and then this happens a couple of errors

with future gbt this is normal then you

just reload

so I know it's riding it but sometimes

happening is that it's interrupting

itself so that it stops to write it down

I hope it doesn't happen now but then

you could just write uh continue writing

here and then take this pieces of code

and Stitch it together in Visual Studio

code for example but yeah most of the

times now with this prompt it didn't

happen yeah so let's see and the magic

of AI yeah what is it doing

yeah exactly so here it's uh defining

first the font family and I told in the

prompt it should be monitored but of

course you can take I don't know comic

stamps whatever and

um font size so it's defining the font

sizes and the name will be

um XXL for 80 pixels because it's in the

token it's referencing to these other to

these properties here and then it's

defining the line height the font weight

um and then it's defining the yeah the

types Styles so H1 consists of the font

family monitor font weight is bold font

size is 80 pixels line height 69. mm-hmm

right

so when it's

still writing here

that's so cool

what was your biggest aha moment when

you use chat GPT or AI like all the new

AI stuff because I see you posting all

the time all this cool AI hacks

yeah what was the coolest one

yeah I don't know when I really started

with Chaturbate it was crazy and but my

journey is super crazy as well so

especially the latest version of

maternity it's just completely nuts

um because it's creating things out of

nowhere and yeah it's always again and

again impressing me

so now

um I copy it out of here

and we go to figma open tokenstudio

New Hampton file so it's nothing in

there right it's completely empty and

now we click on the Json button up here

because we want to add this Json code

and now it's important to delete this

brackets here

and then I paste it in and now it's in

here it's automatically formatted by

token Studio which is really nice

and now you save the Json

and it defines that fear right so yeah I

just created all of the tokens yeah

exactly so yeah headlines here this is

one category

um introbody caption and now these

properties here that's absolutely sick

like look at this

usually you have to do it manually click

on plus give it the name the value next

one yeah or you need also need to think

about the structure right so how do I

want to set it up what is the name is it

font size and what is the naming

yeah yeah you need to do everything

manually

yeah so so cool and the cool thing is

that you now can create these

automatically by tokenstudio as uh figma

Styles as well

so create style so click on Styles then

create styles

then you can leave it like this and

create and then you have everything here

right wow so you now also have the figma

Styles yes in this structure with two

exactly and it's enough to have the free

version of token studio right because in

the bottom right side it says get Pro so

you it's enough to have the free version

to to use this yeah absolutely so you

don't need to pay anything except of the

charity for it and as I said it's

absolutely worth it and I mean token

studio is worth it as well right and now

if we want to see what I did here you

could even use the

um the plugin Auto documentation

um and then click on fonts here so that

it's documenting this color

automatically oh my God that's so cool

right and to see better we could that a

section around it

right

and um

here the

orders of the DOT but that's it and then

you have everything here so no way I

have a preview and you see how long did

it take right it's like that second for

this yeah that's epic because this takes

days if not weeks sometimes of course

now there will be a lot of back and

forth with other designers developers

and people but then you can use another

prompt or just

um adjust the values in token studio and

then you have it again

that's really really impressive so cool

love it and the good thing now is that

with uh token Studio you can easily

change these values right and so if you

have the the font sizes

um Define that and you change the font

size once in token studio and it's

changing for everywhere where this font

size is connected to and so this is one

huge Improvement that you have with

token Studio instead of doing this

manually in figma because then I need to

go in here and Define it everywhere here

for each types Style

amazing I'm sold already I will I will

uh I will attend your workshop for sure

I need it I need it for my clients I

want to automate more of this repetitive

work token Studio already improved our

work a lot because now we can set up all

the Smoothie brand multi-themed systems

for clients and then just I don't I

don't want to say it's super easy but

you just open token Studio change values

and it will be updated everywhere else

and

um before we had

yeah some issues because of course

people also do mistakes when it's done

manually

so this is natural that you will do some

mistakes and then you need to check all

the values and then yeah it's it it's a

mess with token Studio you're on a safe

side it's definitely worth learning it

and it's so cool to see this prompt and

this automation that it is taken to

consider even like to the next level

so so cool I I will be attending your

Workshop June 11th 4 pm to 8 P.M Central

European Time live four hours workshop

with q a and if you cannot make it

um the recordings will be or are the

recording passes are on sale as well

yeah and I'm just super excited to to

think about and see what will happen of

course on the workshop but um yeah

what's what upcoming tools are there so

the there will be so many cool tools

that are that will evolve the whole

design sphere a lot

um for example there's there's one tool

called UI zard wizard I don't know it's

uh the naming is a bit weird but um I've

seen this a couple of years ago and

you're doing like this scribbles for

like a wireframe for a page and then you

make a photo and then it's creating this

design and code directly stuff like this

right and um yeah really really uh

looking forward to this new thing so

that

if you're a ux designer and or UI

designer and you're doing design system

stuff as well so that you'll still have

time for the most important things right

because people are always afraid of

um AI stealing our jobs but I think if

you're using it right then it's more

like helping you like a tool and uh so

that people people can focus on the most

important things like focusing on the

users right and think about the needs of

the users and stuff like this so yeah

yeah think about

I I want to say more important stuff

than how to set up Auto layout

accessibility

documentation maintenance of the design

system or all of this stuff we don't

have time for

motion I don't know there's only a few

Design Systems documenting motion really

well because of course we don't have

time for that uh it feels like many

people are stuck in figma adjusting

Styles

um out layout and all this stuff day by

day it's like oh it's like crazy I'm so

looking forward to all these tools

helping us with automation I'm not a big

fan of AI creating the whole system or

design or anything just with two clicks

but all this repetitive tasks and all

these steps can be automated so you're

still full in control

yeah and you can still decide what you

want to automate

I think that's the perfect mix yeah yeah

and two it shouldn't go in a direction

where it's super generic and every

design looks the same right so uh but if

you're just taking all your time of of

your designers and to set up the stuff

technically and people can't yeah don't

have the time to

thing out of the box and trying new

stuff right so then it's getting in a

very generic Direction but yeah maybe AI

will save up time to do yeah to do more

exciting stuff as well and not doing all

the same and we are all uh copying the

design of linear or something like this

right and um yeah but doing our own cool

things again

yes

awesome I cannot wait to see you and

people at the workshop June 11th live

four hours workshop and for our

conference June 8th and 9th if you like

practical Hands-On Design Systems nerdy

content with live q and A's and then

those events are perfect for you

for sure you will love it all right

Chris thank you so much this was really

impressive I cannot wait to see what

you're going to show at the workshop

and we I will see you there yeah cool

see you there bye-bye