From design to implementation. Use the power of Figma to build your design system and accelerate your handoff with developers.

Based on CORE, a Design System Starter Kit build with Figma, I created a simple demo to explain the process from design to implementation with a simple and static website.

The purpose of this article is to show you how you could start collaborating inside your team and have a smoother handoff using the power of Figma and a solid design system starter kit.

This demo is available on the Figma Community

1. The design file

The design file I used is called WonderLab — Light Design System and is available at the Figma Community. The main parts of this file are Foundations (including a list of Design Tokens) and Components. …

Start with a rock solid foundation and evolve from a simple system that work

As a coder and designer, I always try to optimize my workflow and to automate the repetitive and less enjoyable tasks in my work so that I can focus on innovative and creative experiences.

Even if a lot of Design Systems UI Kits are currently available, most of them contains a lot of predefined UI elements that don’t really match my own needs. What I was looking for is something that I can intuitively understand and easily scale and share with my team. This is why I started CORE.

Like many designers, I started to work with Sketch which was…

Maxime Rabot

Freelance Visual Designer with focus on Typography & Design Systems.

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