Generate thousands of custom graphics from any SVG template with a simple script

From a template to hundreds of instances illustration.
From a template to hundreds of instances illustration.

As marketing campaigns become more personalized, designers have the opportunity to have a big influence on the quality of the message.

Mode’s marketing team is pushing the boundaries of what it means to deliver a compelling message that provides value to our audience. As part of a recent initiative, the design team explored how we could create interesting visuals that the sales team would attach to emails sent to potential customers. The challenge was: how could we scale the process to thousands of assets, without any engineering resources, and in less than a week?

Here is a sample of what…

Quick intro to design research and our quest to find the right tool for the job

Eagle desktop app on Mac OS.

In this series, we would like to share our adventures finding the right tool to do better design research. TL;DR: We found what we were looking for with Eagle. We will also share how we are using this amazing tool in the second and third parts.

A little bit of context

Our team has been growing rapidly in the last year. We have now 5 UX Designers in our team. This brings new opportunities, but also new challenges for our design process. One of the aspects we focused on was the design research phase.

So far, whenever we needed to design a new app from…

How we use Eagle in our design research process

Eagle desktop app on Mac OS.

In Part 1, we talked about why Eagle is our favorite tool for design research.

In this post, we will share more about how to set up the tool, and use it, as well as some learnings we gathered along the way.

Before starting, watch the video demo to get a peek at the sleek features this tool has to offer. We’ll go through the basics in this article, and all of the advanced tools in Part 3.

Eagle teaser

Set up

First things first: download Eagle for your Mac or Windows.

Open the app and create a new library. Select a…

Quick overview of advanced features our team uses frequently

Eagle desktop app on Mac OS.

In the previous articles, we shared why Eagle was a great tool for our design research, and how we use it. In this part, we will focus on more tips and tricks our team often uses.

Advanced Features

Chrome extension

Quick tutorial to convert any Sketch custom map to be usable in HighMaps.

I recently had to work on some map charts. And one of them was about showing some key metrics for major cities in the US. After a quick search, the team couldn’t find one that fit our needs. So we looked for a way to design our own in sketch and export it as an SVG to be used in HighMaps.

All the files used in this tutorial are in this Dropbox folder.

If you want to know more about HighMaps, check the introduction for Designers post I wrote.

Here is how we did it:

1. Get a SVG / Sketch version of map to start from

Default US map by states

In our case, we just started from a generic US map

Generate realistic data with Mockaroo to breathe life in your designs

Wouldn’t it be great if instead of dummy text you have real-like text that brings life to your designs? Wouldn’t it be easier for stakeholders to understand what information goes where? Would it even make sense to show dummy text during user testing?

From Mackaroo to your Designs.

What’s Mockaroo?

Mockaroo is a very simple, yet extensive random data generator. The tool allows you to generate thousands of rows of data with over 100 field types to choose from. We’ll get to the details in a sec, but I just want you to be as excited as I was when I first heard about it.

Get to know Highcharts to make the most of it with your team.

Having heavily worked on Analytics products for the past year, I realized a few months back that my own understanding, as well as my team, of how charts work was still a bit blurry. So I decided to dig into the matter and learn more about Highcharts, the framework we are using to power all our data visualizations.

Designing an analytics product is not an easy task. What data should be surfaced? How do you convey its meaning in a useful way? What can actually be built by your developers?

Highcharts has been one of the most popular frameworks in…

Camera iOS 10 UI Kit for Sketch

It all started when I used for the first time the Beta version of Prototype, a Sketch plugin by InVision. I was amazed by the ability to embed a phone feature, such as the camera, in the flow of my prototype.

However, I couldn’t find any Sketch resources of the official Camera app by Apple for the last version of its iOS (10). So that’s when I decided to make my own. The goal was three-fold:

  1. Use it in my own prototypes;
  2. Give back to the community, which is already giving so much;
  3. Learn a bit more about Apple UI…

I’ve seen myself having to create a simple spinner icon a few times lately. And every time, I have to remind myself how to do it, because I don’t use often the techniques needed. So I decided to write a short tutorial, to remember it once and for all. And to, hopefully help other designers to avoid the same frustration.

It’s actually pretty simple, you just have to know the right commands. Here are the 3 steps:

1. Create a shape

The first thing to do is to create any shape you’d like in an artboard.

Create any shape in an artboard.

2. Rotate copies

Select your shape, and go to “Layer >…

Always copy pasting the same kind of information in your comps?

Let me show you how to improve drastically your workflow by creating your own API that can be used with Craft Data plugin, with no coding required at all.

By the way, API stands for Application Program Interface. It makes the communication possible between softwares. Your database and Sketch in this case.

The API will allow you to get the information from your Google Spreadsheet in your Sketch file super easily.

The only tools you need are:

Make sure to do the followings before starting:

  • Install Sketch and Craft

Raffaele Gesulfo

Pushing the boundaries of user experience.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store