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 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
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
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: Documentation within the Ember Ecosystem
Introduction to available documentation options in ember and an integration at the example of Storybook.