 Excellent, we'll begin. Hi, and welcome to this session on design in Figma and deploy a pixel-perfect Drupal website in days, not weeks. This is my first time at DrupalCon Europe, so it's kind of interesting and saying this event's quite amazing. We used to have smaller events, so this will be our first time to try this type of thing with such a big audience. That's good. So firstly, I need to make a confession. I'm providing a warning now upfront that I'll be making two controversial statements later on, which may upset some of you. Not only to offend anyone, but let's see how that turns out. So that's just the disclaimers out of the way. Okay, so what we'll cover today will be a quick intro. We'll cover how web development typically happens, true design system and what that is, introducing civic theme, and a couple of things about what it is and what it's not, and then a demonstration. It's quite a lot to get through. So a quick intro about myself. My name is Akhil Bandari. I work with Salsa Digital. Been in tech, I'm actually from Australia. G'day. Been in tech for 20... G'day mate. G'day mate. Mates, in this case. 22 years in tech industry, been in the front-end design area, graphic design, development, and UX. In the last 10 years or so, mostly being in federal government, working with websites and specifically Drupal in 2014. In Australia, government decided to move down the Drupal path of using all websites in Drupal. While I was at the Department of Communications, we were one of the first websites to go onto the platform, so that was a government CMS Drupal platform. Also looked after internets, and then the last four years, I've been working with Salsa Digital specifically in project delivery, marketing, business development, and specifically around UX and product development. So I'm gonna skip the usual who's a developer, who's a designer, but I'm gonna ask a couple of questions. So there'll be a bit of going back and forth to the audience here. So who here starts with kind of high-level, high-fidelity designs when they're doing a project? Ooh, very few. Okay, this is shy. And who kind of wings it? So in Australia, we say she'll be right, mate. Using lo-fi wireframes or something else. It has to be everyone else. No, okay. It's a few of you. Okay, so typically what we have is a web design project build that goes in a bit of relay race like a baton race. You pass it on between the phases. You generally have your design discovery. You had the first couple of sprints depending on how your project's set up, how big it is. And then generally you'll have your final designs, which then get passed on to the build team or the development team. And then unless there's anything else, it's just generally a few different phases. You'll have planning at UAT, and then you kind of have the deployment stage there. So depending on how big and complex your project is, that kind of handover for the designs may be simple. You may not even get a handover. You just get the files handed over to you. But generally this is kind of the process that happens. Like everyone pretty much agrees that's what happens nowadays. Yes, general nods, cool. Okay, so what do you think the time takes for the first phase? Three to eight weeks sounds about right, depending on how big it is. More, less, less, yeah. And then four builds, complete guess here, right? It can be anywhere from four to say 16 weeks if you're lucky. Does everyone kind of agree with that? We'll just kind of set up some baselines there. Yes, good, okay. So common issues with this process. Like the pressure is on. You've got your execs now asking for progress updates. The design team are now needing to move on to another project. The build team are kind of itching to get going. And it can get really frustrating. So what normally happens, you get a cold or warm handover, as I mentioned before, the files, the design files. You might get kind of a, hey, this is what these parts are. Look out for this. Or you might just get the final designs in an AI file or a W file, a PDF or anything else. And then you've just got to work with what you've got there for the final designs. You can then get a lot of the interpretations of what the designs look like, especially if it's a flat file. You might have sketch or AI or you might even get a Figma file where you will get some more information out of the actual assets and what the designs will look like and what they're supposed to do. But sometimes there's not a lot of detail in there. Then there's the actual overall kind of, or sorry, coding. The coding can take time. So obviously you need to then get the designs and build it. We all know about that. There are bugs, there are cycles, processes and just generally the cycles that you need to do to finalize that design itself and make it actually real. Then the final part is that kind of degradation of the design vision and the UX. So in the very first stage, that design stage, there's been a lot of time and cost, money, effort put into doing UX rounds. You use the research potentially and then really understanding what the users are trying to achieve when they're doing a build or trying to get something out of their project. The problem is that that generally is fantastic when you get the final designs and depending on that handover, as I mentioned before, you may not have all that information from the build side. The build team may get things that then have to interpret things or things that are missing. There are still gaps and that's your first degradation of this kind of design vision from the beginning towards the middle and then it continues. Down the track, I don't know how many people here actually use the original design files from a project a year or two later. You have these final designs that was spent hundreds of thousand dollars sometimes and then a year or two later, they never touched again. Like they just put in the files, that way, filing calls it. So anyone actually here use design files from an original project years later? No. So there's that degradation. There's a lot of time and effort and investment put in those designs but they're only used at once, thrown away. So how do you use a true design system and how it can help your build? So have people here work with design systems before? Anyone? Yes, one, two, quite a few. Okay, that's good. So I'm just gonna quickly define what a design system is and then I'll define what a true design system is. So we're all speaking the same language. So design system, I've got here a definition by the Nielsen-Norman group. They define that as a complete set of standards intended to manage design at scale using reusable components and patterns. So it usually consists of a few parts and their key parts are the visual guidelines, the usage guidelines and components that are made up by a UI kit, a pattern library and that's probably the part that most people are familiar with with the design system. That's a pattern library and the components that they see from a visual point of view. And often the design system or a design system is static. It's created once and then used but it doesn't actually get added to or expanded on. The difference with a true design system is that it goes a little bit deeper a bit beyond than a normal design system. It is a dynamic living document. And so over the, as I mentioned the years go by you can actually grow and add more things into the design system. New components, new rules, new guidelines, new things that you need to to make the design system work for your project. It actually includes coding standards. And so depending on the maturity of your design system it will actually include code snippets or in some more sophisticated cases it will include a library of codified components. So you have your visual components but you'll actually have that converted into code so that you can use and see what it looks like and interact with. And that's what the kind of main part of a true design system is. The other part is just the last one there is the documentation. There's normally much more comprehensive documentation about how the decisions were made with the components, why they used that way. And that information that I mentioned earlier about the UX from the design stage is kind of embedded into this design system. It also shows you how to use the commands and modify them as well. So definitely a true design system is the one you want to work on. So the benefits of using a true design system now the main one I think is the first on air collaboration. It really bridges the gap between designers and developers. So if you remember that first slide we've got the stages, you've got the design independent of the build. Well having something with a true design system will actually bridge that gap. And this is key to having a true design system. It allows designers to actually interact with the design components. So normally a designer will only see a flat file and not actually understand and see in an action. And in fact our designer that did the UX work on the Figma files that we worked on had never actually touched Drupal before. So if you have something that's got the actual components that are codified designers can interact and see what they're designing and how they're actually building what they can think about in terms of the interaction that users may actually use their components with when they're actually trying to come up with how to solve a problem. The true design system also allows everyone to have a common understanding in language instead of having to go back and forth. So as I mentioned there is missing information from design, handover, et cetera, down the path. There's a consistency in a unified brand voice and feel across the web platform that you're producing. It eliminates design discrepancies, that interpretation that I mentioned earlier. And then also enhances user trust that everything's gonna work the way it's expected to work. And there's a massive amount of efficiency that you can gain from having a true design system. It accelerates the design to development process which is kind of what we're talking about today. It also avoids redundant work. Teams can focus on innovation and features rather than building basic features and elements. You can actually work on the UX process and improve the site, how you can use the site, how interactions are done with the site rather than having to rebuild every element from a button to a navigation item, everything else. So remember I mentioned there's a couple of controversial comments that I was gonna make. Well this is it. What if I said developers, you don't need to rely on designers anymore? Anyone doing me yet? Okay, let's make it fair. What if I said designers, you don't need developers anymore? Is there any cheers yet? So how about we compromise? How about if we have designers and developers who could both build with high quality, visually engaging websites on their own or even better to doing it together? So we have introducing Civic Theme which is the true design system. So Civic Theme is an open source, inclusive and component based design system. It was created so governments and organizations can rapidly assemble modern, consistent and compliant digital experiences for its audiences. So Civic Theme was built by Solster Digital. We are the maintainers but it's an open source project. Out of the box it is based on atomic design. So the entire design system is an atomic based design system which was developed by Brad Foster as the designer of the atomic system there which basically means that each element is made up of individual base pieces and atoms. Then the atoms actually build up molecules and then pluses of molecules create organisms and templates and whole pages. So it's just an atomic design system, how it works. The Civic Theme design system includes 60 components both in the Figma and codified in Storybook which is the mechanism we use for the codification for designers and for the first instance that we've created it's actually got a Drupal 10 theme. So it uses a Drupal 10 theme. Out of the box it has low code to no code assembly which allows web administrators and even content authors to build and manage page layouts. It is WCAG 2.1AA compliant and includes accessibility compliance reports for every development release that's to ensure that it's maintained. So although we built it AA compliant every time there's a release done for the Civic Theme design system we do another round of accessibility testing and we make that report public as well. So it's available on the web. It's also highly extensible. So although it's all component driven there are extra fields and slots what we call slots in each of the components where you can actually wire in additional fields and data and then render that on the front page. It's also visually stunning. We won the Drupal South Splash Awards for Best Drupal DX, sorry UX Design Project this year, earlier this year. It's kind of a quick snap of the front in there. It's from We're in Australia so the Australian government is also kind of recommending this for all Australian government websites. So the Australian government architecture website has recently added Civic Theme to its website as a main mechanism to use design systems. Let's see if this works. Yep. So that's it there. So that our main body there is a digital transformation agency and they've recommended Civic Theme. They don't normally put products up because this is an open source project. They've decided to use that and recommend that to all other government websites. And lastly it's technology agnostic. As I mentioned before we've got a Drupal 10 theme but it can be connected to Vue.js, Angelo or any other kind of architecture for the front end. So there are three main parts. This is how we can do it in days, not weeks. There are three main parts. So we have the Visual Design Library. We have the codified UI components and then we have a visual theme. In this case, if you were to adopt Civic Theme you have the Figma Design System, the Functional UI Kit which is a storybook codified components. And in this case right now we have a Drupal theme but that could be anything. But this is how we can do it. So out of the box if you were to adopt it with all the 60 components there you can actually build a site within days. So quickly cover Figma and Storybook, the components and parts of the Civic Theme. So if anyone who's familiar with Figma is basically just a collaborative tool used in interface design tool, used for UI and UX design prototyping. It also creates fully working apps and responsive websites which is very useful. And there is no quoting required in Figma. It's also very easy to learn. Yeah, so Storybook, a quickly cover is a fully functional UI component in a codified fashion. In Civic Theme's case we have a one-to-one relationship between what the Figma Visual Library has and what the codified components are. And there's no Drupal or CMS needed to run the actual Storybook components. So you can run the functional components without having a website and actually see what they do and how they work. And I've got the demo later on to show you exactly what that looks like. Okay, so here's a quick in... Well, here's a in-depth talk about Drupal. Well, no, I'm just kidding. Not gonna do that. We all kind of know Drupal here, so I'm gonna skip to the next one. So as I mentioned, there are three parts to Drupal. We have the designers and developers essentially. And what we have is at the very bottom there are the 60 components in the Visual Library, the codified components, and the theme itself. So now we have this kind of common functional component area between now the designers and developers you can see and interact with all parts of the design system. So now the design system covers the entire team, hence the collaboration. Okay. So as I mentioned before, we've got the three parts, but it's also highly extensible. So you can just add and change components as you need, and that's all done out of the box. However, if you want to do it quickly within days, you stick with out of the box. It's much easier and much easier to maintain, but it has the capacity to grow for more sophisticated sites. Okay, so how can Civic Theme benefit projects? So you can have rapid functional prototyping. You can have quick, rich feedback from interactive functional designs rather than low-fire wireframes. You can also get feedback much earlier in the process instead of having to wait for year iterations of doing any kind of UX work. You can actually have that quite quickly in the process, and that allows you to actually work on UX customer journeys and find more information that's more rich for the user point of view rather than trying to work out what works best from a design point of view. There's minimal development out of the box and it's highly extensible, as I mentioned, for more sophisticated websites, and then there's fast site deployment. And that fast site deployment also comes with a consistent high-quality experience. Okay, quick demonstration if I'm gonna go through, so I'm just gonna switch to the video. Just give me a moment. I have a recording here of a live real-time demo since I did do this live in the last event. The demo gods laughed at me. Okay, so here we've got Figma. If any of you are familiar with Figma, we've got the pages down the side here. And what you can see here is the atomic design system. So you can see the elements. You can see some pages there about how to interact with the design system, the Figma files. But down the side, you can kind of see the atomic parts there. There's the atoms, the molecules and organisms. And these are all the components within each of those lists. So each of these is editable. You can change these. And we also have the pages here. So we've assembled a few pages as an example. They're just zooming in. So this is the atomic design system elements. So within the design system, you can control any one of these or any of these atoms. So we've got the typography, the forms, and all of these can be adjusted to suit your brand identity. So it's not like you will get out of the box and have to have every site look the same. The first step you would do, and we'll show that later is actually adjust the brand identity and your own styling. But the rest here, all the components here are out of the box and they're fairly rich components here in the design system. And again, these can all be adjusted within Figma itself within the design system. But if you wanted to do it out of the box, if you wanted to do it within days, you can just use what there is already out of the box. As I mentioned that these are accessibly tested, meet accessibility standards, and also user tested as well. So part of the process in the two years that we designed and built Civic Theme, we worked with projects about eight or nine different projects, client projects, and all of those fed into Civic Theme before it actually went to the first release. So these are showing all the different components here. I might actually skip ahead of it. Kind of get the gist as footers. There are menus, mega menus, all available from the design. So from here, you can actually use any of these components and effectively start assembling your page layouts. Yeah, skip forward. So here's an example of a page. It's a content page. Should have skipped too far. Swing to see. And you've also got the mobile kit version as well. So these are already being pre-designed for mobile as well. We've also got a dark light as you can probably see some of the backgrounds. And this is not to be kind of a dark light as in the mode for accessibility. These are if you have components next to each other. And instead of having all white or all dark, you can use a striping effect and you can just change the dark light so that you can make it a bit more easy to read those different components. Okay, so I'm gonna quickly show you an example homepage. So here we've just got a few different components laid out to create a homepage. So in this case, we've got the header section there. We've got general logos, menus. We've got a header banner. We've got a kind of content listing component here, which can be set up to manually show items or you can actually pull in existing content. We've got another kind of promo item and a carousel here. This has actually got four items in that carousel. And we've got a footer as well. So there's the mobile version as well next to it. Just shows you that it's already mobile ready. That's what it looks like once it goes into kind of a mobile format. Okay, let's skip a little bit forward. In the design system in the Figma files, there are already kind of preset pages. We've got examples of many different layouts and pages to show. Dark light, category pages, content pages. I'll just walk down this one. So you can see there you've got a left hand menu. You can switch that on and off if you like. There are content components. So all the content is actually built as components. So down the page, you can actually add in content or any other component and then content and just lay out anything in any order that you wanted to put it into. We've also got events and listings. Okay, so as I mentioned before about the colors managing the design system itself, this is where the colors are managed in the design system. It can just go in and override any of these and that would be the first step you do in starting to set up your design system here. And this is basically Cascades for the rest of the site. The other parts of the atomic design system are all here. These are just the atoms. So you've got different list items, form elements and promo cards, alerts even. And there's quite a bit of instruction here of how the system works. Okay, I'm just going to jump across. So I don't know if you noticed there, I actually did just switch over to Storybook. So from Figma, we've now jumped into Storybook. So Storybook is the online tool that codifies everything. So it's going to keep playing. And so you can see down the side there, we've actually got a mirror image of what was in Figma. So all the design visual elements are now codified and they represent the same components that are available in the Figma-sided design system. So all of these atomic items are all in there. I'm just going to jump ahead a second. And the key here is that these are all interactive. So now if you work with any of the components individually, you can actually see how they work. And in Storybook itself, you can actually interact with them. And we've added these things called knobs. And you can actually play with the design system in the interactive way to see the other variants of every kind of variant that we have. So in the Figma, we had all the variants kind of laid out. In here, you can actually play with this. You can see what it looks like with the background. You can see what it looks like in the dark theme. You can add things, you can change things. So from here, the designers can actually see what it looks like. They can actually interact with the designs now. They can understand and they can actually now figure out what new ways to make this work better or different. And so that's the kind of key here with the true design system, is this interactivity within the design system itself. So I'm going to now skip ahead. So that's what I wanted to show. So in this particular case with the Figma design system, you can see there that there are easy slots there. I don't have a laser pointer. But those names there are actually the different slots that we have. And we've got spare slots. So that content top and middle is empty. And you can wire those to add new things and extend the components that exist there if you wish. That we'll need a bit of coding. So that's not what we can do in a few days, but it's all available there. So this is the extensible part of design system. Again, you can play and see. This sometimes is useful if you've got a team. The design system for civic theme, the Drupal installation actually includes Storybook. So if you have a web team or content authors or executives that want to see what a new component might look like, you don't have to actually spin it up. You can actually just use it in Storybook and show them what it could look like. Hey, we can use this. Or I want the image to the left or the right or dark. And you can literally show them how many topics there are. So you can actually show your team quickly and easily. That's going to pause there. What those new components could look like without actually having to build it out completely. And you can quickly test nuts that rapid prototyping. Okay, so I'm going to pause for a second there. This is now we're jumping to Drupal. So at the moment, we don't actually have some kind of connector or integration because I get asked that quite a lot between moving from Figma to Drupal itself. So at the moment, what we do have within civic theme is this kind of relationship, but it's not an integrated relationship. There's no automation, but we have managed and we manage the components, the library from Figma. So all the visual UI kit. And also in Drupal, in the Drupal theme, all the components are also managed by us. So as an open source project, if there are any maintenance or upgrades, we do the whole thing. We manage and maintain and update both the Figma files and the Drupal theme itself. Maybe one day we're looking at a few different prototypes of how we might be able to make those changes automated. But right now, if you're using out of the box, it's just kind of using what there is now without any automation. I just wanted to make that very clear. So now we've jumped into Drupal. Probably familiar with this. We've kept the UI fairly standard or the admin UI. It looks like kind of standard Drupal things there. So it makes the editor experience much more intuitive. One of the key things was the editor experience and making sure that even the editors can use and manage the site pretty quickly. So this is just out of the box. I will demo quickly straight after this how to add a component in both, but just kind of showing you what it looks like in Drupal. So this is just the website. It has all the elements in there, all the cards, everything's built out in the theme. So these are all those components that have already been kind of preset out. Cool, okay, so now we can edit any one of the pages there. And in the back end, you can see there, you can add topics which are taxonomy terms to collect and catalog pages and data. You can manage that as editor. You can also kind of have collections of information under the site. You can also then build out the pages. This component error is the key. So here we have all the different components that are available. You can just switch them on and configure them from an admin point of view. So we'll just add something in there. You can add titles or the WYSIWYG's in there. You can add different links. You can even change the appearance and you can just click and change and hide things without having to do any kind of coding. So in this case, this was the listing component. We've got items in there. You can actually change how it looks, how many items show in that particular view. And you can even add filters. You can actually change the information around the component. And this is kind of the key area here. Is you can actually re-render the front end. So if you don't want one, two, three, up to three, four columns of information of those nav cards, you can adjust it here. You can also adjust the type of cards that display. And all done through this kind of admin UI without coding. So as I mentioned about the colors, this is kind of how the colors are managed within the Drupal theme. You can actually see the colors also match up with what was in the actual design system in the Figma side as well. As I mentioned, this is a storybook installation within Civic Theme. So again, you can actually play with the code and all the components and test and see what there are. So instead of having to figure out how to build each one to test it, you can just go down to this library and quickly see the available out-of-the-box components. And then you can use them on the site knowing what they are and how they could look. The other thing is this kind of color management. We've done a kind of way to show how all the colors are dependent and managed. You can change, update, and override any one of these colors within the actual UI itself. Okay, I think we're just gonna go to the demo next. Okay, so here we're gonna add a new component in Figma. So I'm gonna do this quickly as we can. So we've got our landing page here as an example. So what we're gonna do is go down to the atomic library, grab the campaign component, and within Figma it's really just quite simple. You just kind of copy it, you go back up to your page, and you drill down into the content of that page, and we just paste it. It'll just appear at the bottom because the design system here has got an auto layout, and we just move it up to the location that we want it to go. In this case, we're just gonna drop it below the header nerve area. So here we just simply add a new component. Now, how it looks and feels, we can change that in the base area, but that's as simple as it is to kind of add a new component. So if you wanna create the mobile version, we just go down and grab the mobile component, and we'll just drill into the mobile view and just add that in here as well. Now all the other details can be adjusted if you need to down here, into the standard kind of Figma controls, so. And so there we have our design, Figma design files now updated. So now we're just gonna jump across the Drupal, and we're gonna do the same thing. This is the magical bit. Okay, so we're going into the home page. This is the Drupal area. We'll just go into the home page. We will go in and add the new component called campaign. I've kind of pre-updated some of the header areas to make it look the same. So we'll just go in, add a new component, grab the campaign, the same one that we did before in Figma. And I'm just gonna copy and paste the same details, title, grab image, there's an image library there. I'm just gonna grab the first one. We use all the standard kind of Drupal, Drupalisms and Drupal ways. I'm now gonna put the image on the right. There was a date in there, so I'll add a date. And I'll also use a WYSIWYG to add some content. Some of the pre-styling that we've done here as well is to create buttons really quickly. As I mentioned, the design system manages how that works, so we don't have to worry about it. In this case, I'm creating two buttons here. We'll just add a link once the links are in there. It recognizes that it can be a button because it's interactive. I'll just go in and grab the first one, make sure it's a link. Yep. And now we can just use a style. And I'm gonna use a primary button. So this is what's being managed through the design system itself. Then I'll add another button. We've happened to have a secondary button as well. I'll add some of the topics. And this is to match the visual design because the visual design had these particular elements in there. So yes, I have access. I'll make those changes. Hit save. And there it is. So that's the component they're now created. There's the button. And it's literally just added to the page that I'm just moving at the right spot. So what I'll quickly show you is compare the two. So we've got the Drupal build on one side and we've got the design system on the other side, the Figma design, which you can see is identical. So it speeds up design and build pretty quickly. Now I'll skip ahead. There's the mobile version and you can see there that's the mobile build as well. Again, exactly the same as the Figma designs. Okay, cool. Thank you, I have a little bit left to go. I think it's a time. Okay, so come back. I can't, I'll just start slideshow, come on. Okay, so I'm gonna leave that because the slideshow won't work for some reason it's hiding. So as I mentioned there, we don't have a connection. We've got the Drupal build that's basically one for one. It makes maintenance much easier. It's an open source project and you can actually extend and do what you need to do with that as you need it. As you notice here, this has animations. Oh, there it is, I can do it now. Come back. Oh no, go away. There's a delay because this is glass and the thing's not. Okay, so fantastic. I'm gonna quickly slide through this. So as we mentioned before, these stages here take weeks. They probably now take days. We actually have built a project as a bit of a test case. So in real life, we did this project here for the Climate Change Authority. They came to us and said, hey, can you make some changes to the listings? Add some filters to make it easier for the users. We said, well, how about we give you a website in four weeks? So in four weeks, we were able to make these designs in Figma, get them signed off with them and then build the website and deploy that within four weeks. And it's a full Drupal website, it's live. And they were super happy with it and they really, really enjoyed the editor experience and the admins can actually do so much more than they were able to do before. So yeah, four weeks instead of months. And so as I mentioned, you can use everything out of the box so you can adopt what's there. That's the fastest path to build and set up your site. You can also then make some minor changing in there. You can also extend the components any of the design system you wish. You can also adapt and change the components and use the atomic design system to rearrange those atoms to create new components. So that's still working within the design system and making changes. Or you can just jump straight into Drupal and start using the codified site itself. So you can just go into Drupal. You can actually spin that up pretty quickly. The code's available on Drupal.org, I believe. And you don't need Figma. You don't even need to do any of the design part of it. So I quickly show you these. You can ask me for these later, but if you go to civictheme.io resources, we have all the resources there. We have the Figma files. We have everything that's open source, the code, WCAG standard reports as well, even design content group guidelines. And there's also a Slack channel. So if you go to the Drupal.org, so Drupal Slack channel, if you look up civictheme.design system, that will be available. So you can actually interact with the product team as well. So the last thing I was gonna mention, I don't have the notes in front of me, but what was really interesting about Dries' presentation was his idea of having Drupal to be easy to build. I'm waiting for this to come up. Easier to start, easier to build, and easier to maintain. And so I kind of felt like he was really talking about civic theme as well. And that was one of the key things that we were trying to make this work, make it do, is have Drupal to be much easier to set up, run, and manage. That's it. I don't know if there's any questions. I don't know if there's any time. So the first question is, won't there be cases where you have projects that have components you don't need in the storybook? Can you cherry pick components you need, or do you have to manually move the ones you want to use? Can you repeat the questions? Yeah, so the question was, with the storybook and the components, do you need to actually cherry pick or can you leave some of the components out? You don't need to use all the components that are available. You just turn on what you need to. It's just a Drupal, it's dynamic. So you just pick the components you need and build them out. In the storybook side of things, you just don't, in Drupal theme that I showed you where I had storybook, that's just an example. It doesn't actually do anything with the site itself. How much time do your team need for this all the experience of Drupal? How much time did we take? Oh, how much time did we spend on doing the development? So about 6,000 hours, about 18 months, and about nine different projects to help feed into the original build for 1.0. We're out to 1.5, version 1.5. So those releases are managed by us and as they're a project, it's an open source community, projects can kind of give back and those releases will include new features or fixes or updates. Any other questions? Any questions from the audience? One hand up, do you want to, it's a mic on? Yep, you should just turn on, yep. Hi, for the Drupal part, there's a distribution that's behind it that creates the paragraphs and the components or is it all, I can not imagine it being in a team. So on Drupal.org there's a team called Civic Team. It actually has YAML files for a content type which has all these paragraph types, et cetera. So the team comes with a content type. So that's why we didn't need a distribution, just the theme is enough. Okay, thank you. But one thing I would like to say that in order to use Civic Team, we have to use that particular content type because that's the way it has been done with it. If you're creating new content types, we need to develop them accordingly. Actually that's a good point I was gonna mention that I did mention earlier was that Civic Team is based on a theme layer only. So the entire design system from the Drupal 10 theme point of view is just on the theme layer only. So in Australia we have GovCMS which is a program that has limited modules. So in order to make it even easier for anyone else, we didn't use any modules at all. So that way it's everything's done in the theme layer. So it's fairly flexible that way. There's another question. It looks easy to use components from the editor UI. What about using components from the code like from Twig templates? To you question. I don't really understand the question if whoever asked it, can you just explain it? Is that within the room? Yes, great. Hi, we use design system also and the one part how we use it is content authors can use all the components from nodes, like from editor UI, but we also can render them using Twig templates. So even from the code perspective, Civic Team, the theme itself, so for example, if I'm building a project on Civic Team, the way I will go ahead is I will use Civic Team, then Civic Team itself has a script which we can run and it would create a sub-team and the sub-team is where we start applying all the overrides. So the color override would go in a sub-team and the code is also very modular. So we have molecules, atoms, et cetera, for each and every element. So you can easily override things if needed. So yes, everything is available in Twig templates. And yeah, probably another point of that one is when there are upgrades, it doesn't change or affect the base. You will be able to upgrade the base build and then it says what needs to be changed if you have customizations above that in the sub-team. That way you can just run both and have the updates that are available publicly as well. The open source updates. Any other? I would really encourage you to go ahead and look at the code. If you are a coder or a teamer, then you'll understand what I'm trying to say. Unless until you look at the code, you won't really get that. But yeah, I have worked on the code. I am a developer. So yeah, it's very good even if I say so. So yeah, so yes. Hello. How do I use the design system with my own content types? So there are, at the moment there is only one content. Actually there's three content types, the one main content type for pages. We have another one for events and then we have one for alerts so that way you can create site-wide alerts. Depending on what you need the content types for because we've found in our experience that generally with the content types, it's need to categorize the pages and maybe add new fields. So with the categories we have tags, we have the taxonomy that's available to use that. But if you wanted to have something that's very unique and that needs additional fields, you can actually just clone the page and create a new content type and add that in. So some of the projects, the basic projects that we've had and not the one that I showed you have basically everything out of the box except for one or two extra new content types that are unique to them. It works fine. To add on to that, again from the coding perspective, Dev, Dev here. So then if you're creating a new content type, it's easy to use components because you can just keep on including the components instead of writing stuff in new. You can keep on, so if your content type is using a link field, you can easily include the link file from your, from the base team rather than trying to create something a new. So you're still using the components but in a new content type. So that's the idea of having the atoms and then reassembling the atoms but still working within the design team within the design system. Just rearrange the atoms, you add extra atoms and then you've got your new component or new page or new whatever. And again, no real coding, it's just rearranging what's already there. We have time for one more question. Thank you very much. Thank you for your time. Thank you.