 Sometimes I like if you want you could I think we should ask a couple questions so sometimes I like the while people are finding their seat ask a couple questions so I feel free to what is your astrological sign no no no question no that's not the question so all right I want to know kind of just roles here like who is a developer okay so lots of developers okay well so I might be slightly more Leo okay not very many Leo's what other type of roles only one role what about designers okay all right that's some designers what about Scorpios what about strategists okay what about project managers producers what about people who cannot be classified very nice it was a trick it was a trap you fell for it we do have some chairs you might you know you can come up to the front you might need to turn your chair around so you can actually see what's going on but go ahead we're gonna get started in a minute if you want to be non-committal you can hang in the back I do that sometimes but trust me you're gonna be blown away you're gonna want to stick around yeah yeah trust me you do have some chairs over here if you do want to commit you know if you give up you can always just check your email but I think you'll want to listen do it to do anything with that I mean it's definitely on yeah I might do a mic check on that one one two yeah well I know the mic position isn't great yeah awesome thank you all for joining us today we know you have a lot of options when it comes to sessions and we are really thrilled to have everybody here to talk about ignite which is our approach to design systems and faster site building so we are from media current and media current is a remotely distributed open source product agency we define design and deliver websites platforms and digital experiences and those websites platforms and digital experiences are backed by open source technology but for us open source is about much more than the software it is about the way that we work and the way that we share the way that we work which is what we're gonna talk about today my name is Elliott Maurer I'm the head of product at media current and I am joined by Jay Calicott head of engineering and I am kind of the tech lead of ignite and I've been working with media current for a long time and just really excited to talk to you today so our agenda is as follows we're gonna talk a little bit about what ignite actually is and for those of you who have a steps stopped by our booth already and got a kind of sneak preview of what ignite is please don't know spoilers we'll talk a little bit about how we got here and how the product has evolved for those of you who have been in the Drupal community for a while and familiar with media current you may have been familiar with our product called rain and so we'll talk about how ignite is an evolution of that then we'll actually go into the weeds of how ignite works from a design and a development standpoint as well as sort of the unclassifiable and then we will wrap up with a look at where we are going with the product and open it up to questions so ignite came from a couple core questions we were asking ourselves as an organization we are a product agency we work with clients of all kind of scales and sizes we do projects constantly and yet it felt like the second we were kicking off a project we had this kind of collective amnesia how do we do this and why it was feel like we're constantly starting over every time we kick off a new web project so I leave the design team immediate current and realistically we ask ourselves how many times can somebody design literally the same component without losing their minds we know that most of the websites that we make like as cool and as snazzy and as interesting as they may be and they are they're awesome they often have the same kind of core components and why are we creating those core components again and again and again from scratch why are the design and development teams always mad at each other why are we constantly nagging development to fix the spacing why are the margins wrong what kind of grid are you using why is that color wrong could you know what a tight face is and why is development always saying why is it like that in figma so we wanted to find a way to kind of bridge the gap between design and development and make teams work together more more cohesively and make the work much smoother we really wanted to figure out how we could start building faster like we love the world of conceptualizing design and and thinking about product requirements and working with our clients but we really really love what we're really passionate about and why we exist in the world is to build websites and to build them faster and more efficiently so our answer to those questions is ignite theoretically we think it is and ignite is an end-to-end starter kit that allows you to deliver high quality digital experiences that are faster and or you'll deliver them faster and you will do it more efficiently without compromising design or development we have released ignite as an open source product so everything you see here today you will have access to so we talk about you know it allows you to do it we do mean you this is how we are working on our projects these are the tools that we are using to move our work forward but we want to share this with the broader community we want to see also what you make with it so what is ignite made of there's three main components and we'll go into the details of them a little bit later on but it starts with a figma UI kit so we really wanted to start from a design first perspective we wanted to look at what are the commonalities across most of the sites that we build what are the core elements what are the things that we're building again and again and again and how can we build them one time in figma and build them in the sort of platonic ideal of those components how do we create sort of the foundational elements of a design system so that we can create a design system with our clients but we also don't have to think about rules for typography rules for color rules for grid and spacing we want to have something that we can start with and we can tweak rather than starting with a blank canvas then we took all of those components that we built in figma and we actually built them using bootstrap in storybook so everything that we have in our figma component library and our UI kit is already built in storybook and then we went ahead and configured that with Drupal so realistically you can go from zero to website and the idea in the time that takes you to maybe design a couple components you want to take this on sure or you want to do that maybe i'll i'll go ahead and touch on it once we get to the history let's just go into it okay so as i said it starts with the with figma so this is our figma UI kit it is a figma community file how many people are how many folks in the room are familiar with figma as a tool sweet okay so this is a figma community file that we just released last week and it is the core of ignite so as i said we have the basic system for colors and typography shadows and a responsive grid this is using the bootstrap grid system and the idea is that you can take all of these pieces that we have created you could take them straight out of the box you could update your content put in your images put in your copy and you would have a website that looks good we wanted it to work that way but you can also come to ignite with your colors your typography your iconography your image system add that to what we've created and you have something that is on brand for you and super scalable so it's break it's broken out into a few key parts this is the sort of foundational styles library and we are using all of the native figma tooling so we are using styles we're using figma components we're using auto layout we're using boolean properties we're using content layers we're using everything that we possibly can to leverage the best of figma we also have added some some of the best in class we believe figma plugins to the project so we're using things like batch styler which i'll show in a second we're using iconify we're using eight eight shape specs we're using an amazing aspect ratio plugin that we wish we had developed it's the bane of my existence and we really wanted to find kind of the best pieces of the puzzle to put them together and package them something that you can take and run with so this is our styles page we're using the material design library this is an open source library we're obviously big fans of open source things but you could swap this out with any open source library or if you have a custom library you can also swap that out here so we created the concept of base elements and editorial components we didn't really create it but we we wanted to name it we wanted to separate out the things that are kind of core base elements across an entire site your buttons your badges your modals your cards your headers your footer footers your form fields we wanted to build them once we wanted to build them as perfectly as possibly could because we would ideally not want to build them again so all of those things are kind of specced out here across these different pages and then we've combined them into editorial components so what a content editor actually puts on a page we have everything from a variety of hero options 5050s promo banners accordions card lists carousels galleries on and on and on and then we have laid them out in this is actually the layout for our marketing site which is also the demo for ignite so i'll show you a little here how this works so we have two pages the desktop and the mobile page for the homepage so i'm going to go into our styles page and dial up the batch styler component here or plug in here and let's say that i want to start with typography so we have 38 text styles and i will select them all and i'm just going to go ahead and change our font family to Roboto slab so now they are all updated we can see them here on the typography slide they're all updated if we go to our page template now we have a new typeface so it's starting to feel a little different if i go here to the color styles maybe i don't like this black and blue situation i'll go back to batch styler and i'm going to change the primary color to this navy blue and i'm going to change the secondary color to this kind of salmon color so you can see that those updated here on our color guide but they are also updated on the page itself so now i'm looking at this and i don't really love this component so why don't i swap it to something where i can have the image on the left maybe that works a little bit better for me because i have a nice balance back but the rounded corners aren't really working for me either so let me go into this base component here editorial component people with your backwards scrolling and i just want no corner rounding so now i have something that's starting to feel different it's starting to feel maybe in the direction of my brand i can go and update any of this content i can replace my image assets and i have something that feels true to me and true to the product that i'm making or the brand that i'm representing everything is editable so the idea really is that you start with this but this is not the end all be all you want to take this and unlock the concepts that you're going to create you want to create something that has never been seen before but you don't want to recreate the stuff that all core websites have so what we really wanted to do was to sort of take the things that we you know not really automate our process but like free up our time so that we can have all of the the foundational base element seen at a thousand time things done so we can look at things like scroll interaction we can look at things like interactive heroes we can look at things like embedded i don't know what we haven't even thought about it yet but we don't have to start from absolute scratch we can start from something that is good is well built and will deliver so that's the thing yeah pull up the slides again and then we can get into rain in the history all right so hey everybody so i did want to talk a little bit about how we got here and so i'll just give you a brief kind of history so you can know kind of the a little bit more context of how we arrived at ignite which we have today so in 2019 we had the first public release of the rain distribution and back then it was mostly focused on the back end reinforcing some standards and best practices and so we shipped with some we bundled some modules and configuration we did do some content modeling like content types and paragraph types but we had been using it even earlier internally and we because we had an organizational goal that we we wanted to standardize our you know our developer practices right so we're an agency we have dozens of developers working on client projects at any given time and we wanted consistency and so it made sense that we should you know bundle some of some of this work together and for me being kind of the tech lead of this project this whole time you know it sounded great but i'm like okay this is going to be tricky you know it's like we have architects and senior developers they they like to do things their own way so whatever we built we had to make flexible otherwise they just wouldn't use it they would complain about it and so you know we we started we started basically pretty small so a number of years ago we we started real basic and then just evolved with it over time and so after that first oh one other thing i want to mention so another another part of our approach here was that we wanted to we wanted this always to be a starter so from when it was raining to now when it's ignite this is meant to be a starter kit that's where it has the most utility is on a new build you know you could kind of attach it onto some existing build somewhere but that would be more work and that's not our main use case it's meant to be a starter kit where it really accelerates that initial phase of the project and then you own the code you own the configuration you're not married to any upgrades or things like that and then from our perspective uh as um as the maintainers we don't want to have to deal with making things backwards compatible we want to keep on iterating making improvements so this allows to do that like you saw you know Dries in the keynote was talking about you know some new features in 10.1 if we want to work in some new features you know uh we want to be able to do that we don't want to have to figure out okay what's the upgrade path for sites that are already using this so i wanted to make that clear that that was part of our approach so 2019 our first release of rain uh sometime after that we bundled it with our garter distribution which we also maintain that added some security features and then uh once layout builder got a little bit more stable and polished and there were some different contributed modules that made it a lot easier to work with we made the move over to layout builder and that tends to be our default approach uh clients really like the the visual tool and i'll show you that here in a little bit but it really wasn't until a couple of years ago that we started to spend more time in the front end so just to show you a little brief history you know again we're an agency that a lot of times the front end developers prefer to really start with a bare bones theme that uh just had a few things and they like that kind of clean start state and so they would use a theme generator tool that we've you that we've had for a long time and that was the approach but we knew we needed to do more so we started adding a stall guide and some components and integrating those with layout builder and that worked out pretty well and once we started doing that we saw this was a really this was an area really right for like improvements right lots of opportunities to to make things better to make to add like efficiencies to our whole process so we started really pouring in more time to that and you're going to see that here in the with our ignite release so last year we moved over to storybook and that was great and then this year the LA it's already been talking about it some we just like rethought everything so uh we definitely wanted it to not be so much a developer led project anymore we really wanted it to lean more into the creative side of things and so that's why we have all the figma stuff and storybook and everything else and so just really excited to show you this really awesome open source project here so how does it work i'm going to pull up the demo okay so i've got this pulled up but you can pull this up on your own laptop if you want to just kind of surf around while we're talking and have something to do while i'm talking but yeah this is our demo ignite.build is the URL and it looks great i think you've already seen some of this in the figma designs but so again it lines up with what was designed in figma worked a lot with their team on this and so before i show you some of the triple features i wanted to pull up the storybook and we've got a public link for this as well so some of the links are in the demo itself but yeah so we we build out the storybook we build out the demo made sure that we had good alignment especially with the editorial components so the editorial components are what our layout builder blocks on the Drupal side and some of these have some different configurations to them like hero has some different configurations and so i did want to cover a couple of kind of light technical points here okay so first of all you know storybook is it's not trivial to integrate storybook and i won't get into the weeds but there's some different approaches some i've seen some other agencies take um we wound up just there was a couple plugins that that would allow us to render Drupal templates inside a storybook and that ended up for us being the kind of most straightforward approach and so we just took that route and since so we're able to render Drupal twig templates in storybook and of course Drupal already knows how to work with twig templates and so i mean it was a pretty straightforward approach for us but the bigger thing other than storybook which we moved to last year is standardizing on bootstrap 5 so for a long time you know we had resisted kind of adopting a single framework we would sometimes we'd do more kind of vanilla custom stuff sometimes we would use a framework based on the project but it came to a point recently we're like we need to standardize on you know a system right and so we evaluated tailwind and some others and you know tailwind's great there's lots of good options but bootstrap won out for us just because it's more of a full you like it versus something like tailwind is more like a framework and so once we you know talked with designers and and knew that this wasn't going to limit our design or creativity in any way it like made a lot of sense for us so just to cover a few more quick benefits so the main benefit for us is bootstrap's been around a long time it's still the most popular html framework we our developers have worked with it before we built sites in it you know a lot of times developers we hire have worked with it before and so having that familiarity was really big because we didn't want to you know shift paradigms too much all at once and so that was big and then you know of course leveraging something like this that's class driven really cuts down on like the custom work that you have to do so that was big and then even on the optimization side since we no longer have to depend on jQuery we're able to use bootstrap's javascript library which is more lightweight and we also pull in the different bootstrap css through different libraries so druple's pretty efficient of just pulling the css that it needs and so things are a little bit more optimized but yeah we can if you want to dive into some more of the technical details later on in q&a we can certainly do that i just wanted to give you some high level on that but let's go hop on over back to the demo so this is our ignite demo now just the way things work is so we've got a template that just has everything i'll show you the documentation a little bit but this is our ignite theme and the ignite theme leverages it's like the compiled version of our theme generator generator so if you're working on a new project we've got you know a couple steps for creating a new theme and it's great it embeds the storybook and it gives you a couple of options and it spits out all this code and it's easy to work with well we also want a really good kind of demo experience so if you're just wanting to try this out it's easy to do that we even have a get pod integration so this is just the ignite theme with like every the ignite theme is just like the generator with everything turned on and what's really nice about this i think elliott alluded to this a little bit is like we're not doing too much crazy stuff here we just a lot of this is just customizing bootstrap variables we don't have a lot of custom markup outside of just you know standard sort of bootstrap markup but when you add you know images update the fonts and spacing you can you have a pretty good looking site pretty quickly and so that's really nice um oh another another thing to mention in terms of approach so you know a lot of times you'll hear about no code low code kind of solutions like this could be that but that's not really our main focus right it's like we're an agency we don't lack developers so we want something straightforward it doesn't have to be like um you know no code i think dress was talking about you know ambitious site builders who will do some code it kind of falls in that sort of realm where it's like okay want to be straightforward enough where if you're a developer you know site building you know some theming you're not like a brand new beginner but you don't have to be advanced there's nothing that we're doing that's crazy we've just tried to front load a lot of the work for you right so um yeah so we've done a lot with that let me go ahead and show you oh one other thing is we've got the gin admin theme which looks great we ship with that and then let's take a look at layout builder all right so layout builder has um i think we've got about we've got 16 components that we ship with and again this is from our discussions with the design team strategy like hey let's i know we've been using rain for a while but let's just like put all that aside let's make sure we're doing that we're fully aligned with what you're delivering to clients we'll build what you what you think are the most important things right we're not going to try to solve every problem that's not the intention we want to try to solve the most common problem so we can spend our time on the things that are different right and so i think we've got a really nice layout builder integration uh you'll see if you've looked at other like drupal distributions sometimes it looks a little bit different if you've ever set it up on your own you know it's a little bit of a pain and so we tried to take that pain away and just like go ahead and pre-configure it for you some of these will have some different you know a simple kind of layout options but it's just meant to be a toolbox that you can start with again you own all the code and configuration so it's yours to mess with and so this is our layout content type that we ship with we also have a couple of other content types so i've already pulled this up but we've got article and we made a few you know opinionated decisions on it but we want still wanted it to be pretty basic we wanted something that looks good as ellie was saying like looks good if you just wanted to like install it and make very little changes it's going to look good but we also wanted it to be flexible so there's our article content type and then page isn't really i mean we've got basic page there's that all right and sue that's our demo now if you're wondering okay how do i set all this up we've got documentation i don't think we have a link to this public yet but another way to get to this is we've got a project page on drupal.org so if your developer that's another place to go is drupal.org slash project slash ignite that's got a link to the getbook documentation getbook documentation has links to our public storybook our ignite.build demo if you're familiar with gitpod.io it's an easy way to set up a sandbox just like on the fly and a click so this has some steps for how to set things up in terms of if you're a developer it also has some end user documentation for like adding content and blocks and so we think it's a great way to get comfortable with this we do plan on adding more training content like videos and probably some like in-person you know workshop type stuff at some point and so but this is definitely enough to get started so and then the last thing i'll say is we're just really thrilled that this is fully open source from the figma to everything that's bundled here you know we're an open source company we're a services company this was built for us in a sense to deliver the best products for our clients but in the spirit of open source it makes total sense that we would it's built on storybook and everything else that's open source we should release our work so that people can make use of it maybe they want to contribute back and make it better that's that would be great love your feedback on all that but if they want to just take it and make something you know new that's that's great too that's just the spirit of open source so extremely excited about that and excited to get your questions later and feedback so i think that's the one to talk about you ready so to finish us up here um right because i'm sure um so we're at Drupalcon and we are launching Ignite at Drupalcon but Drupal is really just the beginning for us when we look at our roadmap we are currently working on developing Ignite for multiple platforms including Contentful and WordPress we're looking into or actually working on decoupled versions of Ignite so we can talk a little bit about the different architectural changes that we are making to support that and we are kind of anxiously awaiting Figma's upcoming config where we are pretty sure they're gonna announce native support for design tokens and that will make our Figma to storybook kind of integration and sort of seamless updating we've been playing around with the token studio plugin in Figma if you worked with that at all it really it's it's very fascinating and very cool but it takes all of the Figma styles and custom styles that aren't saved in Figma like corner radius and it generates basically just a JSON export that you could use directly so we're kind of hoping that if um if tokens are coming natively to Figma we'll be able to kind of draft off of that and be able to make a more direct connection between the work that a designer does and and the development work in storybook and then it would not be 2023 without talking about AI we are looking into a potential solution for having the Drupal components kind of or the what is it the sort of the the base configuration of a Drupal component to kind of be spit out by AI obviously we're not going to go direct from a generator into a live site but something that kind of gives you that foundation really what we're looking for is like what's that first step if we can offload that first step to somebody else or a number of services we're looking into ways to you know offload that first step so we can work on the cool stuff do i get that right yeah so and let me expand on that just for a second since we do have time i think um yeah so there's so many cool use cases for AI um we're just only beginning to really scratch the surface but one i think good use case as ellio was saying is um when you so we've got our like 16 different components but we're always designing new components so let's say you want the designer comes up with a handful of new designs for new like layout builder components right so there's a few pieces to that there's the there's like the storybook bootstrap markup there's the authoring because you got to create like the block type and fields on that and then there's some integration step and so uh just already doing some experimentation with chat gbt and knowing that it works really well spitting things out it seems it would be straightforward enough to just have like a command line tool or something where maybe you answer a couple questions and it spits out everything it's already oh it's already aware of what you have in ignite and it it spits things out puts them in the right directory right file names and even if it's 80 percent there that could save hours and hours of time really and so that could take something so that you're working on maybe it's 80 percent you're working on the last 20 percent to get it perfect and so we think uh that's an example of a use case where a i can really help us out so i'm excited excited to pursue that some all right who wants to be the first person to ask a question you start hi i'm curious you showed a little bit of the admin interface or the editorial team so the editorial so we're using gen admin now the layout builder does share the same theme so it's going to look consistent because it renders in your theme but we and we might put more we might put some time into the admin at some point is adding some we're in discussions about that um with with rain we did a little bit more work on the admin side of things and found that it was you know not really worth the effort so um you know i know in some projects we have been tasked with you know the client wants some extra features that just don't really exist in the way they want them on the admin but for for now the focus is hey let's really devote a lot of time on kind of the end product as far as like the theme and let's just use the best in class tools in terms of contributed modules and themes for the editor experience and so it's mostly just configuration bundling modules and maybe we'll put some custom kind of work and add some cool things in the future you know that's a maybe but right now it's it's not like our top focus i don't think yes well yeah so you've got composer manages your dependencies and so yeah i mean you're going to be you're going to continue to leverage those dependencies as long as you want to you can always detach from ignite and and you know uninstall those modules and do different things but the assumption is that you're going to want to keep up with those uh tools for for bootstrap the way we're pulling it in is with npm and so like bootstrap just came out with 5.3 so we'll probably update it soon to work with 5.3 i gotta look through the documentation see the stuff that's changed but i really like it because it's the best of both worlds where we're pulling in the source files some of them we just use completely as is some of them we might tweak a little bit and then for the for the developer who's using this on a real project they've got the ability to override everything trash things change things like they're they're working with the source files so you leverage as much of it as you want you can keep up with the npm updates if you want it's you're in control of everything so i think it's like the best of both worlds as far as leveraging a lot of what bootstrap gives you without you know being like tethered to it you know where you can't customize anything if that makes sense we'll need to configure all the variables that you change like the color that you change on sigma but then you need to go to the code and change everything right so there's a way that you and be sure that you export everything or did you update all the variables that are required yeah right now we are it's a manual update but we are moving in the direction of we're having like a philosophical conversations about bootstrap variables versus design tokens and you know there's a conversation about whether you know should we be using purely bootstrap variables or should we transition over to design tokens purely now we on the design side would love to transition to design tokens like that just makes so much sense to us because we feel like you know we have that it's more tightly coupled like we can make a change we don't have to worry about too much of the of the impact that we're going to make on having to have you know resources actually make those changes manually so we we're really interested in like what that shift will be we don't have it a hundred percent figured out so right now there is like it's not a one-to-one match but we are really you know whether figma supports tokens natively or whether there continue to be products like the token studio i think that's a shift that we want to make because the idea of just like you know we feel very strongly that we're not in the designer should code camp but we are in the designers should have a fundamental understanding of the implications of their of design decisions and so i think that having an understanding of how tokens work it helps you have the understanding of the implications of design decisions doesn't mean that you can't make design decisions and that's the thing about this like it doesn't mean that you can't change absolutely everything that you want like you can you want to change the order of elements on a component go for it we're a hundred percent behind that but just understanding like what what are the implications of those changes what requires more manual work what doesn't and if we can find a way to automate that simplify that and and leverage like the best in class tooling we want to do that so and i wanted to tech on to that so that this will be kind of to me it will be one of the top priorities is figuring this out because it's it's it's going to be what people want which is we want to export some configuration tokens whatever from figma and so we will use some tool whether there's some that are already out there in the wild since bootstrap is popular there's already some out there that'll try to make sense of the figma export and then convert it to variables and things like that so we'll either use a plugin like that or maybe something that we create or modify but definitely the goal is to especially things that are global settings fonts gutter margin spacing breakpoints things that are these global settings we want it to be where it makes the design handoff even easier because they just say export here's the export we transform that into something that look that becomes variables you know bootstrap being having such a good like variable system really helps us out there and so that is the goal i think that could probably happen this year where we figure something out even if we start with those really basic things i think it's easy enough to to envision how that would work and then like we're saying just make the developer handoff even easier oh we got one we got a couple okay yeah so we are we are working on the process of sort of like productizing this and i think that's super exciting so you know the way that we created or figured out that initial list of components was like years of everybody working on all these different sites and that gives us 16 what we are seeing and having regular conversations about on on the design the product team is like what are you seeing out in the world we've had a lot of sites recently where we've been using a masonry grid and so now we have a masonry grid component that we've built for a couple sites why don't we take that masonry grid component and add it to ignite so it's really going to be an interesting mix of like what do we see in the market broadly what do we see on our client projects i would like us to get into a mode of probably like quarterly updates you know the the the i think that the community file is like as good as it's going to be right now but it's we were trying to publish it last week and i just said like i can't i gotta stop i kind of walk away from this it's never going to be perfect and so there are things about it that you know we want to change and then there's things that like i think in all of our heads that this is the first second third thing we're going to do but i think probably a quarterly update of major components major components you know one or two components a quarter would probably be ideal for us yes our biggest advantage in incorporating storybook um so what we have seen i mean from my perspective what we see and where i feel like storybook fits in really well for us in the design process is that we create like amazing things in figma and even the levels of of interactive prototyping that exist in figma which are are pretty solid for a design program of that nature and then there's like a black box and then all of a sudden there's a website and we work with clients who look at something on a staging in site and they say why isn't that the way that it looked in figma and we have to go back and you know maybe there's a reason why maybe some something had to be compromised or maybe like it's just wrong and we are when we have a storybook in the mix we have like this it makes the black box slightly less black like now you can see something you can interact with it you can have a really accurate accounting of the variance and the input options for your components so i feel like for you know for non-technical people even though it's it's a little confusing to to view things in isolation it is nice to have that kind of interstitial space between what they see in a very static absolutely every single variable is controlled in figma and we make things look beautiful right and then we go into a live site and then all of a sudden we put in the content in and everything breaks or we're putting images in and we realize that we're not accounting for aspect ratio in the right way so i think that it's a it's a really great kind of testing ground for people who don't understand the work that it takes to go from design to development so that's my perspective on it well and i was going to add one thing so and we've been using stall guides for a number of years we started with kss node a long time ago so early in the dribble eight kind of life cycle moved to pattern lab and then as those kind of became unsupported so we finally made the jump to storybook just because it's a popular tool it's really easy to work with you know runs on node so it's just a nice tool and one of the things that i just really like about it too is that you can host it just kind of anywhere so we're hosting our storybook we're going to start doing this more often on our client projects too which is pushing it out to like netlify or something like that because even though they're twig extensions which is like a php thing right that's a dribble php thing you don't need php or dribble it's like okay as soon as you push up a commit to develop branch it's just going to show up on netlify and that's great for qa or for client uat or whatever so that's been a really big advantage of in the past everything was php-based so you had to have a stack that could run php now you just you can just run it anywhere yes so we are in the we just upgraded our figma from pro to organization part of the reason why we did that was because we wanted to use the tools that exist in that system i want to force our designers to branch and merge and i think they're going to hate me for it but it's going to be fine um you know there's i think it comes down to like you can have all the automation in the world you can have all the tools in the world and they could be awesome tools but if you don't have like an understanding of the process like what is your definition of done and who needs to sign off on what and what does sign off mean and also how do you how do you have a space where like i think file structure in figma is the place to do it like how do you have a place where this is the place to look this is the place to not look like don't look over here we're messing with stuff and it's gonna be fine um i think you have to have that and i think you have to kind of almost manually promote things into an environment another environment to to say like this is this is done using stuff with pages is good we've created a lot of like components separate kind of status marker components that we can use so that we can have like a flag on something that like this is approved this is being revised um we have looked at like we've looked at other tools like knapsack and other things that would have like more sort of cohesive networked integrations between figma and storybook or the knapsack design system and jira um and you know there's like someone's like you're adding too much complexity so i think it really just comes down to like what's your general workflow what's your communication and having a shared vocabulary of that definition of done part of the reason why we created this was like to have a shared vocabulary between the teams we if we're calling something an accordion and a developer is calling it a collapsible and we think we're talking about like we might think we're talking about two separate things but we're talking about the same things like if we have just the vocabulary of like this is what we call this that really just helps and you're not kind of having parallel conversations that never intersect yes oh no don't do that don't do that that's a no just don't do it don't do that um i well that's why i think like one thing i thought is really interesting and i i think you could theoretically do it with this is like giving people a space to break stuff and i think figma is good for that like we have things we built they work pretty well they look pretty nice and then all of a sudden they don't and maybe they don't look nice because it's a bad idea um i think like i think there's places i've seen some like incredible storybook implementations where you can create all kinds of crazy combinations of things that probably shouldn't exist in nature but i mean i think that giving people like a space to explore conceptually whether that's a designer or you know i'm a big believer that like design tools shouldn't be restricted to people who are have creative in their title or our designers um so you know mess around with figma see what happens see if that works because you might come up with something that sounds insane but um you might come up with something that's really kind of interesting and and might be worth the incurring the the i don't know technical debt but incurring the time spent developing something interesting but you need you need to save space to like in the same way that we have sandboxes for development like you need a sandbox you need some place to play and like break something politely yes so the question about like how the files work so right now oh another thing i wanted to touch on in a minute but so right now it's like storybook the the pieces are like there's a java script that is the story you know in the storybook there's a twig file and then we'll have in a in a subfolder we'll have some of the integration templates so that they're just all there so like if it's a layout folder block there's a block template that maps the fields to storybook now there's some cool work that's happening like hersha's working on this stuff with like the single directory component so we might change our approach as that like evolves there's there that that's a newer feature that was just added so we always want to take whatever the kind of you know the best you know practice triple core type of approach but you know in the absence of that we kind of have to have our own approach so with this we've just got that one we've got the twig file that is like the guts of the component so if it's an accordion it's that and then you know it's got variables and things like that and so we have another template that just passes about fields and things like that and for now that works great it's not you know it's two files one integration one that's the the bootstrap markup and then in the future maybe it'll just be this you know stc kind of thing where it's uh maybe it's just mapping in yaml or something like that so and again the beauty of our approach is that as soon as there's like a new better way of doing something we're just going to move to that for for new projects we don't have to worry about like breaking an existing project so but yeah i encourage you to kind of poke around and actually check out the source code and see how everything's organized i think i think it's done pretty well all right we got probably time for one more somebody wants to close this out nobody has the guts nobody does oh yeah um what has been i think really interesting is you know we've been sort of dog fooding this for a while um and you have a you have an idea of how it's going to work right like this makes sense this is logical um we talked to another design team at at a sister agency um very famously you know opinionated designers capital D designers and we were talking about like this approach in the way that we see it and the way that we see it not as a limiter of creativity but as a as a just like an opportunity to extend your creativity because it kind of like you don't have to do the boring stuff and uh we're talking to the design design director and i could tell like it wasn't it wasn't sinking in it wasn't we weren't getting there we were getting the the capital D design conversation and we're talking about like we have these card components and she said to me you know i don't want my my designers to be limited and i said okay i understand that and then she shows us a figma file and she's like well you know we've been experimenting with this this card i'm picking on cards because this literally happened um we're experimenting with this card concept and she's showing me a card and it's like the same card that's our card you how did you get that's our card that's the same card um and what it really what it really like said to me is like we have to talk about this in a different way like we have to figure out a way to explore more how this can not be a limiter and so we've been really pushing that like um i've asked everybody on our design team to like we did an exercise where we took some of our old client work and we redesigned it using ignite components we wanted to see like where where are we missing like where do we not have something that like are we do we leave something out or does this not work as well as we think it does i think it worked pretty well and now we're trying to explore like okay where is the one thing what is the interesting element that like that's the place where we want to spend the time are we thinking about some kind of like novel interesting hero interaction that nobody's seen before let's spend the time there and not spend the time on the stuff that doesn't matter but i think just like having and what is great about like talking to folks here at Drupalcon and doing demos in our booth by the way um come get a t-shirt uh that's right is is just learning how to talk about it in a different way and learning the places where like okay i know we need to fix this i know we need to talk about that in a different way i know like we need to speak to these people in this kind of a way and these people in this kind of a way and just hearing what like resonates with the folks we've spoken to i don't know that i expected the kind of like conversations that we've had this morning even like we're proud of it but to have people as invested in it as we are interested in like actively wanting to check it out and we are actively and we want feedback on it like that's i guess in a roundabout way that's i did not expect that perfect thanks y'all thanks