How to Master the NEW HubSpot Figma Design Kit?

Hey y', all, It's Brooke with HubSpot. Today I'm going to show you how you can make use of our Figma Design Kit for UI extensions. The figma Design kit gives you all the information you need to know about the different UI components that are available for you and the design patterns that you should follow to create great UI extensions. The figma Design Kit is now available for all users. To get a copy of your own, you can, you can go to our developer documentation, which will be linked below in the description box. This will take you to our page that will explain what the Figma Design kit has and a link to get to it. So now let's go into figma. We're on our Figma Design page and so we're going to scroll down until we see access the kit. Now we're going to go ahead and click on get the Kit. This is going to take us to the Figma page. And if you don't have a Figma account, you can sign up for a free Figma account. You don't need to have a paid account in order to use this design kit. So now we're going to click on Open in Figma. And to make your own copy, you're going to click on the name up here, HubSpot Expensibility Design. Click on the little carrot, then click on Duplicate. And now you have your own version of it. The first thing you'll see is an introduction in the documentation section that will tell you how to use it. It will also give you a link to submit feedback to our team. It'll show you the card anatomy and all the different screens within HubSpot that a UI extension can live on. And you can see the changelog. The next thing you'll see are the design patterns which will show you different ways to use the different buttons and the recommendations from HubSpot. And finally, you'll see all of the components that are available. These components are also listed on our developer documentation. So if you want a full list, check out the developer documentation. Now let's build our own card. First, let's create a new page within Figma by clicking on the plus icon and let's name this my uie. Now, what I like to do to make it easier for me to visually understand how to how this is going to work on the page is I like to go over to the Card anatomy and location wires page. And then what I like to do is I like to choose one of these location wires. So for this one, let's just Make a standard UI extension that will live in the middle column. So all we have to do in order to copy this over is by clicking on it and then clicking Copy. And then now we can go back to the page that we created. So we'll go back to my uie and then all we have to do is paste in what we copied. Great. So now we have our own HubSpot UI page and we're going to make our middle column card. So first we don't need the rest of these cards. So we can go here. It'll show you all of the different layers that are on the page. So we have three cards here. So we're going to go ahead and take all of these and then we're just going to delete them out of our page. So the first thing that we want to do is detach this instance from the main instance. So when you create things within figma, you can create something that's known as a component. A component means that you can reuse this design across pages and set different rules for what you want it to look like so that you can keep consistent styling across pages. However, when you're making your own design, you want to detach these components so that you don't mess up the original component. If it is a component, it will be highlighted in the color purple. So in order to detach our instance in the Layer section, we're going to go ahead and right click and then we're going to click Detach instance. This is going to allow us to make changes only to this instance and not to all of the instances within this document. Now what we're going to do is this is a little bit small, so we're going to go ahead and make this bigger so we have some more room in order to add our stuff here. So we have the title. The title is just going to be what you set within the JSON itself. And so here we're just going to name this a table and chart uie. And now we don't need this paragraph section. So we're just going to click on it. And then we are going to click on the delete button and that will delete it from it. Now let's look how we can add a table with a simple header. So in order to add the pre built components inside of this Figma design kit, you're going to click on the Assets tab. Then when you're in the Assets tab, you're going to click on the created in this file library. And this is going to have all of the different UI components available. So to make this simpler, let's search for heading. And now the heading text is here and we can just go ahead and drag this onto our page. So this is automatically aligned to the center of your card because in the auto layout section, the alignment is set to center top. So this is like using Flex where you can say that you want to justify your content to the center. So now that we have the heading text, let's go ahead and add in our table header. So let's search for table and then the first thing that we will need is the table head. So we just go ahead and drag this over to the page like we did. And now we see that this is a little bit big for our area. So if we right click on this component, because it's still connected to the main component, we can right click on it and choose change variant. And then this will allow you to change the table head slot amount. Let's change this to five. And that will make sure that we only have five columns. So now let's make sure it fits within our card area by going to auto layout and then resizing. Instead of the width being a fixed width, we are going to do fill container. Now it's only going to be the width of the container itself. So now we need to add some table rows to this. So one way that we can do this really quickly is actually by just copying this table header and we can use the keyboard shortcut option on Mac. And then this will allow us to go ahead and make a duplicate instance of this, just like how we were able to change the number of rows that we had. We can also go in and change the instance of this UI component. And so now instead of having the instance be the table head, we are going to have it be the table row. In order to do that, we're going to click on a row, we're going to right click and then we're going to click on swap instance. And then we're going to click on table row and we're going to do that for all three of the ones that we did. Now these are going to auto go to that eight column. So we will have to right click again and click change variate table row slot amount and we'll have to set it to five. And then let's say that this table has a lot more data, but we want to keep it compact for the page we can go ahead and add in a paginator so that people can click through the table. So that's A really easy way for you to use the Figma design kit to build a table. Now let's look at how we can add something a little bit more complex, a chart, just like how we started. We're going to go back to the Assets tab and we're going to search for chart. The current charts that we have available for UI extensions are bar charts and line charts. So for this one, let's go ahead and pick a bar chart and we'll just go ahead and do this first one, this stacked bar chart, and let's go ahead and add it to our page. So for this chart one, let me show you the different variants that we have. We're going to right click again and we're going to click on swap instance. We can do a not stacked with a legend, we can swap it to a not stacked one with no legend and we can do a stacked one. Additionally, we have some variants so we can change the variant to the bars 1, 0 through 4. So we can change the number of bars that we have. We can also change the orientation. Vertical is default, but we can also switch it to be a horizontal chart. And those are the options that we have for the bar chart. So I like this horizontal one. So now we're going to go ahead and just detach this instance of our bar chart. And so now we have our table and our chart on our UI extension. If we want to change the colors of the chart, we can actually go in and we can see in this section that we have our selection colors. And one of the great things about this being a library is that it has all of the colors that are within the HubSpot guidelines, so you can easily just switch them out for a different one and they will change in all instances, but you're still going to be matching our themes and colors. So now that we have our card, let me show you how you can share this with other people. They don't need a Figma account in order to see this. They just have to be able to access the link. So what we're going to do is we're going to make sure we click on the entire record page and let's go ahead and change this name to my UIE with table and chart. So then people will know what this is. And now that we have it all highlighted in the very top right corner, we're going to click on share and then we're going to make sure the access is anyone can view. And then we're going to go ahead and click on Copy link and now let's go ahead and open this in a new incognito window so then when you send this link to someone, they'll be able to see exactly how your UI extension is going to look on the page without having to be logged into Figma itself. Thank you so much for watching. I hope you enjoyed this video. I hope this is helpful for you as you start to use our Figma design kit and design your own UI extensions. Please make sure that you like and subscribe to the HubSpot Developers YouTube channel and I'll see you all in another video. Bye bye bye.