From Figma to Ember to Storybook … with 2 Clicks

An ambitious goal I set myself for the beginning of my year. I achieved it. It’s a pleasure to work in such a setup and this is a series of articles in which I share how this works. It’s made up of three posts and each of them can be read invidiually as a standalone article and at the same time they work in sequence. First a demo:

Project

The main motor is the idea to establish a workflow from Figma to Ember to Storybook. Secondly I wanted to understand the world of design systems, not only from a developer perspective but also from designers by going through the flow from the beginning to end. In combination with the recommendated articles about layouting mechanisms at every-layout.dev (by Heydon Pickering and Andy Bell) this projects connects everything together.

  • Themes and Design in Figma
    • Multiple Themes
    • Light and Dark mode
  • Sync to Ember
  • Use Ember with Storybook

Articles

Part 1: Full Featured Themes in Figma
This article will talk about design tokens, references of such and different contexts within one theme and how to organize them in Figma.

Part 2: Design Tokens in Ember
Introduction to Design Token Systems (Theo, Style Dictionary and ember-makeup), the workflow to read them from Figma and how this ends up in ember.

Part 3: Documentation within the Ember Ecosystem
Introduction to available documentation options in ember and an integration at the example of Storybook.

Resources

-gossi