 All right welcome everybody. Thank you for coming to the session Designing Drupal experiences with Figma Before I get started. I had a few questions for the group Raise your hand if you went to the pantheon event last night All right, well congrats on making you here this early. I'm really impressed I didn't go because I was nervous about this so Who here is a designer? Okay nice developers Okay, a lot of developers great. Well, I think really everyone's going to get something out of this We're keeping it with really high level about what Figma is and how we can hand it off how designers hand things off to developers So first a little bit about me. Hello. I'm Matt Curtin. I'm the director of design here at phase two This is my third Drupal con, but first time actually speaking so Yeah, we'll see how it goes This clicker is also not working very well, so it is what it is So I'm sure you've seen this slide before or heard about phase two at some point If not, I'm very concerned. You need to go to booth 333 immediately after this There are huge glowing trees. You can't miss it and talk to some of our team and and learn more about us But we're a digital product agency. We're passionate about the customer experience granted and data insights And we've been around for over two decades Here are some stats really illustrating our commitment to Drupal over 85 developers on staff and over a thousand Drupal developers or Drupal projects that have been built So a lot of commitment to Drupal I wanted to start off the session talking about the old days of design handoffs I wanted to tell a brief story the design and creative team has worked really hard with the client to Establish design compositions for their next Drupal build Everyone's excited. We've been through rounds of revisions. We have a Final design approved by the client. We're ready to start building right We pass off the design files to the developers and here come the questions How do I inspect the designs in this case? We were using Adobe Illustrator to create the designs We had these beautiful colors in CMYK and you know, everything was looking great the clients excited Developers get the files they get a PDF. I can't inspect these designs. How do I grab assets? How do I look at things like padding font size things like that? next question What is the what which file is the main source of truth? We tip we've all seen a folder of files like this We're going back and forth with the client. There's a lot of hands in the pot designers helping out with the files You know the developers see this this folder and they're like, what am I looking at here? I'm sure we've all seen a file named final final final before Can you I elements be standardized while every composition might look beautiful and consistent developers start digging in and they find Really subtle differences with things like buttons and card treatments and you know, some things have borders some don't Sometimes the icons on the left or right. How do we standardize some of these components that we're building to do things faster? So the designers left kind of figuring out how to consolidate all of these treatments Where can I find images icons and other assets? We use a lot of images that were on brand a lot of icons back on graphics things like that All these are kind of locked into the design file and the developers have to keep coming to the designer to ask for different assets Really the designers spending a lot of time doing that What are the various in the active interactive states? So we might have designs that show the active menu drop-downs and other states on primary components But other subtle animations and interactions like a button hover or a focus state aren't really documented anywhere So the developers are left kind of assuming what those treatments might actually be How does a responsive grid impact component padding and sizing we create several desktop tablet mobile compositions, but again There's a lot of edge cases with devices and how do these? components scale and expand based on the device that they're rendering on again leaving the designer to do yet more Compositions and to show that breakdown So at the end of the day The designer was excited to move on to either the next project or continuing to create compositions that might be added in post-launch Instead they're spending a lot of time working with the developers to actually hand off everything everyone's frustrated How can we improve this process? in the recent years The industry has been flooded with several design and prototyping tools to make both the designers lives easier and developers Tools like sketch Adobe XD and framer just to name a few From the developer handoff things like avacoad zeppelin and vision design system manager All allow you to upload design files to share with your development team The creative team at phase two has really adopted figma as our main creative tool For everything that we do on the creative side and also development handoff So what features make this such a powerful tool and why did we want to adopt that? Before I get into that I have some starter definitions just so we're make sure we're speaking the same language as we go through these slides We'll start with a component So a component components are elements that you can reuse across your designs They help create and manage consistent designs across all of your projects So again, they're just reusable objects that you can use throughout all of your design compositions They allow you to work faster because you're just reusing the same components and edging content within them And they introduce consistency and rules to follow for both designers and developers as we're working on both sides of either the web project or the compositions Here is a giant button an example of a base component Here we can see you know keeping things very simple with this component We have a border radius background and a base color and font Defined there and text is centered within the button. So just defining those base properties Next is a variant variants provide a way to organize and combine similar components into one overarching components set So with variants we can introduce Subtle changes to a component like the size the content the mode or the state so hover or focus state for example It really helps keep all of our complex components organized when we pass things off to the front and devs So here's an example of that same button, but now we've added some variants to that So we've added some support for potentially adding an icon to the button Maybe a hover or focus state and even introducing a secondary button treatment for a background and changing the text color of that button Then the final definition is the design system So design system is a complete set of standards intended to manage design at scale using reusing usable components and patterns So we think about a design system think about the client that's coming to us They've spent a lot of time and effort establishing their brand and And you know that a lot of time and money doing that so as a web designer and developer I want to make sure that I protect that brand as much as possible as we take that and move it to the digital space When we're working in design systems, it allows us to to expand and grow the system over time and Work more efficiently as a team So why are we recommending Figma for all of this? First it's fast and platform agnostic Meaning anyone with any device can open up a Figma file and and start digging in whether using Apple machine windows or even Linux Allow us a real-time design collaboration. So many designers can be working in the same design the design file at the same time We can even click someone's avatar at the top of the page and observe that design are working We often do that internally a lot when we're collaborating on either a design review or just even a quick sync Like Drupal it has a lot of community support There's thousands of plugins available that allow you to install quickly and use it whether it's for designing faster Or you know checkings for accessibility things like that. There's a lot of plugins available Next level components will talk a lot about this today, but really building interactive components and defining states all in one place Client feedback and commenting so not just exclusive to clients, but really anyone can jump into a file Identify an item that they want to have a comment to or have a question about and there can be some real-time collaboration and discussion about that that element and how it can change Built-in developer handoff so Even as we're designing before designs are approved We can get developers in there and they can start inspecting elements that we're introducing into the design system and really check things like font size spacing Everything color all the things that we're introducing into the design right there And we'll go through that this inspect tab that we see here as well Before I do that I want to talk a little bit to designers in the room about some of the more design features here Global styles so Figma allows designers to establish reusable properties as I'm starting to create my design system in my compositions Things like color typography effects and layout grids can all be saved As I'm working in my style library And I can and by doing this and taking this approach by defining all my color sets and things like that I can quickly change These properties globally across all my compositions Content components so again, we've talked about what a component is we can establish these base components as we're working and creating these Compositions so no longer are we copy and pasting group layers and and just reusing them and iterating them on compositions We're changing them globally across all of the compositions we create taking more of an atomic design approach here So again starting simple with a component like the button we saw and then introducing those that's something like that into a more complex Nested or slotted component that we can continue to iterate a pattern library So I'll give a quick demo of what this looks like but all the components and base styles are all organized in a library And they're available to the entire design team as they're working and collaborating on a design project There's also multiple library support for larger organizations that have a much bigger brand or sub-brands So in this example we can see the library is on the left side I then click that and I can see all of the colors typography and things like that that I've already defined in my Design system as I'm working in these compositions. I can then grab and use some of these components from this library Let's say I want to close that and jump into an individual button I want to change the hover state on my primary button I want to darken that just to make it a little bit more prominent than I'm hovering over it I can then see I've changed something in the library I can then look at that that change I can see that I've not only impacted the button component, but also some of the more complex components that use it I can add a note about what I'm changing. So I'm changing that button style I can update that and publish that to the library once I publish that In this case the library is local to this figma file But if I have that library shared to other files All of those will will grab that change and designers working that file can see what I changed and pull that in Auto layout great feature for designers to really align and things faster You can apply auto layout to not just individual components to have consistent spacing between layers for example But you can also group components. So in this case, I have a grid of cards I can make sure that the spacing on the top on the between them on and below them are consistent throughout in this example have applied auto layout to the Entire frame for the final location page and what this is doing is making sure that As I add and remove sections of content the entire frame will grow and collapse I'm also applying auto layout to the overall location card grid Just to make sure all of the rows of cards are Consistently spaced. Let's say the client wants to add more T location teasers to the the first page of the listing I can continue to add these rows and my design Expands as I continue to add them Interactive prototyping so oftentimes Looking at flat design files isn't really enough We need to to add some prototyping so that both the client and the developer understands how how the end user will interact with something Smart anime is a tool in figma that introduces smooth transitions Between components just so it really mimics the animated experience that we're going to have as the end user on the the built-out app It allows us also to define flows that the user would take for a conversion Like making a purchase or finding care information It also provides a comprehensive list of triggers. So whether I'm touching something on click hover All of those triggers are all very easy to use here in the prototyping tool In this example, you can see I have a lot of app screens With various goals and providing information to a particular patient who's looking for care or looking for a location In this case, I've actually done some prototyping in the individual component itself for the menu So I can click here go to the prototyping tab and I can see all of the various prototyping that I've already done I can go to the main menu hamburger and see that you know That's being prototyped to open up here. I can also do a lot of prototyping to mimic a drill down menu as well. So And Once I'm done with that I can also even do some some prototyping in the artboards themselves so that The client when they're they're demoing this or the developer when they're looking at this They can see that these things are prototyped and clickable to various other pages and they can really see the flow there That's defined once I'm done with all my prototyping. I can hit play and I can actually prototype this directly on a device to really give that feel and I can start driving around So if this is shared with a client or developer, I can really understand how I can go and see my care options I can click some of these accordions and see all informations organized there And I can just drive around and scroll to maybe the home page Clicking the logo going back and seeing all the various sections and controls Some of these are prototyped and some of these are not just to kind of demonstrate like the fixed menu at the top and things like that I can then click the menu We can see all that prototyping work that I've done in that interactive component to drill down into various pages Let's say I want to go to campus maps and see all the various location options if I have an appointment somewhere I can quickly also click one of these locations. Let's say I have an appointment at the main medical center campus I can get walking directions go to the campus map things like that And I just allows me to drive around and really experience how the design was was really intended I Can also, you know, just go further drilling down into wellness services and access, you know, healthy eating fitness recommendations and resources and performance training Stakeholder presentations. We just saw kind of a quick demo of something like that but figma allows us to break out of the the art boards and the frames and Present in a more polished way to clients and then also follow that up with some share links as well And we also allow comp it's allows commenting and feedback directly in figma So we keep all of that feedback in one place In this example, you can see we're presenting a table of contents to the client So they can see all of the various pages that we've created for the various content types in Drupal I can click on any of those and immediately start interacting with something like the home page I can see how the main menu works see how the search can work when I open that up And then I can just start driving around and exploring the home page And we can really see how some of these interactive components come to life as I drive around Again similar to the app. We saw before I can drill down into sub pages We didn't list all of the services, but we can really see how I can go through and scroll and jump back up We even prototyped something like the live chat at the bottom Just to really see how that's fixed the bottom of the screen and how that experience will work We can go to other landing pages Like getting information about my chart And really just driving around and you can see how we use this for actual client presentations We drive around and show them how it works And then we just share a quick figment link. They have the table of contents And they can experience it for themselves offline If things aren't prototyped they can use the left and right arrows just to quickly go through some of these other pages And and see the other compositions that were created and If there's a change that they want they can quickly hit the C key and put a comment anywhere So let's say I want to change the treatment of the clear filters building. I don't necessarily like the red That comment goes right to me. I can then respond directly to that or simply make the change Accessibility is a really important aspect to everything that we do at phase two And figma really helps us there with some accessibility plugins The things that I really care about as I'm working is the proper color contrast Touch targets so the 48 by 48 pixels on on a mobile device is really important And then text in line height making things making sure text is really legible and readable on all devices There's several plugins that are available that make sure allow us to test things for WCAG double a and triple a We always have a double a standard, but triple a is like the goal to strive to So things like able contrast and stark are three plugins. We really recommend for that. You can see here I'm using able to test the color contrast on the menu that we just saw And I'm passing with double a and triple a on all different font sizes I have the proper contest contrast ratio and I can even get a preview of how someone with color blindness would would be digesting that And I can toggle on different types of color blindness as well Now let's get into some of the developer features as well for our handoffs First I'm going to do a tour of the inspect tab Really quick. We can see at the top. I've shared a link with the developer. They immediately start jumping in I inspect the button. I can see at the top of the screen that it's using that primary button component I can click that at the top and jump right into that main component and check it out more and see the variance I can see that that button is part of the hero banner component as well And I can see what variant that is Next is the properties the main properties we care about here are really the padding and you know Potentially if I could dig deeper I can inspect things like font size and other and things like that You'll also notice that as I'm digging deeper. I'm seeing Some guides up here that show me spacing between elements no more redlining for designers. I don't have to Put guides on the page and help developers see what the spacing between elements everything's really done in the app as they're inspecting things And I completely skip what this is showing but I can inspect something like the button and see that I'm using the white color I can see have the naming convention that and how I'm organizing that color and depending on how I'm developing I can grab the hex color RGB values and various other options Typography is another thing again. I can see how I'm organizing all my headings I'm currently using the the large h2 here and again. We can see that spacing between the image and the text group Things like shadows as well If an element has a shadow you can see I'm using a consistent card shadow throughout So if I make a change to that core shadow every element using it will have that change as well and finally Tigma does allow CSS to print So this would not be something you would copy and paste and actually use but it does have some suggested properties and Things that at least get development started and Finally, most importantly a lot of the assets can be clicked and exported directly in this case We're exporting SVG directly out of figma The responsive grid we talked about that before just defining all of our our different grid styles It'll make sure that we're aligning things properly in the designs and the developers have a good idea of consistent spacing throughout for grids and other layouts One one big question that we get from the development team all the time is you've accounted for really small devices and how things Get smaller, but what about the ultra wide break points? It's that's something we also define is How does the theme expand to those large monitors those TV screens that people commonly use now? Design system documentation so along with the Compositions and the component library we take it one step further and actually put together some component sheets Just showing all the various states and variants that a component might have this also allows us to put Design notes and guidelines to developers when we're passing things off to them So here's an example of that again. We can see we're using that table of contents format format So I can dive into my core components like looking at colors all the brand colors and documentation there My typography so all of the headings that I'm using you'll see they're just notes throughout I'm really defining those sizes in pixels and rems And then I can also see things like links and paragraph content along with hover states defining those Active and hover states on elements as well things like form elements things like that alert banners and And The buttons really just putting all of those out in the open and defining that all of the focus states And edge cases that a developer would need to account for when they're building these things I can also jump back to the table of contents at any time and go into some things like the WYSIWYG content seeing how we intend columns to work if we want to have image aligned with a call to action and things like that along with our Reference cards now keep in mind that these names also go exact Pair directly with how the developers are naming them in their design system on the front end Just so the client knows when we refer to an account component what we're talking about And then the developers everybody's on the same page if we if we say full video teaser We know exactly What I'm talking about there and and we're all speaking the same language about components there So It's at a certain point when the designs are getting close to approved or even when we have that round one design presented We're already starting to transition the design source of truth from Figma to Outline and to our web components that we're building on the front end So in this graphic and kind of see how things are talking to each other We have the design system working in Figma We have our our outline system, which is our web components that our team uses internally And then we have everything kind of documented in storybook and pulled together there So designers and developers can really work together and see how things come to life So here we see one example. We have a component in Figma And it's time to transition this to Drupal and to storybook And so we can see I've pulled that component into storybook as a designer I'm jumping in here and testing things out making sure everything's consistent Image size is consistent the sizing and everything that I had to find in Figma We can also see that things are being used as slots or variants Here as well so I can I can change this control to change the color directly to the green primary and so the blue I Can also change settings like the alignment of the text and image Right here in storybook and see that come to life I can also toggle on the code view so I can see how that code would translate to Drupal None of this is pulling an actual Drupal variable variables or any actual Drupal type code. It's all just plain old HTML that we're going to be using to to plug into Drupal and build that component So here's a preview of storybook So as a designer I'm jumping in here and I can really see everything's housed in here So all my various button styles I can interact with those elements I can view the code of those elements and then I can jump into some more complex components as well And really dig deeper into the storybook instance Just so as I'm digging as I'm looking at the interactivity I can you know collaborate with the developer and make subtle changes to make sure things are consistent from what we're seeing in Figma Really we want to account for all of the edge cases here So if we added a bunch of buttons so I might like talk about some of the padding between those buttons there And then when I jump into Drupal on the staging site, I can there's no surprises I know exactly what I'm getting when we when we start adding some of the real content in Drupal We're all on the same page with with how these components look So to talk a little bit more about outline Outlines a set of tools and best practices for developing a design system with platform agnostic web components So really at the end of the day, it's simply JavaScript HTML and CSS I'm not going to go too far in depth with with outline But Jake strong our senior software architect gave a great talk on Tuesday about outline And I definitely encourage you to go to our booth 3 3 3 and check him out at 2 p.m He's going to be giving it a demo about outline. So any designer developer anyone. It's a it's a great demo So what outline provides again talked about platform agnostic web components Things that we can reuse a from project to project from a design perspective I can see all of those base components and I have a good idea when I'm designing You know, what is one of my doing that's going to maybe introduce either a new component that we have to talk about adding to outline Or is there something that we can do to maybe extend it, but really I have my baseline for for all the components There's probably about 80 components that I can choose from And again, we we can you know build that internally over time as we run into more edge cases for for the needs of New components once we add one we can use it and extend it across any project. So we can develop faster and quicker And another good thing is it's it's available on github. So you can jump into that link github phase 2 slash outline and really just see the code base and see the base components that we're already working with So what's next? And we've already done a lot with figma And it's really ingrained in our in our processes, but what what it where we want to go next with it Um figma branching. So when we talk about branching, this is the same exact concept for developers as we would do with with github We would make a feature branch off of our develop would say It's and we can make changes code changes that and then we can test it and we can merge it right back in To our main code base. You can do the same thing with figma Several designers can be working on a complex design system. Let's say I want to make a change to a button I feature that off. I Make a merge request. I can check and see if there's any conflicts with another design that's working in the system And then I can commit that to the main master design system We want to introduce more animation and movement Prototyping and smart animation really only gets us so far But there's tools like principle and after effects that allow you to upload your designs to them and really create more Engaging videos and animations and transitions as I scroll through a design It's really where we want to go for mainly for client presentations to to really show them how that design is going to come to life on the front end Design tokens so we've talked a little bit about design tokens in a past presentation for outline. It's really where we want to go design tokens is not really a new concept, but We're really limited in these design tools as what type of tokens we have access to They're really everything that we everything that we do in the design system can be turned into a design token So like we're talking outline. It's a platform agnostic way for design to communicate directly with development through JSON Each of these variables contains an individual design decision So spacing color typography shadows and blurs all can be documented in an individual token The goal is to define properties in an atomic way There can be options for there can be either option tokens or alias tokens option tokens define the value For example that hex color while alias tokens define the purpose. So a CTA background or a button So we can see here in this example. We have blue 400 which is used to define that hex color for the blue But in a traditional way, I'd be applying that blue 400 to my headings my buttons Everything. So let's say I wanted to make a change to just the CTA background color I can't just change that blue because that would change everything. So I would change that individual token to target Just that element. So it's it's just a faster way to work and a smarter way to define our properties Figma tokens is the most popular Figma plugin for design tokens They help designers generate That those base tokens and that JSON output They can then sync that JSON Through JSON bin or github, which is what we use and push that JSON up to the actual web design system So we can see here we have our our base tokens defined we can see the color set and then we can see that translated to the tokens The craters craters of Figma tokens recently released released a base theme that is super charged with design tokens The theme is relatively inexpensive and really allows you to to dig in and see how Figma tokens can be used sometimes. It's a little bit difficult to get started And this is a great way to see how it's being used actively This is just a really cool example Of I'm actually in cabana right now And I can see you know here. We're looking at several car components One cool thing they're introducing is both a light and dark theme, which I think is a really interesting Perspective there. We're seeing more and more browsers and devices switching to light mode or dark mode So maybe when we're designing something we should account for that as well We can see here. I can jump into the Figma tokens plug-in I can toggle on my dark theme as I do that all of my components my Compositions all change to that dark mode and we can see takes a little bit because all the tokens are Firing but we can see as I click maybe a sub theme of dark how all of those components pick up those tokens I can see what that sub theme looks like for my accent colors backgrounds And then I can toggle on the JSON and see what that output would look like when I send that to my development team So here's my second to last slide or my pen ultimate slide So we just pulled together some plugins of choice We've seen a few of these already Figma tokens able Things like that a few others. I wanted to point out as the downsized module plug-in Sometimes we're working with a huge design system a lot of compositions. We have a lot of imagery icons being used This downside plug-in allows us to globally downsize all the images we're using to really Make that file much smaller and faster perform it Export comments is another one that I've run into that I use a lot While we want to keep all the feedback and comments in Figma This plug-ins a great tool if the client wants to have all the comments exported into like a spreadsheet or something like that It's one click you generate an Excel document. You can use it as a Google spreadsheet, whatever and keep everything there as well All right Thank you. How are we doing on time? Pretty good. I would like to open up for questions for the most part there are some that are They allow some features when you install it But then you know if you want like the upgraded features, they're like, hey, give us five bucks or something so like they're pretty inexpensive, but Some of them do have a cost for them Yep So in terms of like the larger and smaller artboards We're just using pixels But what we do is we're defining all of those breakpoints So like I'll have my headings folder and then I'll have my various device folders as well for all those different sizes So they'll be like an H2 Maybe they might be like a jumbo H1 Then there's like a standard H1 and then we we size all of those down so on those individual devices I'm just using those those mobile specific ones Exactly. Yeah I would say with those different rounds of revisions typically what I'd recommend if you if you want to keep working in the same file Sometimes it might make sense when you share a bunch of design compositions Maybe you globally like detaching the instance of those components that way if you like change something You can always keep that share link and that will just be the share link forever And then you can keep like having more rounds where you're working with live components So I would just like duplicate all of them say round to Keep those components live because you're iterating those and then like keep the round one locked in that way Someone can see oh, where were we before what these designs look like before if you change the live component You're change that design to that's a common problem that we run into too So I just recommend like detaching those instances that we lock those artboards in and you and each round You just share a different link and often times clients like to keep it like a living link and we keep iterating They don't even maybe we export all that all of them as flat PDFs just to like keep it timestamp on those We just keep iterating the same file over and over Mm-hmm We organize them in like pages and sections So like we'll have a section dedicated to those that doesn't those design documentation sheets that you saw And those evolve over time. We don't we don't make rounds of those And then the individual pages where we lock in so we clearly label those so like if I jump in I can say like look at this This is the final approved compositions. So it's really all about communicating within the app and the labeling you're doing Yep in the back To edit like the boot. So you basically installed I couldn't hear you that well, but you installed like a bootstrap 5 base theme in Figma Which gives you like a library components you can then use right? And you're asking How you work with that? Mm-hmm. I would say the benefits to that is bootstrap is a web framework So your development team is gonna like if they know you're using that kit They they install bootstrap on there and they start working with those core components And then you're modifying like the treatments of those components and the code the output of the code doesn't change It's just really just CSS and how you're manipulating the actual components So there is value to that in our case We're using outline as that framework but of web components, but you could use bootstrap or foundation or something like that We're moving a storybook is essentially our pattern lab a few years I would say it's taken a while and it's it's still evolving honestly like What I showed today could be slightly different tomorrow We're constantly improving it based it based on our need for project to project So I might find that I need to add more documentation on particular components But the the cool part is is once I do that I can replicate that on other projects moving forward So it's evolving, but I would say it's taken a few years to kind of evolve. It's at this point Yeah, so the value of outline it's platform agnostic So again, I'm looking at storybook, and I'm just seeing the HTML and CSS output no twig at all. So I Can translate that to a react app. I can translate that to Drupal. It doesn't matter what I'm building at the end of the day What I'm seeing in storybook is just the web component that I would then be injecting What I need for react or Drupal into it So it wouldn't be like pattern lab, which is entirely twig based And it would only work with Drupal or a twig based system It would it can be applied anywhere, and we've already done that on several projects. Any other questions? Yes Yeah, that's that's very true. I Keep things very basic. I would say I wanted I wanted to find my my core interactions. So You know those like button interactions Maybe the image zooms a little bit when I hover over something. So really subtle things like that And if I decide to do like a video background or a transition, I might pull that into principle and do that I guess I'm one off That way I can say here's more of a drastic animation But let's look at the design file and interact with it But more like prototyping menus and things that I'd have to like click or hover on to activate as opposed to a lot Of flashy things in the background and figma Yes Okay into figma directly I would I Definitely encourage you to go to the booth and talk to Jake. I'm gonna completely defer that question to Jake and he can he can illustrate that process as it from the design standpoint I get shared a Staging link or a storybook instance link and I look at a component and test it there and compare it to what I built in Sigma in terms of how that's done I I would venture to say that we have our outline components. We do our base install of that We start modifying that and pulling the code into Storybook it basically storybooks a way that we communicate back and forth from figment to outline Eventually with figma tokens, we'd love that to be automated. Yes That's kind of where we want to go and by using the JSON output We could communicate and say oh this border radius changed or this color change subtly No need to the developer even be involved. It's just done Yep Yes, and no, I would say like For sure from a standpoint of like I know all of the components they're working on I know their methodologies and like what questions they're gonna ask me I actually was coming from a place where I would design and have to build myself So I was using a lot of the things like bootstrap Myself to to build out those components So I'm less involved in the actual like coding of things But hat knowing like how those components are structured out of the gate in outline I know like kind of what I can do and and not do or what I can do and then say hey developer I know I'm extending this component functionality, but here's how I think we could modify it or add a new component For example, so it does make it easier in that regard It's not like a guessing game of like how are we gonna build this thing? How is it gonna be coded? It's we kind of have an idea already So Zeppelin you could upload a Figma file and then I don't use it too much But I know that you could upload Figma and that allows developers to kind of define the tokens that way so technically yes because we could Like mold Zeppelin to work with our web components Outline would be really beneficial for headless. Yes, because again, it's platform agnostic So it's really just JS with HTML and CSS output. No Would it be hard to implement? We're getting out of my element here. Any other questions? I will be at the booth After this if you want to come in and chat And then again Jake will be talking outline. So any technical questions like he can really answer those I'd just be answering the best I could and maybe give you the wrong answer