{"id":195,"date":"2023-09-05T05:38:37","date_gmt":"2023-09-05T05:38:37","guid":{"rendered":"https:\/\/editor.mediahack.co.za\/databites\/?p=195"},"modified":"2025-11-17T17:41:35","modified_gmt":"2025-11-17T17:41:35","slug":"creating-beautiful-custom-charts-with-flourish-and-figma","status":"publish","type":"post","link":"https:\/\/outliereditor.co.za\/index.php\/2023\/09\/05\/creating-beautiful-custom-charts-with-flourish-and-figma\/","title":{"rendered":"How we create custom charts using Flourish and Figma"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

There are a lot of data visualisation tools out there, but two of our favourites are Flourish <\/a>and Figma<\/a>. Flourish is an online tool for turning data into charts, and Figma makes it easy to edit vector-based graphics.<\/p>\n\n\n\n

While Flourish makes great interactive graphics, at The Outlier<\/a> we publish a lot of static graphics and we like to apply our own styles. So it makes sense for us to export static versions of charts from Flourish and then touch them up in Figma. It\u2019s a great combination that helps us produce charts like these<\/a>.<\/p>\n\n\n\n

Following is a step-by-step example of how we do it.<\/p>\n\n\n\n

First, data<\/h2>\n\n\n\n

Before adding your dataset to Flourish you need to know the point you are trying to make. This will influence how you choose to visualise your information.<\/p>\n\n\n\n

In our example, we wanted to show the percentage of schools, per province in South Africa, that did not offer grade 12 mathematics classes in 2021.<\/p>\n\n\n\n

We could add data in two ways, either by copying-and-pasting it into the Flourish sheet or by uploading a CSV file or Excel sheet. All we did was select the ‘Upload data’ option, choose the file and Flourish did the rest.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can see below that our ‘Label’ column (Province) was in column A, and our ‘Values’ column (Percentage) was in column B.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The visualisation<\/h2>\n\n\n\n

Once we\u2019d added our data, we needed to choose a chart type. Flourish offers many different options for visualising data, but for our example, a ‘Column chart’ worked best as we wanted to show each province\u2019s percentage and compare the provinces with one another.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once we’d selected ‘Column chart’ from the right-hand panel, the bars appeared in the same order as they appeared on our Flourish datasheet.<\/p>\n\n\n\n

It\u2019s always a good idea to have your data in either ascending or descending order as opposed to a random arrangement; this makes any outliers much more obvious to the reader. To do this, under ‘Sort mode’, select ‘Value’. This option will put your data in ascending order. You can also sort your data in alphabetical order, according to the label name.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

You\u2019ll notice that the percentage sign does not appear on the bars, despite it appearing in the datasheet. To fix this, select the ‘Number and date formatting’ dropdown menu. In the ‘Suffix’ box, enter a percentage sign. You can also add a prefix if, for example, you are working with a currency, and you can change the number of decimal points.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, select whether you want a legend to appear above the chart. We removed the legend in our example because we were only working with one year of data and we planned to give more information about the data in our heading, which we applied later in Figma. We also didn’t need to add a title or change the column colours because we knew we’d do this later in Figma as well.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now it was time to download the chart as an SVG that we could edit later. We clicked on ‘Export & publish’ in the top right of the Flourish window, clicked ‘Download image’ and selected SVG format.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Customising your chart in Figma<\/h2>\n\n\n\n

To customise your graphic in Figma, first add a frame. Figma has a list of pre-designed frames that work for Twitter, Instagram, Facebook and different device platforms like laptops, smartphones and tablets. You can also manually adjust the width and height of your frame.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you have your frame, think about the following elements:<\/p>\n\n\n\n