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