Building Gantt Charts in Figma.

Being able to depict data efficiently will help map out projects and keep team members aligned. One particularly useful tool is a 'Gantt chart', named after Henry Gantt—an American mechanical engineer.

It's a graphical depiction of a schedule, using bars to represent start and finish dates of particular project elements. Being able to map out various milestones, tasks, resources, and dependancies greatly aids scheduling, managing and monitoring of projects.

To aid team success, we've put together a Figma template to help build Gantt charts at speed.

Accessing the template.

Once you've registered with Figma, you can begin working with our template. You can either access the embedded iFrame below, or click the link to open in a new browser.

After accessing the file, you can save your own duplicate version to begin editing and creating your own Gantt charts.

We recommend you leave the explainer pages as a backup/foundation, and simply work off of your own new pages.

How to use the template.

We have provided three pages within the template.

Page 1 explains the functionality of the file, with general tips included.

Page 2 is a blank workspace, with a 5 step guide included as follows:

  1. Open components panel.
  2. Drag region block into frame and rename.
  3. Add region alternate.
  4. Add bar and rename.
  5. Double click bar and use colour picker to change colour.

Our third page gives an example of a potential Gannt chart, built by using the above instructions.

As you can see, the project begins in January with a 'concepts' stage, which overlaps with the beginning of work on brand, and design. Later, Layout work and coding work begins.

By February, the concepts phase should be comfortably finished, and the layout phase should also have moved on to 'layout updates'.

You can also note that once coding is almost finished, the quality assurance phase begins. This is dependant on the code being done, which is why the two items are linked with an arrowhead.

We have also introduced key numbers which can be used in two main ways.

  1. The numbers can be linked to notes, denoting particular tasks or achievements due by their place on the chart.
  2. The numbers can be used as particular dates, with further action points listed as a footnote.
    For example, by the 25th of January, we could expect the first brand pyramid and strategy guide to be drafted. As this is a particularly key moment, it's marked out for client and team convenience.

Remember, each component of the chart can be found in the 'assets' section. This allows you to easily drag across an item into your workspace.

Should you wish to change the appearance of a block, you can edit our default colours. This is ideal for creating charts using your brand guidelines. In this example we have used the colour palette from Bloo and Mäd combined.

Key Points.

Gantt Chart's are easily digestible, to visualize scheduling, managing, and monitoring of specific tasks and resources in a project.

Gantt Chart's are commonly used for effective project management.

Effective communication allows teams to stay aligned, and on track. Gantt Chart's are useful in setting clear timelines and having benchmarks to measure progress against.