Lessons
view all ⭢
lesson
How to Trigger GitHub Actions From a Figma PluginThe newline Guide to React Component Design Systems with FigmagicTime to place the final cherry on the top. Cue up "I've got the power"!
lesson
Publish New Design Components With GitHub ActionsThe newline Guide to React Component Design Systems with FigmagicLet's automate the release of new components.
lesson
Building a Feedback Loop For Your Design SystemThe newline Guide to React Component Design Systems with FigmagicCommunicating and giving feedback on our work is the lifeblood of a design system.
lesson
A Beginner's Guide to Using Chromatic With StorybookThe newline Guide to React Component Design Systems with FigmagicTime to fill up our UI platform with our work to date!
lesson
Export Components With GitHub Chromatic ActionsThe newline Guide to React Component Design Systems with FigmagicThings need to be in order before we continue.
lesson
How to Plan for Design and Component Life CyclesThe newline Guide to React Component Design Systems with FigmagicWe have talked about "continuity" a lot, so it's about time we address how to deal with change in practice.
lesson
How to Structure Storybook for DocumentationThe newline Guide to React Component Design Systems with FigmagicStorybook is a brilliant tool for documentation, and we'll make good use of it in several ways.
lesson
Add Storybook Descriptions For Self-Documenting DesignsThe newline Guide to React Component Design Systems with FigmagicThe very first documentation step we will take is to describe what we have built so far.
lesson
How to Author Quality Design DocumentationThe newline Guide to React Component Design Systems with FigmagicGood documentation is vital and shows that you care about your design system and those who will use it. Lacking good documentation practices could spell doom for a design system.
lesson
How to Compose Complex Components With FigmagicThe newline Guide to React Component Design Systems with FigmagicCode generation with Figmagic 4 will only take you so far. For our most important and complicated components, we will need to do some manual work, composing small bits into more advanced ones. Let's compose one from what we've made so far!
lesson
How to Create Nested Figma Elements in FigmagicThe newline Guide to React Component Design Systems with FigmagicNow, we leave the easy flat components for the more detailed nested ones!
lesson
Flat vs Nested Elements in Figma and FigmagicThe newline Guide to React Component Design Systems with FigmagicGalloping ever onwards, we'll wave our magic wand and summon our low-complexity components.