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

Resources

-gossi