 Hello everyone and welcome back to the state of the web my guest is Adam Argyle He's a developer advocate at Google and creator of the Visbug design tool and today we're talking about the state of design systems Let's get started Hey Adam, thanks for being here. So I want to ask you what purpose does design fulfill on a web page? What are its goals? Hmm. That's a good question at a high level. I feel like Design does a couple things we have You know, it's supposed to be guidance You want to have credibility so it's like the better designed it is the more credible it feels right? You don't want to spend money somewhere where it looks like there's no design Even though that might not accurately reflect the product or what you're investing in but I like thinking about at a very very high level what design is doing is we have Affirmative design and we have critical design and critical design is the type of design that is Exploratory it sort of provokes you Brutalism as a good example of critical design where you're looking at something like wow, this is like stark and shocking Even though it's sort of retro in a way So there's design can do really interesting things to your psyche in terms of like challenging you and Or we can see more of this affirmative design, which is kind of getting more popular It's safer where you're sort of piling on to the social norms of like what's going on in design because it's safe And it's familiar and so folks will visit your site and they might feel old Into an action because they visit it and it's beautiful and airy and they might be looking at something terribly Not attractive like let's say a scrubber for you know your sink You can make a scrubber and a sink look very nice So you visit this site and says do you have problems with your sink feeling dirty and nasty? Well, we've got the scrubber for you So it's like every design states the problem and then brings in the solution And that's sort of lulling you into this behavior. They're like ah, isn't this familiar? You're here It looks like a normal ad it has the normal flow. Let me guide you down this path and we'll take you through this excellent experience So design does both those things that's really high level to it does a whole bunch of other stuff, too But yeah, I think that's sort of what it's trying to do is credibility flow You know somebody else has done the work to organize it for me, so it's supposed to be easy I'm supposed to be here to consume quickly and get a task done guiding the user towards the solution for that web page Yeah, and in that case it's usually the solution that the web page wants you to go down Which is where you know design has a little bit of cunning in there Some people say design is a type of trickery as well Which right we have like dark patterns that are like legit trickery Or we have light patterns which are it's trickery or we're just sort of like no, this is just a healthy guidance You can you can diverge it's okay But yeah, so in terms of the tools that designers have What is a design system and what are its goals? ooh so design system that's sort of It's a hard one to nail down. It's gone through all these phases My current opinion on what a design system is is Where we previously had design deliverables that were sort of like a design system And then we had engineering deliverables that were kind of like a design system What we have with a design system It's a Emerging of the two where designers have their symbols and their files that generally represent the same components that engineers are making And there's like this. Oh coming together moment in a design system That's what I think we're currently personifying that as where before engineering had like a pattern library or component set And then the designers had a style guide So what are some of the principles of a good design system? Ah, yes, okay So at a high level I think a design system Intends to make future Us have easier decisions like in the future. I shouldn't have to invent a new button I shouldn't have to invent a new login form like these things should be solved already So at a high level that's one of its Most You know valuable propositions is that future you or even if you're being really considerate like other customers of your design system Um customers being maybe other development teams Other designers, maybe even like the marketing team you have people that want to use that those are I call them your customers So a good design system is considerate of them and it empowers them But at like a low level When you're implementing a design system, you should have things like reusability Extendability you should have accessibility built in Essentially these lego pieces should have solved a bunch of problems for other people already and and be battle tested and have gone through You know, okay, I'm gesturing right now But the gesture is imagine a rock that I'm tumbling into a pearl Like we'll take and then we'll have a bunch of pearls to give Um so that other people can and get their tasks done easier And also there's some something about that where you need interactivity as part of your design system, right? I have seen some design systems that Don't just talk about the component. They Give you levers to pull so you can visit a page And there's some tools out there that do this like a storybook is one We have other tools coming out like frame or x So there's like design tools that are coming out very either very focused on this one particular use case Or you have ones that are a little bit more documentation focused So they're less like compose and build and more like no tinker and play and assess what component you need beforehand And I like that tangible learning it. It's really nice, especially for someone visual like a designer to come into a design system website and peruse And find a component and be curious and play It helps to get really sticky the the features and the capabilities of that In terms of the life cycle of a design system. Is it ever really done or is it more iterative? Don't No, I think they they really only grow I have seen them be reborn or we've you know, we've seen them be reborn With brands or they're reborn as complete redesigns But no, I don't think they're done. I think they're growing I think we're making teams now to facilitate these things because they are so difficult And they only grow in complexity because well, there's considerations that are often lost like mobile You know a lot of design systems are like look at our sweet desktop design system and they're like cool What's it do on mobile? We're like We'll get there Same with like accessibility and layouts and anyway, there's like a few other things that I think Some design systems can do to to grow and be even better And I think that's just what we're discovering right now like folks are playing Uh, and they're trying to figure out what aspects of the design system are really meaningful and what's Crufty and you know, we're young industry. We're all still learning kind of like what this means Do you have any examples of older design systems that we draw inspiration from today? Oh, yes, okay. Oh Okay, so old design systems. I have a bunch of them that I'm a big fan of we could go back In terms of like inspiration and things that are influencing what we're doing today and go back to print and be like print You made beautiful style guides or brand guidelines. You would give Legos to A client and that client could go put them on an envelope. They could put them on some stationary So that was a very early set of like Lego deliverables that had some rules and some intentions Then you have operating systems that feel very much like design systems as well, right? The first iphone had a design system for sure. They even had a document Uh, the hig right the human interface guidelines. I would like to see more design systems have a hig That'd be super cool All right, and then we had android with halo. Oh, these are inspirations to me android with halo. Remember that one Dark and glowy everything looked like it had like lightning bolts or like neon around it Actually, you know what it looked like that would look like that batman movie with It was like a ui based on that It's kind of cool That's right. We had platforms We had webkits. Oh, yeah So this is like material bootstrap HTML5 boilerplate jQuery mobile Yeah, those were and what did they call those right those weren't design systems. They were Component libraries with a ui framework ui framework. Yeah pattern libraries. They had all these interesting names I think we also take inspiration from fashion Uh, we have this kind of goal right now. I I have this metaphor. I like to think about a design system It's like you're trying to make a capsule wardrobe that's uh, everyone else in the company should want to wear Right, you're like, okay. I'm the designer. We need to make uniform looking things across our site And they should be familiar and and elegant and blah blah blah So what they do is they go make this this design system That's essentially like making a set of wardrobe like you can't screw this up Just walk in the closet grab a shirt grab some pants grab some shoes grab a hat. Who cares it all goes together Um, and that's a that's a term from well, I learned it from Pinterest I don't know where else it came from though, but the capsule wardrobe idea is this Yeah, grab and go wardrobe and we're trying to make a grab and go design system I'm gonna hop in grab a couple things make a new layout Be on my way Um, so fashion I think is influencing us in that way too. They want to be very minimal right, it's almost like Marie Kondo your uh Your wardrobe like go in and pull all this stuff that doesn't fit in the capsule make a reduced set like reduce your anxiety by You know reducing your options But I have a question about that like when you limit your wardrobe or you limit like your ui elements Is it true that you can have one size fits all ui elements? Or sometimes you need to reach out and use something new and different Oh Right because you don't want to wear my clothes. Do you know? Yeah, you should like dude your wardrobe is Well, it looks like your wardrobe like what if I want to have my own looking clothes and this is where it comes down to like Um, well, and I have two opinions here one is I don't think designers want to wear other people's clothes So it's to me. It's a little interesting that we're trying to unite I think the goal is super right like that We do need to make reusable Legos that are extendable and are helpful for future problems But at the same time the more you try to abstract and reduce these like very subjective visual emotional things into like little units They start to feel very functional. They lose some of that that excitement that creativity and I think people want to start breaking out of your design system at that point. They feel trapped. So there's like a There's a there's a struggle here with design systems, which is we want to empower everybody But we want to not be trapped We want to be able to pick clothes every day that are really easy for us But then we want to be able to go out to a fancy dinner and not look like we're dressing from our capsule wardrobe And especially if you have customers customers want to have unique aspects of the site And so naturally they're always pushing on the design system to extend even more This is a good shout out to to material and google material the new version Um looked at what their customers were doing, which the customers for materials tons, right? People all over the world using it from dashboards to mobile apps And in that case they looked at how people were using it and people were constantly Customizing it, right? They didn't want material vanilla. They wanted material with my flair Whatever that flair was Like right like I want grunge material So well it doesn't exist, but maybe I should make it no But yeah, they looked at their customers and they empowered them to customize and and extend material as a base I thought that was really Observant and it was like research-based It's just a very very nice plan for the next version of a design system to lean so heavy into Customization and enablement of people to fork. It's almost like they're letting people fork To to manage their own and they can still pull updates and that's a really great segue into my next question Which is there was a comment on our previous video in march the state of css with unicravets our guest And this commenter is cool twisted tv says The problem i'm seeing lately is that most websites now look the same It's like they all have this standard template or something Unlike back in the day when flash was a thing people used to create out of bounds designs along with tons of nice animations But nowadays everything is flat all gridded up the same way with a few minor positioning tweaks here and there I miss those kinds of designs that today We rarely now see all because everyone is now into this flat and blocky design Look slap a few fonts on a page and add a few picks and color on the background and you're done That's 2019 for you. What do you think about that? Uh, you know working at an agency Even working at startups We couldn't take a lot of risks and we were moving so fast That the only thing to do was affirmative design I think what this question is kind of poking at is affirmative versus critical design And they're upset that everybody's gone affirmative They're like, ah, you're just piling on to the currently socially acceptable design patterns and strategies That's so lame Which I agree Because I built a lot of flash websites And yeah, you could land on one of my experiences and it was like you're in a fishbowl Right. It's like fish. Yeah, you could hover over the treasure chest and it would pop open and bubbles would come out It was way more critical design way more like experimentation and In creativity it was like you were unfettered But at the same time if we think back at that because there's I think a lot of joy and and fun that was there It was less serious and it wasn't really achieving Inclusive design as well. I think one of the reasons folks other than you know, you know being safe is that flat and and choosing some these modern strategies they really Make accessibility easier Because you're not going Critically you don't have to go undo something to be inclusive So I think inclusive design which is a really impressive and great push that we're doing right now is also Kind of inhibiting some of our exploration because we want to be able to reach as many people as possible And affirmative design is lowing right you visit it. You're like All right. Well, I don't really have to stress while I'm here or do very much deep diving. There's the Navigation menu. There's my primary action button for scroll down. Yep. There's three little things that tell me about The features of this the features of this product Oh Harry roberts today Harry roberts today writes this thing. Basically. It's like re quoting this person. Yeah, I have a quote here Flat design and the rise of more and more digital products does seem to have killed off a lot of that exuberance and experimentation Which is a huge shame I missed the days of seeing what adventurous and out there things people were trying to create You would log in every day just to see what crazy stuff people built whether it was flash or web Um, I feel that I think uh, there's a there's another tweet. I can never remember the guy's name I think it's John gold. I remember someone's name Wow, we'll have it. I know your name too. Yeah, rick viscomi Um, that's a great name This tweet though had two images up and it was like which site are you building the one on the left or the one on the Right and they're pretty much identical. They they're like big. There's a nav bar at the top There's a big header image with big ginormous text in it That's like there's a problem and then underneath that's like we've got the solution Right, uh, and they're both there And they're the same. They're like the practically the bootstrap templates that you could get for free They're practically the the theme for every wordpress site is now looks like this Uh, and the coolest and most creative and critical ones might have a video playing Right with text over top like put some extra effort into that one That picture is animated Do you consider bootstrap to be a design system? I do. Um, I don't think they do Well, and maybe this comes down to where I'm I'm Curious about what a design system is and how it's different than a pattern library Um, I think I think it's that designers Were more involved in a design system whereas like bootstrap is very developer led I think design kind of came in a little bit later after their Legos got really popular And so yeah, I think I think their design system that just kind of got there in a different way Um, the result the thing that they have the tangible thing I can go pick up off the shelf and just like place in my tool belt Right, uh, I'm I'm wain right now from Wayne's world So I just got my like from the back of the car if anyone remembers the shockers Anyway, whatever that's bootstrap right now I could go get that off the shelf And be immediately Useful with it and solve my future problems. It's like the same value props that I got and and we're sharing about a design system You could get them from bootstrap, but it doesn't call itself a design system Um, I can't remember what their home page says Um, I think they're one So according to the hhp archive bootstrap is used on like one out of every four websites At least in some fashion, which is a surprising step Who knows to y'all But could that contribute to this feeling that websites are all looking the same if 25% of the web is using bootstrap with the same type of layout Um, is it possible that bootstrap is a victim of its own success in a way? Ooh, I like that phrase victim of its own success Uh, yeah Yes, I I think they are this this is funny This reminds me of uh two two metaphors that I want to share like bootstrap is funny Like if you think back to high school There was probably a super cool band that their album just came out and you were like love that band So cool and you listen to them a ton. They made a second album bootstrap four made a second album And you're like this band's still cool or bootstrap three And then it gets really popular and everyone's listening to them And it's like some fool who you don't like shows up wearing the band shirt and you're like, okay, that's it Done with this band and you start calling them a sell-out and the reality is just like They're now popular. They're now making money. They're successful. You should be happy for them But instead you're turning your nose up and like this like defensive disgust like I don't want to use it anymore Even though all the stuff you built with it was great all the music and moments you had with that band were really nice But it's hard for anything to stay in fashion for too long And that's kind of like the second metaphor is like the wardrobe We all had favorite stores. We shopped at back in the day Whether it was zoomies or gap or whatever, right? And these were like places we went to go make easy decisions that helped us Get on with our day and that we were still picking something like relatively cool and meaningful But then it just gets old We're kind of rude as humans, you know, we We burn through stuff all the time. We consume it and we're like this is so good and then we throw in the trash So I think bootstrap is a victim of its own success, but it's also Very much still a success. I think being successful is hard I mean look at any big framework of like whether it's a javascript framework or a big design tool As soon as you hit the big shots and like you're the cool one everyone wants to take you down And that's that's a hard life to be in so bootstrap stick it out. I think it's still a great product It's obviously just reaching a different market almost like the pop band, right the pop band green day, right? Love their first couple albums third one came out Didn't want to play that band anymore But they reached a whole new set of people and those folks fell in love with them in a way that I didn't And I shouldn't say that green day is bad I should say that green day is successful and they're reaching new people and I still like their dukey So you spent a year as a ux engineer at the google cloud team as a design systems engineer So to speak. Yeah, what was your experience on that team? Yeah, that was really that was so illuminating So yeah, I was a my title was really long ready for this I was a ux engineer on the design systems team of gcp through a design lens So they have two different types of ux engineers. There's ux engineer engineer And then there's ux engineer design So I was on the design side I was in a team of four or five other ux engineers who were supporting the design system Which had a big team And I this was really cool to see how much commitment google had to their design system In so much that this team was made up of three teams. There was a trifecta It's like the triforce of folks were managing that design system that design system is creating jobs And it was really interesting to see how all of them were working together what problems they were solving And there's two things I want to point out. The first one I think is really interesting in meta, which is Google here, I'll just start with the first one. It was built on angular. So it was angular Which was transitioning from material one to google material And angular was doing a good job at this work The the struggles that they had were with how many customers that they had So this is where I like this meta comparison You have google clouds and their design system, which they call their design system a condensed version of material So it's like a child theme. It's like they forked google material and made an enterprise condensed version That's not as airy and fluffy That's interesting because that means google cloud is a customer of another design system Simultaneously they have hundreds of customers. So they've got customers that are internal Right um app engine There's like various products and each one of those products has a team each one of those teams are consumers of this design system That's crazy. Then you have third party players people don't want to add plugins or other support and other features into gcp That also want to use your design system. So they had this really really unique Scenario where they were simultaneously a customer of a design system and a producer of a design system Anyway, yeah, it's meta. I liked it and they were really Adament and very good at listening to all of these different customers and trying to make this thing work for everybody But it's a very difficult task. They're hiring. They have tons of headcount because this is Gcp is humongous And they need help that and the ux teams. They're really fun and really cool. So if anyone's looking for roles Gcp in seattle We'll put a link in the description. Yeah, sure. So you mentioned something earlier. I want to come back to inclusive design What is that and what is the purpose of it? Oh man? This is so inclusive design We want This is so funny. It has a name because I feel like it's the thing everybody's wanted the whole time We want our content to be accessible for as many people as possible Right, like why did we have to put a label on that? Um, I think the label is there and what it means is you need to have a site that's accessible Which really means you just need to test first Testing your site for accessibility is always this awesome empathy experience where you're like, oh, no My site's probably fine on that and then you go tap through you're like It works It's not elegant. Um, and that's sort of like inclusive design is like taking that extra step to empathize research Ask folks and adjust your design to be more inclusive. So this can come down to things like contrast ratios uh font weight thinness uh tab flows and Stuff like that. So looking ahead. What do you see the role of components in future design systems? I think we're only going to get more complex as things go on Um, we're noticing now that our components aren't good enough yet Still especially once you get to inclusive design areas where you thought you were done and then you go test and you're like, oh, we're not done Sometimes those can shake the whole foundation of your application And um, I think it's healthy though that people are investigating that other future things. I would love to see uh You know voice We have so much voice interaction coming in Why don't we have a design system for voice? I think that'd be really interesting Green lines, I would like to see design systems providing green lines Green lines are uh an accessibility indicator. So where a red line is you just saying I intend for this avatar to be 45 pixels wide and 45 pixels tall with a border radius of 50 So it's a circle like you're It's a traditional way of marking up a document to encourage or or be precise about the presentation that you want Accessibility is a similar Um similar push We're like, I'm gonna go in here and I'm gonna look at this little form input. I'm gonna look at this form button I'm gonna go and indicate that these three areas should be tab indexed this way And it's sort of a designer taking control of the accessibility experience and saying and just being very deliberate and clear about what it is They expect this to do And yeah, it's nice. It's the designers making those decisions as opposed to leaning on Front end to do it and how about mobile? Mobile is usually forgotten too, right? So we got components Or it's funny material almost to the opposite material is mobile first And then you sort of have to Expand on a couple things to get desktop to work most design systems I see these days are desktop focused and then they they start to squish things down As things go So I'd love to see mobile included more components. Yeah a good call How do you see the relationship between designer and developer evolving? I want to see them Um Communicating a lot more. Uh, John Mehta recently Um had a very provocative titled article But ultimately what he was pushing for is a a switch in strategy where traditionally he was Um a proponent of design led He was like, yeah The designer should be at the top of the company maybe even like making all the decisions It's like if you're do that then elegance is sure to be achieved and um That's successful in a lot of ways, but what he's seeing now after a few years of this is that engineering is really really important to engineering is um Required in order for elegant design to even be achieved. So what he's saying is no designer I'm probably gonna, you know butcher this title, but no designer Will be more successful than another designer unless they're integrating themselves richly with engineering the pitch is The designer isn't necessarily the leader of the show anymore He kind of says you should be a supporting actor or actress And even though that might be a little hurt some hurt some hurting to your ego You can still go see a movie where the supporting actor or actress was the star of the show There's just a relationship that needs to happen here. That's just richer and deeper integration designers need to be included more across the the wide array of um Design decisions that are getting made and a lot of those design decisions are made in code. So designers get in there Uh meet those folks Uh sit with them every day and try to have rich conversations about um the engineering side of things and and get ingredients They'll ask you and they'll watch your opinion I think I feel like engineers make a lot of decisions today That they'd rather not make and it's just because no one is there to do the decision making for them or to tell them what it is Uh, so they kind of have to make it up as they go. Um, Which puts the front end uh engineer into an interesting Predicament wait. I just thought of something else. This one is this one's huge for me. Okay So we have in the front end, especially the dependency graph is getting really popular And we have uh back end dependency graphs. We have c i c d dependency graphs There's no designer dependency graph. So what I want to see is like two really weird things. First off, I want to see design files Um pub sub where I want a design file to publish the colors and publish spacing units and like some of these like really um atomic units like think of tailwind tailwind is this phenomenally reduced um design system they have a file And I love it because it's almost like if you were to uh, did you see the movie? Perfume the story of a murderer. No. Uh, it was a creepy movie But he did something interesting which he was trying to distill the essence of beauty into like a thing that he could hold Um, I feel like tailwind did that they took a design system And they looked at all the different pieces and they started just like Organizing and and plucking them and and putting them into a nice list and I like that Jason object. I think it's not jason. Actually. It's javascript, which is another cool feature of tailwind. Anyway, it's javascript file Uh, that is the most reduced design system into like atomic units that I've ever seen And what I want to see is I want to see design files publishing something like that for a front end to consume and then I want a front end to publish uh data models and um other things for the design file to consume I want to see a bidirectional communication happening between design apps and front end development The I want designers in that dependency graph publishing values. This is like why I want them in c i c d like I want designers Uh reviewing prs I want them creating prs like imagine this like you're in your design file You change to a base color because it didn't pass a Contrast ratio, you know over here in some other test So you push uh, and you save a change you publish the change which creates a pr That other people can go review Designers making prs bypass the developer bypass the developer I think it's a decision the designers were already making it just was like this long winded feedback loop to get the work in there Like I've got other crazy ideas too, or I think um your design system should be dependency graph work Clearly articulates what dependencies it has and what dependencies it creates for other things to consume I'd like to see designers Making kubernetes canary deployments. I'd even like to see I pitched gcp on this. I think there needs to be a design focused cloud integration so that you've got You know really rich cloud dev tooling, but we don't have rich Cloud design tooling like why aren't there little design tabs over there that a designer can go in create an ab test Which essentially makes a canary kubernetes container that gets deployed to five percent of the users Now designers can be in control of features of the front end through some Epic and really cool cloud integrations Um, yeah, I want designers Well, here's a challenge. I don't know how to get designers into the back-end dependency graph I like pretty clear ideas on how to get the front end and how to get them in ccd Um, but I'd love it if like service designers were included in api design and somehow There was again a pub sub mechanism between these two or like the api team is publishing something and the Service design team is publishing something There's just so much So much opportunity in this space for designers to get more richly integrated Into the processes that are happening on the development side. It's not creepy. It's super rad Like I want designers doing semver Their design systems should be um versions just like the app And optimally they should match it'd be really cool if like the design system was at v 1.0 0.21 And so was the front end Right because it was a consumer of that version There's a lot of opportunity I think developers would like to have relinquished control over things like changing colors And if the system is built well changing the value in one place like this master file and having it Applied downstream to every button and everything else that depends on that color. I think they would love that I think so too. I think we just need some tooling. I there's a bunch of people working on uh apps last time I did research there was like 15 of them but it's sort of Developers taking a design system Building it and then publishing those legos in like a design app um, and so that's what we're seeing or is it's seeing a bunch of design apps coming out where developers are Saying hey, I've exposed the levers to these components for you in this cool tool where you can now go compose Our legos together and build something new and play in an almost production feeling like Design tool, but really it's still kind of prototypy because the code it's making is kind of you know, you know Anyway, I think we're headed towards a really cool integration layer there between designers and developers where They're going to be richly working with each other And designers will start to get more intimate with like minor details about a component like what a boolean is And why a boolean is different than an enum and why they should care and um, because those things are cool I don't think they're scary at all. Does visbug actually fit into that vision? visbug. Yeah, so visbug's goal is um, It's got a few of them one of them is designer developer communication You know a designer is often in their design tool land over here They've got an art board and everything's placed x y which made it really easy for them to you know Highlight multiple and drag and delete and had this like direct manipulation But what is a bummer about that world is that it doesn't translate well Somebody's always translating it. So it's like a front-end engineer I would receive one of those and I start looking at it and I start translating it to code And uh, what visbug does is it it sort of Takes what the developers are making and lets you inspect their work like it's an art board and i'm i'm seeing Folks that are having better Communication with their engineers because they can feel things there's like an empathy that's starting to happen because the complexity that is the front end Is now something that designers can contribute to they can go poke and inspect and modify And and experience why some of these things are complex or experience how easy some of the stuff is and so visbug is definitely In there in the game to help designers and developers communicate better It has some features where you know if you modify some css you can Show what changed and screenshot that and send it to an engineer. So there's an opportunity to even be like super articulate to a developer about what it is you need um but it's also Visbug has this other goal. So it's kind of so visbug is kind of like firebug for designers Its goal is to provide the same thing that firebug did for developers But it's something for designers So give me tooling that's familiar to me in the end environment That can help me make better decisions and And it does that I think really well it has a bunch of cool features too I'll just like breeze over really quick But there's there's guides so you can hover and see lines and detect measurement you can do measurements You can you can hover and instantly see any styles that are there And i've done a lot of work to make sure that those styles that you see are the ones that designers want to see You're not going to see all the the cruft. There's an ally or accessibility inspector same deal You click it you just start hovering on stuff and it'll tell you accessibility details There's margin and spacing visualizations now So you can hover and see padding and see margin Separate so the dev tools shows them together and mine shows them separate And I support multi-select so you can multi-select multiple things And um as a designer or an engineer see how the spacing is creating all that white space Like where's the white space coming from is it a margin is it pushing or is it So those are interesting You can also create or you can't create well now you can't create but you can delete you can cut you can copy you can paste You can double click any text to change it you can change any foreground color you can change any svg You can there's a position tool you can just select something and then drag it around the screen and totally ignore the document flow So there's tools to help you Work with the flow tools to help you work out of the flow It's about like you feeling unfettered in getting an idea out right there And and it should feel fun like I wanted it's almost like I wanted to break the glass for designers on a web page like we're constantly pulling down these magical pieces of paper and They feel so Far away for designers like I can't change that I'll just go back over. I'll just screenshot it. I'll come over here I'll add a white box and cover up that and you know like make this whole franken thing Uh and then ship that back to the developer and be like, please like can you do this thing here? Um, and I'm hoping that folks start to do that in the browser Which kind of comes into another value prop, but I do want to cover really quick. They like vis book wants to be more Well, I have this phrase it's democratize the DOM and really what that means to me is I want the web and designing on The web to be more inclusive I remember when it was easier and you know, we were on my space and Anybody could just go grab some css and paste it on the page and be like, oh That's fun. That makes my brain tingle in a nice fun way better and worse for better or worse, right? That's vis book's the same way right for better or worse people can go visit a page and and play But I think what that does is it opens up for children and adults to To feel like they can play like there's like it's now kind of a sandbox Which simultaneously I think we start to like when you when you start to learn by playing at first there's um There's just something different about starting that way than like going to school and like starting all serious So i'm hoping that this can help people who are serious, but also help people that aren't that serious um be more inclusive And I forgot whatever the second thing I was going to say was but yeah I mean there's lots of interesting features of vis bug But it's trying to help wants to Wants to be the design debugging tools des tools, perhaps Oh, I like that So what resources would you recommend for people who want to learn more about design systems and everything else we talked about? Yeah design systems. Okay, so who there's folks There's three folks that i'm a big fan of um dan maul unicravates and brad frost they're they're super articulate vocal public figures that are Um passionately talking about these topics and helping you ramp up or ramp down um Dan maul recently has been helping People not over focus on the atomics of their design system because you could get super like wrapped up in a button And he did this really funny thing at a list of part recently. He showed So good He showed a button on the screen and then showed four companies that that could potentially be the button for and he's like Whose button is that and everyone's like Oh I don't know maybe that one. It's it was a blue button right and so The point was we can over focus on these little things and that's not your brand and he's essentially pushing you to real like Step back a little bit and determine like what's unique about your business and and make Um make components and design systems out of those like your value prop Like how are you different because the atomics are atomic. Um, I thought that was really nice Yuna has a bunch of really cool things that she's been pitching as well She's pitching accessibility in your components, which I think is really healthy And she's advocating for maybe you don't need one So sometimes and this is something I'm a believer in too, which is often we want to be The top dog like now and so we go do whatever the top dog's doing. We're like, all right. I need You know legendary armor. I need a sword of the gods of the 10,000 xp, right? And so we're like we show up and we're like level one But we've got all the gear and we're like this will make me good, right? And it does to a point But it can also be a bunch of baggage and like you can't even make it through the door of the first dungeon Because you're like too covered in gear, right? You got like magic shooting out of each finger So I like that advice too, which is like Look at the phase that you're in as a team like the phase that you're in as a product You know notice that Gcp, which is a very very large product has an entire team dedicated to this now It's that complex. There is absolutely value coming out of a design system But you got to look at the ROI like how much are you putting in versus what you're getting out? And I think that's what that warning is is like you can spend a whole lot of time on the Atomics of your design system you can spend a whole lot of time making it really robust and then Nobody uses it. So you got to make sure you have customers and Anyway, those three folks are really good at to go Look up and listen to they've got plenty of material for you to study. Well adam This has been great. Thanks for coming on the show. Absolutely. Yep. That was really fun You can check out the links to everything we talked about in the description below Thanks for watching and we'll see you next time You