Demo — Light Design System

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. This is the essential part of any Design System and will be a reference for everything you will create in the future.

Foundations

  • Logos: main logo including some other variations
  • Typography: typefaces you are using, their weights, the size scales between mobile and desktop and all other typographic rules
  • Colors: complete color palette, from primary colors to grey shades
  • Grid & Spacing: breakpoints, grid system and spacing units
  • Icons: icon library
  • But maybe more: of course you can include more elements like illustrations or picture styles. Everything that support your brand.
Foundations in 2 modes: dark and light
Design Tokens. The bridge between Designers and Developers

Design Tokens

Design Tokens are the visual atoms of the design system — specifically, they are named entities that store visual design attributes (spacing, color, typography, object styles, animation, etc. — represented as data). They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.

In this demo, I used SASS variables as “tokens” since I will focus on a website project. In most cases, tokens will be generated as a JSON file so anyone in your team could use it for any kind of project (App, Web,…).

Components

This is where you start building your components, starting from the smallest unit to more complex one. This methodology is called Atomic Design, a better way to organize and structure your UI elements and keep it consistent.
I already defined some standard UI components like Buttons and Forms, and a more complex one called “Card”.

Figma for developers

Figma let you share and communicate your designs to your developers (or anybody else) in a really easy way. You just have to share one link. This URL acts a single-source-of-truth for everybody in and outside the team.

Some useful features are:
- Display CSS: show CSS values of selected elements.
- Code view: show iOS or Android values of selected elements
- Prototype: using Presentation View and Prototype to understand interactions and user flow to let them better understand the interaction
- Measurements: show dimension of selected elements or spaces between
- Comments: allow comments inside your design file

Figma for everyone. Free, browser based, intuitive and collaborative.

2. The HTML files

I’m using a basic HTML/SCSS template. You can have a look to the source files at Github and visit the DEMO PAGE.

Step1: Global settings

As mentioned before, the Design Tokens are stored as SASS variables in the config file. This is one of the very first steps before you start building your project. Naming your elements and giving them a value. Having a central place for that will help you keep consistency and help the communication between designers and developers.

Step2: Components

Now you can start setting the building blocks of your interface.

  • Foundation
    - base: includes the definition of all pure HTML elements
    - typography: includes typography definition for headlines and paragraphs (+ responsive)
  • Layout
    -
    layout: includes page spacings and grid system
  • Components
    -
    buttons
    - forms
    - card
    - header
    - footer

Step3: Online Style Guide

I suggest that you create a sample page with your main UI elements to test your design values and do some adjustments directly in the browser. Take some real devices, check different browsers and test your typography, colors, grid system rules and component behavior.

3. That’s just the start

For a successful result, it will be essential that you maintain a close collaboration inside your team. A good advice from Brad Frost and Dan Mall is the method called The Hot Potatoe Process. Ideas are passed quickly back and forth from designer to developer and back to designer then back to developer for the entirety of a product creation cycle.

Document and Share

As you scale and grow, try to maintain a documentation so everyone in your team (especially new team members) will stay up to date.

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