Daily Design Learning: Creating charts for applications

Check our cool designs [Link]

Here is an introduction to me.

I am shrey, A Software developer by profession, Designer by passion(love designing interfaces, illustrations etc), A journalist by blood & Chatty in nature

Context !!

I have started daily UI learning workshops, to innate UI/UX skills within me while creating interfaces, the challenge will commence today(21 Feb 2021) and I am planning to pursue it for a month, a 30 day daily UI/UX learning workshop.

DAY ONE!!!

Today’s Learning — How to create charts in Figma?
POA(Plan Of Action) —

1. Take inspirations from Dribbble, Behance or Pinterest.
2. Use Figma plugins like charts (Reference)
3. Choose design schemes like colours, chart types
4. Learn to create curves and shapes in Figma
5. Create your own first charts like a pie or bar chart
6. Lastly, polishing of chart with some colours, borders, effects

Use of a plugin!!

Charts plugin in Figma

I am using the chart plugin of Figma, it pretty simple to create charts on your frame in Figma, as you can see, there are multiple tabs for different charts like Pie Chart, Line Chart, Scatter Chart etc. All you have to do is select chart type, its data values(x-axis and y-axis) and after clicking ADD CHART button, you are done with your first chart in Figma.

Vectors on the left-hand side panel

On the left-hand side panel, you can view the groups and vectors marked so every line in this chart section is a vector or group. By double-clicking on a single vector you can edit the properties of that line chart like colour, strokes, effects, width and all.

Creating a Chart on your own!!

Let’s begin with learning new skills, by working on curves and shapes in Figma. I am breaking down the task for creating a line chart curve as following -

1. Draw a single line by selecting an a-line shape from shape tools.
2. Try to mould, or turn the line from markers by double click it.

Every dot in line is a marker from where you can turn/mould the line

3. After moulding the line choose BEND TOOL to create a circular curve without sharp bends, refer to the image for a better understanding

Creating circular curves from BEND TOOLS on the top left navbar

4. If you learn how to create curves choose multiple markers on that single line and create as many curves as you want to get good hands on it.

5. Now, according to your charts data points/values (x and y-axis) create the required number of curves/markers to draw your own line charts.

Curve line with markers on it.

6. Lastly, polishing your charts with colours, markers, stroke.

Here is the final image of the chart we have created.

Final Line chart UI

Follow/Contact me here.

Email: shreyvijayvargiya26@gmail.com
Discord: shreyvijayvargiya#6842
Dribbble: https://dribbble.com/witness_trey
Github: https://github.com/shreyvijayvargiya

References

1. Deep Dive in Figma Blog
2. Dribbble for inspiration
3. Behance for some more inspiration
4. Charts Plugin