 Okay, thank you everyone and welcome to our session today on Figma to Drupal. I hope you guys are all enjoying the events. We've got quite a lot to cover today, so we'll try and get through the slides and get to the demo. We've got a demo for both the Figma and Drupal, so let's see how we can progress on. So we'll quickly cover an introduction to ourselves. What we have here today and why we're here today about Figma to Drupal, the introduction to the design system, the demonstrations, a couple of reasons how and why you're using this type of process, and then we'll introduce the tools we've built. So just to kind of note that we're talking about Figma to Drupal generically as a process, not necessarily just quickly around. Quick introduction. So my name is Alan Raco. I've been in the tech industry for about seven years, basically focusing on design strategy content design with UI and UX. I've spent five years at Celsa, currently the marketing design lead, predominantly a major contributor to the UX for CVC design system. I'm also the co-founder of a product called Pricebook, basically technology at the moment that enables all businesses to identify price fluctuations by taking it in voice. That's pretty much what I mean. Thank you. So my name is Akil. 21 years in the industry of tech, from front-end design, graphic design, building, coding, HTML, user experience, another whole front-end experience, worked at the Department of Communications, the arts rate, years with government, also working with the web team, looking at the websites, specifically looking at the GovCMS website for the corporate arts communications and the internet as well. A bit of a good rounded experience there from web, and now just four years with Celsa Digital, came in as a digital engagement manager, now I do marketing lead and product development, especially with the AMC team. So how did we get here? A bit of a metaphorical, metaphysical question here, but I'm going to ask a few questions today, kind of just get everyone's understanding about what we're talking about. So how many designers do we have here today? Developers, designers? And developers then? Everyone? Yeah. Great. So we've all learned something today, so now who's actually built a design system or a UI kit or UX kind of component on the design side of the thing? Designers of course. And how long do you normally would expect to take to actually build something, whether it's a UI kit, I mean the design system is quite complex, but one week or two weeks, three weeks, four weeks, even guess, weeks? Okay, let's go with a few weeks. Okay. And then how long would it take to build a basic site with a theme down to it? Now I'm asking the rest of the room here. So weeks, days, you can use themes, I guess, anyone? Weeks? Couple weeks? Two weeks? Three weeks? Settling that two weeks? Okay, let's go with two weeks. So about two weeks, let's go with two weeks for design and two weeks for a simple build. And that's about four weeks all up, obviously, to go from designing something and that's probably just basic design, not necessarily design system and all the other structures and things around that. So that's not too bad, it's about a month. So what we've kind of found, I'm actually going to ask one more question. Has anyone been involved in the full process of doing the design and a build? Okay. Good. And how did you find the process of the designs and transitioning and handing over to the build? Yeah, hands up is good. So I'll summarize that. It's fine if you're working from a component-based design level and you have a lot of the information for DOM and other structures to kind of talk to. Okay. It does restrain the client conversation, but otherwise I see a lot of angry faces. So that's the point, right? So the process is in two parts often, there's either one or the other. Some people have done the whole thing, which is probably why that worked. And that's kind of the key, having this process from design to build and having that channel of communication, understanding the constraints is what really makes it a better process overall. So that kind of, if using a tool or we get to that actually, using tools or otherwise and then moving into, in this case, Drupal project. So now I guess it would be fantastic if we had a process that was able to build sites and design sites from say something like Figma and then make your Drupal site and components already prevailed. That would be fantastic, right? So, okay. So, for those of you who don't know what Figma is, apologies, but I do need to start with. So we're talking about Figma and that's, what is Figma? So essentially Figma is a cloverty, what does that mean? It allows multiple people to be designing on the same file simultaneously and on many projects at the same time. Communicating, reviewing, providing updates alive simultaneously. What's it used for? Mainly for UI and UX predominant. It's also known to create fully working UX design apps and responsive. So basically you can create prototypes or MVPs with real data and user generated content. No coding required at all, but the cool thing is that Figma actually does provide a coding panel in the design, which basically enables developers to extract the code, information from a specific component or an element, it's a pretty cool feature. Figma does support CSS, Swift, I actually like to think of Figma as a technical design tool and I say that because like a creative design environment where I actually was brought up on Sketch and so learning Figma was a complete new world. And so I see it as a technical design tool. It's highly accessible, you can learn Figma in days, not weeks, and I actually truly, I actually stand by that and I'm a real case. So users can become comfortable using Figma within days of training. Naturally the more complex tasks like design systems takes a bit more time to learn. I'm an example of that when I was introduced to Figma, very little training within a few days I was designing banners, communicating that to the developers in the build. I'm also now privileged to have been working under a design lead for a few years on a design system which we'll talk about soon and so that is the complex project I'm working on. It's taken me probably about a year to develop those skills. So what is an atomic design system? So essentially it's a design methodology that breaks down webpages into small components. Think of it as a hierarchy system. For example you have a web page and you can break down the web page into a header, a banner, a footer, and a content section. What else is an atomic design system? Well essentially they are design standards that help manage design at scale really annoyingly. Sorry. So what does that mean? It doesn't mean scale at large, it means it helps you design components to the size it needs to be when you consider the surroundings of the other components and the space within that design. So for example if you take a banner, so what components does a banner have? Basically it will have a title and may have an image, it could have some breadcrumbs. And so if I was to put a title in a banner I need to consider the space, the size of the banner and all the other components surrounding that. So naturally the title will be a large font that you can read very clearly. Atomic design system is also reusable components and patterns, I should go quicker. Last but not least, it's a concept by Brad Frost, he is a design system consultant out of Pittsburgh if you want to know more about atomic design systems I recommend you do go to Brad Frost. Very very quickly the atomic design framework consists of five levels, atoms, molecules, organisms and pages. How does it work? Essentially atoms are components such as icons, labels, headings and paragraphs in molecules. So you take your atoms and you build components that include, sorry you take your molecules and you design it using your atoms. So for example if you have an event card which is a design, sorry it's an event card and you will design that with components such as icons, tags and headings. Further down when you design an organism you will be building components that include molecules and so forth. So that is as I said earlier the hierarchy system. Eventually you come to the pages but once you combine all these levels you can add custom content images and colors. Why use an atomic design system? Faster prototyping, designers and developers combine standard components rather than building from scratch. Quick updates and revisions, a component can be updated everywhere globally. If you make the update on the one component in the master file or ever that component sits in your entire web page it will be updated instantly. Improved consistency, you're using the same standard components throughout your web page design. Improving day-to-day communication, it's the single source of truth, right? And last but not least it is overall it's far more cheaper and quicker to design, build and launch than custom sites. You guys are all developers mostly here I'm just going to quickly go through the general steps. So we've talked about the design, the design system build or design UI etc design and visual designs. Obviously then once you get to the dribble side you've got the design, you've then got to set up your site, you've got to start doing the theme, testing the theme, etc. Then you'll obviously then add your components, build out all the components in line with your theme and then you'll do more testing and then you'll do hopefully more and more testing and then that's the process. There's your two weeks of build and we've already done the two weeks of design there. So what is the real issue then? Well what happens is making a site can always be difficult, having it pixel perfect what the designers want to do and what ends up being is a very big chasm of issues, pain and heartbreak sometimes but covering the visual design from the file tools can be complex and it requires specialist kind of knowledge. Also knowledge of the code of the CMS you intend to use with the tool as well. In this case today we're obviously going to do dribble. Now the other thing is to the knowledge to use things out of figment and building the code separated some people who might be able to do both. Bonus points. But the real issues are really around the cost, the time that it takes to be able to build or even design and build as we spoke minimum four weeks for something basic, things get lost in translation. Probably the biggest headache that we'll find that the designers hand over something. They're not quite sure there's an interaction spec that's missing or something else and sometimes they won't be able to go back and speak to the designs especially if it's a third party or another vendor that's hands. The other issues include things that can get overlooked or missed, coding can take time and rise of the bugs. There are many bugs that can arise obviously then you've got to go through, find where that is, backtrack. So the solution, what's the solution? So our solution, our approach was to build a true atomic design based system. In figment that is 99% in sync with Drupal 10 theme. And I say that because there are holes, there are gaps. We're fixing them, we're maturing, we're growing. And so it's not 100% there. We're not there yet but we'll get there eventually. It is based on atomic design principles. So once again, we've created design standards, settle reusable components and patterns. We've also put together a component library connecting design to code. Components essentially are mirrored. So in centralize, this reduces bugs, ambiguity, in short consistency and rapid development. It's fully open source. So what does that mean? Allowing communities to adopt, adapt or customize as they see fit. It's also pre-built with Drupal 10 theme components. Once again, enabling the rapid prototyping quality side assembly. What does this all actually mean very quickly? There is a relationship between design being Figma and build meaning Drupal. When there are changes in design from projects, these flow to the Drupal build. The build is updated to reflect designs every time. So in theory, if you have a design system, you can kind of use any CMS. In this case, we're talking about Drupal today. But we've got the system we have is technology agnostic. And the process is generally we've got the Figma, which Alan's spoken about. We also have the storybook components. And that way designers, and this we found was quite a key component that obviously designers can't see the component or the thing they're trying to design in action. Storybook allows you to be able to replicate that functionally without having to spin up a site. So what we now have is a design component that you can see in action. You can actually play with what they call knobs in storybook to adjust the number of different dimensions, the sizes, the colors, anything that you can change on a particular piece of design or functional piece of feature or interactive element. You can do that in storybook. You can test it and actually see what it looks like and go, hey, that wasn't what I was expecting to happen. I can go back and change the design before you go to the full build stage. And that was one of the important parts here. But then that also is the library of components separately that you have to build or start building out in Drupal as a back end. And then you have the Drupal 10 theme, which will then translate those into the visual front end. So what we have is the design to the Figma to Drupal. So they're kind of the steps that we've kind of put together in the process. And there are basically a different ways to approach it. We've kind of narrowed down to three different approaches in terms of from Figma to design. So you can just go with a custom Figma library. It's custom Figma design, right? So you can build anything you want, design anything you want in Figma and then try and build that from scratch in Drupal and then build the theme that goes with that. I think you can see the colors there, the color code are from kind of difficulty and complexity. Moving down a bit. The next one is you might have your own visual design. You'll obviously build that in Figma and then you'll apply that to Drupal and you might have to build the theme or some other supporting frameworks around that to kind of manage that. And then the last one is you can use a design system that has the Figma and the Drupal componentry built out. Today, such as Civic theme. So that's where the difference is with Civic theme. You have both the Figma and the components already put together and they work in kind of in sync. And that's obviously the least part of least. Okay, so in 12 minutes, we're going to go through the demos. So what we'll do is the demos that we've mentioned before. Alan's going to show what the design, a mock-up of a design process might look like if you're starting in Figma, kind of going through the steps. Typical kind of wire framing, working out and mapping out all the components. And then within the Civic theme design system that we have, the components are kind of in a library, the UI kits there, all the components are there. You can kind of manipulate and just use a dropper to go, hey, I want this component. And then you can actually change what you want to do, kind of design your page. And that's where the rapid prototyping really comes in is you can kind of see that in high fidelity rather than just wireframes. You can actually go, okay, this is the component that's actually going to be outputted. There's so much that I can show you, but we're going to try to be as quick as we can. We're running out of time. So where do we start? We start with the basic. We strip down a web page. What does a web page include? It includes a number of panel sections, whatever you may call it. That's a header. It could be a banner. It could be a footer, as I mentioned. What you see on the screen is I've very quickly mocked up a web page with some panels. On the right is just the frame I've put together. By the way, this is not a process you take while using Civic theme. It's a process that I'm doing to explain to you my thought process when I use the design system. And it also helps you prepare for component mapping, which is a really important task. So I've put sections in my web page. What do I do now? Well, I need to start component mapping. So if we slide across to the next step, I've pre-built this in advance. What you can see here is I've done some quick component mapping. I asked myself, am I satisfied with the wire frames that I've put together? How many panels do I use? Do I want to add any more? How do I answer these questions? I need to understand the purpose of my web page. What industry? What is the product and service? What is the value proposition and so forth? Do I have content? What content do I have? What are the images available? These are all the things you've got to go through and use the research, yes. So for the purpose of this demonstration, really quickly, I've put together some wire frames where I believe I'll need a header, a banner, a potentially a slider to showcase a principal focus of the product and service, some navigation cards, event cards, promo cards, a subscription section, and a folder. I can also add a navigation card by dragging and dropping. Let's say if I want to add some navigation cards, I can add them in, which is not working yet. But normally should be able to drag and drop, but I'll skip to the next step. So what I've done here is now I've put together a wire frame. I know what sections I want on my website. What do I do now? Well now, this is where Civic Theme comes in really handy. It's essentially drag and drop. It really is. So as I said earlier, the Civic Theme components already pre-built and pre-designed components. They're all master components, which are on the left hand. So what we do is we take the wire frame and I prepared earlier some design components on the right. You can see I have a header, I have a banner, a navigation, navigation tabs, and also a slider. So these are default components taken from the master file on the left. What I can do is I can drag the header in there and I can start building out my web page very, very quickly. As I do that, as I do that, you can see the page is coming together quite quickly. It literally is as simple as that with Civic Theme. Once you've done that, and you can see that at the moment there's placeholders, placeholder images, placeholder text. When you go through that process, well, what does that look like? Something I put together earlier is a complete web page using all the components on Civic Theme, simply by using that method of dragging and dropping from the master component. So I will zoom in for you and see very quickly we have the header, the banner, navigation cards, a slider, some more navigation cards, event cards, and so forth. So I've constructed an entire home page here using the components. The fun part that I really enjoy now is, well, how do we customize all this? And how do we customize all this? So what I have on the right is I'm going to demonstrate a few things and then demonstrate how you can add a logo in the master file and that applies to the web page. I'll change some colors, the background image and something. So the first step I do is I add my own logo. Well, how do I do that? Simply scroll to the left, look for the logo. So I have my logo ready to go. I simply copy in the replace me layer paste to replace. Now, as a... Oh. So these are all the atoms and some of these are base elements. If you can see on the panel on the right, there is a UI kit and then you can change and configure the different elements on the other side. In theory, you should be able to replace that image there. Sorry, it's actually the wrong way. There we go. There we go. So I've replaced the default Civic Team logo with Drupal Nation logo. So what happens now? Well, that logo is now applied in every single component that contains the logo. So for example, if I was to return to my templates, the logo is updated in the header at the top, in the footer, instantly. And so all your updates are made to the map. The second step I'd like to show you is color mapping. Very important when you're customizing the design system. Your clients will have different master palettes and some of them might have 10, some of them might have 3, some of them might have 20. You don't know. And so we've put together a color framework, which we feel right now is able to address the number of colors your clients might have. So what I will do here is I'll go to the colors and a color framework. I won't go into detail. We're happy to go into detail if you can see me at the booth. We've essentially put together a color framework where there are three master colors. Those master colors are inherited by the colors in the color palette. So we've got typography colors, background border and so forth. Now, if I was to change these colors, once again, I'll change the colors and you'll see how they are adopted throughout the design system. So very quickly, if I was to change the color here, keep in mind I do have my hex, so it's ready by hand. Let me change the color here. And now I have a new blue color that's now being applied to the entire design system. And I will change this code here, which is an interaction color. So that color has been changed, yes. If I return to the templates, you'll see it takes a while. Whether it's visible or not, the colors of the interactive states are now changed to the new blue color. And that's throughout the design system. One other thing that is pretty cool is the background and images. Very, very quickly, if I was to replace the background in the banner, I'd head over to the master component. I have an image here that I prepared earlier. I've inserted that into my background. Library, so I've got a number of libraries. So I've dragged and dropped it, as you can see there. I'll return to my templates and by clicking down into the instance of the background. On the right, we have some toggle options that we pre-built in this tool. And so I can actually select my background here. As I select the background, the background changes. I don't know if you can see that. It changes, depending on the number of background images in my component. Last but not least, the same applies for images. So I can click on an image, keep in mind I've pre-loaded that image in the master component, select the image that I've loaded and I can start customizing this webpage without actually affecting my display. The same applies for content, copy and paste. I'm going to, I hope that I've demonstrated as much as I can. I'm really short of time. I need to get going. But if you'd like to know more about Civic Theme, please come to the booth. My design is always taking longer than it should. I'm a designer, so I can say that. Okay, so I was going to go through and do a Civic Theme build. We've got limited time. I'm going to try and whiz fly through as quickly as I can. So what I've got here is I've got a Civic Theme site. Pre-built some of the things, like the header and things that kind of demonstrate that they can be done. So we've already started adding the design elements. Because what we're doing is replicating what was done in the design that Alan built. So I've just got some menus. There's nothing really in there. This is basically Civic Theme out of the box default. And what I'm going to do is kind of make the header and add a few things like the logo and the color, the color branding color that we showed up. I'm going to quickly go and change the logo first. So you'll see here, this is a little part of Civic Theme now. So this is the way. You can now go in and change and configure all the different things. One of the cool things that I like in here is you can see that the color palette, this is Reflex, the design system. But what you can actually see is what dependencies that are across the different colors. So if you change one color, what do you actually change here? What does it impact? And even better than that is you can go in and individually override any of the colors that you think that you want to change. Or anything you want to do. So I'm going to quickly update. These are the Civic Theme colors. I'm just going to change one. I'm going to change the mobile. If you need to change the variant for the mobile, you can do desktop. We haven't covered this yet, but there's a dark and a light mode. So we have components that are on a darker background, a lighter background. We can adjust for that as well with the design system. So we update that. You can see the colors now should match. Logo updated. I'm going to quickly configure the components. Some of the components are already in there. Command the colors. Command and control. And the... Found in this case, we got different variations for it. So you saw the images that we changed before. The library. So it kills having that background. So yeah, so that's the... So you can see there, we've got the banner now, kind of more or less fixed in a second, but the image is there, the background image is there. I'm going to try and do one more. So there was a slide. So the other component we were going to add is the slider. Yep. A bit more time. So unfortunately this is Drupal in days, not weeks and not minutes. So we had a few more minutes. We can kind of tidy it up, but you can kind of see there, we've got the components there. Most of the elements are there. Tidy that up a bit more. But you can kind of build from Drupal. I'm sorry, from Figma into Drupal without having to do the coding. So use cases. So there's quite a few use cases where you want to do the Figma to Drupal build. Rapid prototyping, as you mentioned earlier, meeting crazy deadlines. So from four weeks, you can now probably do this in a few days. I think Alan hadn't mentioned, but he had done the design side in five hours. I did mine a couple of minutes, but it will take me another half an hour to fix that up. You've got a lot of information to get back at any part of the stage from clients. So you can quickly assemble. Low budget, obviously, from just doing it yourself. And specific theme, which then kind of gives you all the tools and the whole end end process to be able to deliver all of that. And it's open source, open design. So all the design system files are open source and the build is all open.