Storybook descriptions
The very first documentation step we will take is to describe what we have built so far.
This first step isn't very hard but is necessary to do in order to create our basic information. Hold tight for a bit of writing (or copy-pasting)!
Add descriptions to the elements#
Now for some more actual magic. We are going to generate markdown files from our Figma components and then make Storybook use them in our docs.
In practice, the same procedure we just did applies to the elements, too. Sure, it's a bit of typing or copy-pasting, but it'll be worth it! Let's make sure we don't wipe any previous element= settings.
In Figma, let's go through all the elements in order...
Header#
1
element=h1
2
description=
3
# Header4
5
The biggest header for the biggest things.
Footer#
1
element=footer
2
description=
3
# Footer4
5
Information at the bottom of a view.
Label#
1
element=label
2
description=
3
# Label4
5
The Label is typically used for input elements and conveys important context.
Form#
1
element=form
2
description=
3
# Form4
5
The Form is a basic container that we use in the checkout view.
Image#
1
element=img
2
description=
3
# Image4
5
The Image allows us to place images in a structured manner.
Heading#
1
element=h2
2
description=
3
# Heading4
5
Headings are used as secondary header elements; only the Header is bigger.
Description#
1
element=h2
2
description=
3
# Description4
5
The Description text block is a typical paragraph.
Card#
1
description=
2
# Card3
4
The Card element acts as the outer container for the actual high-level Card component.
Button#
1
element=button
2
description=
3
# Button4
5
The Button is our standard component for allowing a user to, for example, add something to their cart.
This page is a preview of The newline Guide to React Component Design Systems with Figmagic