BenjaminUX UI designer

Enhance project industrialization with a reusable, configurable, and dev-ready starter kit

Project done while working at Source Interactive

Team2 leads, 2 designers
Olivier ChatelMaxime FrèreValentin Prost
ResearchDesign OpsFigma
Desktop
Spanning 2 years
sk cover

TL;DR

I know your time is scarce

Avatar sleep
Maintaining delivery standards for a design bureau is hard, because the timeframe of projects can be short.
Reusing design assets from customer to customer is not always possible, especially when they are based in different industries / different ecosystems.
The Starter Kit solves these problems by providing designers with reusable and customable fundations, components, and guidance.
Cover picture of the Figma plugin
Dummy interface to quickly test colors and typescales
Example of finalized kit based on the Starter Kit

Why a Starter Kit?

Two main goals : kickstart projects, train apprentices

1

Re-creating color systems, basic components and documentation each time a project is delivered is a tedious and un-interesting work.

BUT, as customer needs are many, delivering the same UI Kit for all projects is also impossible.

The Starter Kit allows to kickstart ANY project, for ANY customer, with a 100% customable fundation system and documented atoms.

Extract of typescale and components
Tutorial on how to use styles
Tutorial on typescale choices

Our fundations

Exploring Color, Font and Sizing systems
and how to implement them in Figma.

2

We explored many options through the 4 versions of the Starter Kit, following ~2 years of Figma updates and needs from our tech team.

The middle ground between customization efficiency and ease of use has been quite hard to find, esp. in a team of 20+ designers with various preferences and Figma proficiency.

Our last version settled on a collection of Primitives, plugged to contextual style Variables applied to components.

Finalized color systems : Primitives + Styles contextual colors
Typescales and associated tutorial
Tutorial on applying tokens on components

Building blocks

Clean, re-usable, easy to customize atoms.

3
First version
With Properties
With Variables
Version 1 of the kit : No properties, no variables
Version 2 of the kit : Properties and Token Studio
Version 3 of the kit : Properties, Variables and Modes

Building components in Figma has changed a lot since 2020.

The Starter Kit started before the Properties feature, and has seen many quality of life updates since Properties and Variables have been released.

To follow the "starter" philosophy, the Kit only features basic building blocks : buttons, inputs, etc.

The SK2 — Properties + Token Studios is available in the Figma community.

A brand new look & feel for a powerful SaaS

avatar serve

Want to work with me?

Don't hesitate to reach out. I'm a friendly dude.