Thomas Gossmann

Unicyclist. Artist. Developer.

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 2a: Say Hello to Theemo – the Yordle Powered Theme Automator
Theemo is a javascript library to automate your theme workflow by enhancing your already existing toolchain and connecting multiple tools together.

Part 2b: Integrate Ember with the JS Ecosystem at the Example of Theemo
Learn how to work with ember and the JS ecosystem and connect them together.

Part 3: Ember with Storybook
Explain the integration between ember and storybook.