Data visualisation: creating charts in Figma

hello it's Nick and today I want to talk about data visualization data visualization is a representation of data through the use of Graphics such as plots and charts the graphics helps to communicate complex data relationships data visualization is a common task in UI design but creating a plot or chart is a time consuming task that is why I want to review a few popular plugins for figma that can help us with that and in this video I will review 5 popular plugins charts plugin will be the first plugin on our list this plugin offers a collection of popular chart types such as line scatter area bar and pie chart and it also offer a few customization options for each type of a chart such as number of series number of data points and range start and end and the great thing about this plugin that it also also offers a preview mode so we can change the settings and see what we will get before create an actual chart we can play with the settings here and add the chart and once we do that it will create a chart for us as objects that we can play with to customize it for example I want to change the styling of this line make it different color such as a red or I want to create this the background for the plot and make it the lines different color for example Legend will be green for example so this this is the first plugin on our list another plugin that I usually use for the simple charts is called chat line and as you probably guess it allows us to create a simple line chart we can modify things like a number of points make it more points or less points change the slope make it more narrow or more pointy smoothing for the curve make it smooth or Sharp and also we can change the type for the straight and all curved and once we're at the chart line we will add an object that we can also double click and modify if we want so this is it the next one is called fig pie and it allows us to create a simple pie chart we can add or remove number of slices for example I want to add another slice here and I also add more way to this slide slice so for example here you can see that there are slides that we added has 20 data points while other have five productive points and we can also change diameter for example make it 400 pixels and then choose the temp to the different one once we create the chart it will also add the object here so we can also change it to the different one this is it and the next one is plugin is called chart and this plugin allows to create different kinds of charts but it's available in both free and pro mode unfortunately the pre-mod is limited to only two types of the charts it's a linear chart and it's segmented I would say chart while other charts is available in the pro version pro version it costs 20 dollars per year for the individuals and ten dollars for the organizations per month for the charts we can play with the different settings such as data we can change the number of data points that the chart has and the great thing that we can import it as a Json file or as a table and for this style we can change the color and the number of labels Legend Etc so once we create the chart it will create a chart that we can also can play with in figma so it will be vector we can move it here or there and also you can play with the styling settings such as for example we can change the color of the elements make it for example different kinds of color here for example I want to make it red all right and the last plugin and on our list is called NB charts and and B charts I would say the most sophisticated plugin on our list because offers a lot of customization options for example it allows us to change the basic information about the charts labels and styles for the lines horizontal and vertical lines such as for example we can make a dotted or solid and the data can be represented also as data points with a specific styling for example we can make it line or select the whole area in the chart the same as the previous one this plugin is also available in the two versions the free version offers only three type of charts line column and bar chart while other options are hidden behind the paywall but it costs over 20 dollars and it's one-time payment so it won't be annual payment it will be one time payment in order to create the chart we need to select the area and then add required options such as that and draw it so this is it this is the first chart with that we can generate it and let me design another chart just to show you how the settings works so we will remove this one and that one and I will also want to add these settings all right make it let's make it red right all right so let's draw it we can customize the chart and use it so this is it thank you

Channel: Nick Babich

Views: 2,815

Keywords: figma, figma tutorial, figma plugin, figma chart, figma plot, creating plot in figma, creating chart in figma, designing charts, designing plots, designing charts in figma, designing plots in figma

Id: ZPmdUfOcjbk

Length: 6min 23sec (383 seconds)

Published: Sun Aug 27 2023