Sketch Tutorials
Chart Design Automatization
Data visualization tricks and tips for the Sketch app
Hey, how’s it going? Have you heard of charts? Charts, diagrams, and pies are crucial design elements allowing anyone to visualize data in a comfortable eye manner, as well to be used in thousands of dashboard shots around Dribbble. Designers and other folks produce a lot of them, sometimes from scratch, automatically generating them based on specific values.
Every time you say “big data” in public — somewhere, a chart was given birth.
In the latest update of Frames for Sketch v.1.6, we have added Charts components to the master file, so be sure to check them out. And in this episode, we will take a look at data visualization features and extensions that can be helpful in your daily work with these graphics.
Creation
The vector (V) tool has some tricks for certain chart design use cases. Here are some examples:
- You can quickly spread vector and data points evenly by selecting certain elements and distributing them horizontally [⌃⌘H] or vertically [⌃⌘V] according to the X or Y coordinates.
- To create smooth wave-like style charts set points type to “mirror,” and hold both handlers with Shift [⌃] button when adjusting spacing.
- Close your vector paths and use masks to switch between linear and area looking charts quickly.
- Place a new point mid-way between two existing points with Shift-click.
But, working with vectors points can be very time consuming, and maybe I want to generate lines and pies based on the data that is already accessible to me, this is a computer age already? 🤔
So here some extensions that may come in handy:
- Segmented circles plugin — Handy for creating radial diagrams like Pie, Donut, and Gauge.
- Sketch data studio — Can generate charts and tables based on numerical data, but do not support any resizing at all.
- Craft or Content generator — Popular tools thanks to the ability to quickly generate a different type of dummy data.
- Numbers and Excel — Both can export good looking PDF files that you can drop into Sketch and have layers available for charts and table cells.
You can use Frames toolkit (or any other shared styles collection) to assign your brand color quickly and stroke properties to the vector paths and shapes from the PDF you just imported — this is a real time saver sometimes.
There are also other tools out there that maybe you want to mention, but many of them have their own drawbacks when it comes to resizing or customization, which eventually forces you to work with vectors or go through the modal window scenario of creating a chart time after time. 💭
Customization
Customization always important when it comes to visuals. There is still an open room to play with fonts or colors as well as the need to adjust the assets to look perfect within different interface states, and what may look great on a web dashboard may probably look terrible on mobile.
To achieve more automated customization, we use a separate artboard to make a Control panel for storing shared styles that can be easily overwritten with just [⌘+LM], which is probably one of the most basic/popular key combinations.
The Control panel contains different colors and border properties stored as shared layer styles that can for values, grids line, and axis.
This panel allows me to quickly restyle graphics for different tasks, brands, and projects, controlling multiple Borders and Fill properties from a single place, and not getting messed with numerous styles.
To create Data points use symbols with different shapes and colors properties which can be auto-update using colors from your style guide or any other symbol library
Here you can find a .sketch file containing adjustable line chart + additional shared layer styles that you can use as working material for your projects, and to understand how to set up a responsive chart design.
Line chart folder is divided into three groups: Chart (lines and data points), Numbers (Y values) and Gridline (X Values), to make everything work well and stretch, set:
- Pin the X and Y axes values to the bottom and the Left / Right sides of layer group and set them to a fixed size, to make the mainlines independently flexible.
- Put data points into separate groups and align them up with the X / Y coordinate values.
- Use one mask at once for line coordinates to stretch all charts at once.
Test it to see the best amount of values or points for your chart to have, and have a good day. 🎶
Hope it comes in handy, and if you interested in more advanced sketch design approach — get your self a copy of Frames Design System and instead of spending time aligning shapes and playing with layer groups use our premade collection of Charts.
Stay tuned now that we have tables, charts, and every other element synced through our UI library we can move to the next stage of complex dashboard design. 🏃
Before you leave
- Download the demo file here.
- More free chart related resources here → sketchappsources.com/charts
- Find a reason and follow me on Twitter and Dribbble
