Onefootball Plugins Suite

Improve the design workflow by bringing
real data in our tools!

DESIGNER / DEVELOPER

GENESIS

Designing with real data is one of the most important step to solve an interface problem. Most of the design tools out there don't have a native implementation for this, but allow you to integrate it with plugins. I worked on my free time on a Sketch plugin letting you fill your interface with your own data. After joining Onefootball, I saw a need to create a dedicated plugins suite to improve the workflow.

Stress test of the header's color
A JSON is used to populate a design via a Sketch plugin

PLUGINS V0.1

I focused on the data we used the most to stress test designs : club logos and club colors. These data were accessible via our API and it took only a few days to create the plugins and release them internally.

Storyboard outlining the structure of the plugins’ first version

Plugin demo

TEXT STYLE CONSISTENCY

A second friction part we spotted in our workflow was the consistency of text style in our designs. Our guidelines contains typographic classes but we had to verify manually if we used to good font and size for each copy. I saw an opportunity to solve this problem with a simple plugin that would create text styles in Sketch based on our guidelines.

Left: Design guidelines / Right: JSON version of the design guidelines

PLUGINS V0.1.5 & V0.2

Another struggle we noticed was outside the design team. Our marketing team is creating infographics every week based on the best 11 players per league. Filling them manually was time-consuming and it could be solved by using our API. This plugin took only a few hours after a refactoring of the previous plugins.
Working with Swift was a great experience, but it was also slowing me down. I decided to replace the native interface with a web view to be able to work faster, create a better UI and more aligned with my knowledge of the web technology.

Player plugin to access basic data about every player
Marketing infographic created every week by our marketing team
Team plugin to access basic data about every team
Competition plugin to access basic data about every competition

SUMMARY & FUTURE

This plugins suite was a great experience to discover and learn what it takes to maintain an app used by others. It also led me to have more interest in designer’s tools and how I could improve workflows leading to better work. All this learning will help me move forward and build some interesting Sketch plugins in the future.

HUBSKIP

Peace of mind for your travel plans.

See case study →

TACKL

Brag about your victory;
Boss your friends for their loss!

See case study →
BACK TO TOP