Supercharged Design System: Enhancing Widget Cataloging, Testing, and Collaboration with designers

I'm Lucas co-founder and CEO of widget book and today I'd love to talk with you about Design Systems so you're going to learn how you can supercharge your design system by widget cataloging testing and also to simplify the collaboration with designers but first of all I'd love to start the presentation with a question who of you has already heard about widget book okay amazing barely everyone and um who of you has already used widget book nice and um who of you is using widget book right now in production amazing do you want to give the presentation no of course just joking I'm going to proceed so um all of you that don't know widget book yet U we are open source and we're building a flatter tool from flutter Developers for flutter developers um we are super Community focused so um we already participate in and organize flutter events um for the past few years and besides organizing um flutter events and participating in the community um of course we're also um building a tool that's why I'm here today and if you ask yourself the question okay like why should I bother listening to Lucas like why is he even talking about Design Systems that's basically what we've been doing the past two years so um we have a we development background um use storybook JS before um a lot and when we switched to flutter there was really no story book solution available so we build it ourselves and for the past few years um we've building widget book together with um very big flutter companies with small flutter companies um and basically we've seen a huge variety um of different companies that we support and I'd love to share those experience with you today and for example we've been having a great collaboration with the Google team so we've been featured um at the flutter forward conference um this January from Google that's maybe why a lot of people from you know us but without further Ado what are we going to do today um today we're going to learn how you can build your own flut design system system with Widget book how you can quickly test your widgets in different use cases with our add-ons and knobs and then also how you can simplify the collaboration with designers by being able to share your widgets with them and then also simplify design reviews and first of all I'd like I'd love to take you on a journey so um how does app development usually work usually it starts with the designer so a client has an idea and the designer's job is it now to first of all satisfy the client by bringing their ideas to life in a design for the designer can be quite annoying process and at some point when the client is finally happy with the design the designer can create his or her design system and the designer is usually using tools like figma for it um just a quick question for you um who of you is using figma in their processes who of you is not using figma okay at least at least a few um but the great thing is that tools like figma really help the designer building their design system it's fairly simple for designers but now it's our job as a developer to do the same in code and that can be quite challenging what usually happens is that flutter companies build something that they often refer to as gallery apps meaning inside your app um available in dbug mode you can access the screen that basically captures all of the UI components that you have and that you want to reuse plus the Styles and while that can definitely work over time it gets quite hard to maintain with a growing number um of developers on your team and it's only very limited in use in comparison to the flutter design in comparison to the design system in figma because you don't have the opportunity to see your different flutter widgets in different themes you don't have the opportunity to see your different flutter widgets in different Tech scale factors or in different device sizes or on different languages all of that is possible in figma but not with your gallery app and therefore building your own flutter design system is really quite difficult and I'd love to show you today how you can really simplify that by using our free and open source widget book for that so let's jump straight in the first thing that you would do is you would include our um widget book packages in your flatter app and your pops ml file and um no worries there are three packages but they all work together super well so as you can see we're including not only our main widget book package but we're also including widget book annotation and widget book generator so we build an annotation based code generator that works very similar to freezed and um thereby you can use annotations like for example our widget book app annotation um that you basically just include um in your um in your app rot and your main. Dart file when you're using a single package approach or for a multi package for a monor reper approach or a multi package approach however you want to name it um you are creating first of all a new package a new widget book app package there you have a new main doart file um and then there you're annotating your um widget book app and once you did it you let the build Runner run and what happens then is that the entire structure for the widget book is being generated for you so all the boilerplate code is being done by us and what you can then do is you can basically tell the widget book with the widget book use case annotations okay which widgets do I actually want to include in the widget book and in this case we can see that um the use case annotation comes with two um parameters that you have to include name and type name in this case we say Okay um the use case is with green color the type is just the widget that we'd like to include in this case the container and then we're defining a method um in this case the green container use case we're returning a column here that is repping our container and then we have to mock the required parameter in the case of the container it's the color so we're um defining here that we want to see it in green and once we do this and we let we let the P build Runner run again we can we are then able to run the widget book and to show you all of the widgets that you know included um we recommend you to do it uh with a desktop build because then you have the chance of um having hot reload so that you can also build your widgets quicker with Widget book and not only see them um after development but you can of course also run it on the web for example and then there it is and what you can basically see here on the left side that all of the widgets from our app were included and you have really a nice overview of the widgets of your app and if your app gets large you have also a search bar available that lets you um that gives you the opportunity to precisely search which widget you'd like to test and that's already it so um thereby you can really quickly build your own flutter design system with Widget book but as I basically mentioned um to make it even better uh than your gallery app um we have the chance to allow you to quickly test your widgets in different use cases and how that looks is basically as the follows so first of all like the problem is that apps usually nowadays get more and more complex so your IX design is more and more important and users have a lot more or a lot higher standards than they used to have before and basically now we need to support our app with multiple themes multiple devices multiple languages um who of you in this audience is developing the app at least on two different themes who is using um at least two different devices that they tested on who is having more than four more than eight okay yeah there there it usually stops um but already quite a few and with languages who is developing the app um supporting for more than one language who got more than three more than six more than 10 okay yeah here it stops but as you see like quite a lot of use cases have to be supported um and we also we also have to test it as a developer and to not turn into a skeleton and basically get very old until you finally test it we can do it with Widget book so widget book can really become our superow here of being able to very quickly test our widgets on the different use cases and first of all we can do it with add-ons so basically just where you're annotating your uh your run app command you can include our add-ons and the add-ons are very versatile so first of all we have the option of including theming in widget book and what you're currently seeing here is that you can include a custom theme in light and dark mode but we also support material theme support or also CER it really doesn't matter what kind of theme you're going for it's easily supported with Widget book and that's how it looks in the end so we can see our tweet widget here being quickly tested on both light and dark mode but we could also do it for text for text scale factors so people like me waking up in the morning don't wear their glasses already that we can still properly see if the widget looks great um we can easily check it also on different text scale factors and the same then applies also for languages so we can easily test our widgets on different localizations in this case we have the example with English and Arabic I try to be basically as Extreme as possible because um as you know uh Arabic um the orientation should also change and also that is supported in widget book so you can not only um take a look into okay um how does the language input change but also how does the orientation change both of that is supported with Widget book and you can then also test your widgets based on different device sizes for responsiveness in our case we now include um support for iPhone 13 or iPad but you can really add whatever device to widget book so pre-built and widget book we support every Apple device that's available on the market we try to do it with um Android as well but as you can imagine you can hire one engineer fulltime for a year to include every Android um device therefore we give you the opportunity to also Define your own custom devices so you can go really crazy here if you like um but for iPhone 13 and iPad um that's basically how it looks and you can also um take a look in the orientation to change it from portrait mode to landscape mode for example and that's it regarding the add-ons but there's even more we also have knobs so what we learned now with add-ons is that we can basically test our widgets against the global properties of the app but what about widget specific properties that's exactly why we buildt knobs so how knobs work is we have this use case example here where we want to include a UI component in widget book and in this case the UI component has one required parameter called text and we got to provide a string now and while we could just include lauram ipsum um directly in the text we could also use a knob here and knob allows us to dynamically overwrite the value in the widget book UI and how knobs work is you're just using the context do knobs do data type in this case string but not only string is supported we basically support every data type that's available and that's how it looks on a widget book so you give everyone that is that has access to widget book the power to dynamically overwrite the values in widget book and that works for text to test overflows that also works in this case for example for the amount of replies or the amount of likes you get on your Tweet but that also for example works for the amount of images you'd like to include and it is really powerful to test hard to reach use cases in your app because what usually happened in the past is we had to ship the widget uh we had to ship the app to someone to the demo app then check it on the mobile on the mobile phone we then had to navigate to that page to even build that uh tweet then we had to come up with a text we had to come a few images and then post it wait for it to be posted and then we can review it takes a couple minutes in widget book only takes seconds and that is only in one configuration meaning in one theme on one device in one language on one text factor and these are only four add-ons you can even include more so here again it can get really crazy it can get become very chaotic and what usually takes hours in testing yeah only takes a few seconds with Widget book and that's basically it for the open source package so the benefits that you get for free with the open source package are you can build your own design system with Widget book and you can very quickly build it on and test it on all those different uh configurations and if you'd like to get started with it that's the link to our docs and you can basically get started for free otherwise can also do the challenge at the booth but that's not it for the talk I also promised you that we can uh simplify the collaboration with designers so let's wait for now and let's um focus on the design review as well and what is super important for the design review is basically this situation happened to me so many times in the past I built a UI I was super proud of it showed it to the designer and the designer really just burned it up was like no I hate it who have you also experienced that in the past yeah Al basically basically everyone and and um the problem here is really that um it's quite difficult for designers and developers to collaborate because first of all we as developers have to enable the designer to do a precise review so what usually happens is we have to Define this uh demo app to ship it to designers designers then have to navigate the demo app if they don't like something they do a screenshot then they add comments and then they post you this screenshot with a comment together in slack and then it's like up to you to do something with it usually it's not very clear we do another iteration another iteration another iteration yeah and at some point it becomes just too frustrating so the question is like how can we really efficiently collaborate with designers and that's why we built widget book cloud and with Widget book Cloud you first of all have the chance to host your widget book on all the different branches that you have in your repository and all the different builds and then secondly we also give you the chance to only preview those widgets that actually changed because while it is great to see the entire widget book with all of the components you do not actually need to review all of those components all the time what you need to review is what changed and what was newly added and what is also frustrating for designers is they also have to go in the figma file and have to check okay which is the design that um we have to check those widgets against and they have to find it they have to open it somewhere and with Widget book we basically just com coming these two approaches so we allow you to see on the left side how does the widget look in figma whereas on the right side how does the widget look in flutter you have then the possibility in the bottom right corner here to add a precise comment if you feel anything is off and you can then on the top right corner either accept or reject this implementation by accepting the implementation amazing the check that we running automatically in your um pull request turns green so we're automatically checking if all of those widgets have been accepted or not if they were rejected bad news but the good thing is at least we are prevented from merging here so what will never happen again is that we ship UI to the client that was not properly implemented and also at this point in time we really focused just on the UI we haven't included much logic yet we haven't included much data binding yet it's really just a core UI so we can like very quickly iterate at that point with the designer and then once it's approved then we can start building a more complex widget and therefore it also doesn't get so frustrating if we have to change something so that's how widget book Cloud can really help you to keep your design and code in sync by sharing widget with designers and simplifying Your Design reviews and it's one of the last talks today so we already get getting in party mode for later um but in the end it really helps you collaborating with your designer and um yeah making both of you happy and really enjoying working together so if you would like to try widget book yourself we have a widget book challenge at our booth that you're very welcome to join um but you can also just request either Early Access to widget book cloud or get started with your open source package everything is provided on the website I'm Lucas coone and CEO of widget book and we really want to help you bridge the gap between design and development thank you very [Applause] much yeah so thank you so much we actually have some time for questions if there's any um so I I'll repeat the question first could you integrate the the widget book cloud with jir so um what I think you're meaning is that if H for examp AC the acceptance stuff yeah so um it is not let's say natively supported but what works is um and how other companies are already using widget book is um for example if you're using GitHub as a git provider um once you accept something on widget B Cloud it's going to be checked in GitHub and there's a GitHub integration with Gyra and um that's how you can like Leverage that integration and therefore I would boldly say Yes um there's a z integration yes so one more question um the question was could you self host the widget Cloud uh yes so what you definitely allowed to do is um you can just self-host your open source package um and then you have it hosted um uh in your own environment but what is then not supported is you don't have that review feature where it's like analyzed which widg check changed you don't have the figma integration um so that's something you don't have when you self hosted um the question could also refer to um can you basically self host everything that is available on widget book Cloud on your service and unfortunately that's not possible yet so so far um we decided to um really build the features um and improve the product and build a great product as quick as possible and therefore we haven't yet um worked on a self hosting solution So currently it's just a usual Zas solution um but we're definitely looking into it in the uh in the future and um we can definitely um if the um case is is big enough um also talk about um custom solution there anyone else or should I take a question because I have a quick one yeah sure so the build Runner if you have a monor repo does it work with like creating One widget book or is there going to be multiple no it's one widget book perfect yeah yeah okay okay thank you so much thank you Lucas and thank you all for listening thank you

Channel: Widgetbook

Views: 723

Keywords:

Id: 32WXIRtmqJk

Length: 20min 8sec (1208 seconds)

Published: Tue Oct 10 2023