We document stuff on Figma and Supernova, we do this to have a backup in case Supernova ever goes down or we change providers.
If you don't have access to Supernova, you can follow this guide up until the Supernova sync, after that, you will need to contact the Design System Team
Parts 1-3: Adding Figma documentation
- Go to library file where the component is located
- Generate an instance table with the Propstar plugin next to the master component.
- Generate the specs of the component with the Eightshapes specs plugin next ot the instance table.
- Go to Supernova assets file
- Duplicate the 📖 COMPONENT TEMPLATE page
-
Place the duplicated page under the correct section:
- If you are adding a core component it needs to be under CORE COMPONENTS
- If you are adding a component from an extension library, it needs to be under that exension section. - Rename the duplicated page with your component's name
- Get familiar with each one of the frames and component blocks, we have, Do's and don'ts blocks, Blocks for framing components, headings, paragraph size indicators, and more!
-
Start documenting the usage guidelines! In this section we recommend adding:
- Do's and don'ts
- Differences vs similar components
- Content guidelines
- Behavior notes -
Document the Accessibility guidelines in this section we need:
- Keyboard interactions table
- Focus order of the elements - Document the examples! In this section we need simple use cases of the component.
- Send the documentation for review to the Design System team!
The guide below requires a Supernova editor license and access to Spark's Supernova editor site, if you don't have that, the Design System can sync your documentation for you
We strongly recommend getting familiar with how Supernova works before continuing.
2. Parts 4-6: Syncing with Supernova
- Go to the components table in Supernova located under Design System data(The shapes button at the top of the left sidebar)and then under the Components tab.
- Click add row
-
Fill the row with the data of your component:
- Add the name of the component in the Name column
- Add a single sentence describing your component in the Description column
- Set the current state of the component
- Add the figma component; if you can't find the component notify the Design System team
- You can leave the Playground and Repository links empty right now, and ask for those links to engineer once they have added the component to the repo.
-If you are writing the documentation of this component for the first time you can leave the Documentation link empty and once you have created the pages you can link them here.
- Select the extension of your component, if you are adding a component to the Core library select Core
- Go to the documentation section of Supernova
- Duplicate the component documentation template under the _TEMPLATES section at the bottom of the side bar
- Rename the cloned template with the name of your component with an "_" at the start of the name, for example if your component ins named Button, your documentation should be named _Button
-
Relocate the cloned template:
- if you are adding a Core library component, relocate it under the main Components section
-If you are adding a component from an Extension library, add it under the component subsection of that Extension, if you cannot find your extension notify the Design System team
- Change the component property of the Component Checklist block,(this is the first block you see in the Usage, Design, and Code tabs) to the component that you added to the component table.
- Populate the Usage tab with the content you created in Figma in Part 3 of this guide, Sadly this is still a manual process, we are sorry for the inconvenience but we have provided examples on the template of how the imported content should look, like Do's and Don'ts and other blocks.
- Populate the Design tab, as you might have seen on the template, this tab already contains a callout block and an embed block, do not delete the callout block and for the embed block, select your specs and instance frame block that you created in Figma, in Part 1 of this guide, copy its embed code, and add that code in the Embed block.
-
You can leave the Code tab empty for now, during the coding process, your engineer should provide you with:
- A playground link(If they have a component playground, if not you can delete this block and its header) to add to the embed block.
-A link to the component readme, that you can put on the mark-down block - For the Accessibility tab, you should fill the keyboard navigation table and import the focus order frame you generated on Figma during Part 3 of this guide.
- For the Examples tab, you should add the example you've created in Figma during Part 3 of this guide.
- After everything is set and done, send it for a review to the Design System team, once it's approved you're done!