Lessons

Explore all newline lessons

Tags
Author
Pricing
Sort By
Video
Most Recent
Most Popular
Highest Rated
Reset
https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Building a Feedback Loop For Your Design SystemThe newline Guide to React Component Design Systems with Figmagic

Communicating and giving feedback on our work is the lifeblood of a design system.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

How to Plan for Design and Component Life CyclesThe newline Guide to React Component Design Systems with Figmagic

We have talked about "continuity" a lot, so it's about time we address how to deal with change in practice.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

How to Structure Storybook for DocumentationThe newline Guide to React Component Design Systems with Figmagic

Storybook is a brilliant tool for documentation, and we'll make good use of it in several ways.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Add Storybook Descriptions For Self-Documenting DesignsThe newline Guide to React Component Design Systems with Figmagic

The very first documentation step we will take is to describe what we have built so far.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

How to Author Quality Design DocumentationThe newline Guide to React Component Design Systems with Figmagic

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

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

How to Compose Complex Components With FigmagicThe newline Guide to React Component Design Systems with Figmagic

Code 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!

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Flat vs Nested Elements in Figma and FigmagicThe newline Guide to React Component Design Systems with Figmagic

Galloping ever onwards, we'll wave our magic wand and summon our low-complexity components.