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:


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 (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


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.