Gallery
Design System Manager
Share
Explore
Gallery
Design System Manager

icon picker
Components

Central to any Design System, components are reusable building blocks of your user interfaces. By maintaining a comprehensive table within Coda that links design, engineering, and Jira tickets, we can provide a holistic view of each design system component. This promotes collaboration and ensures that all aspects of a component are documented in a single, accessible location.
What makes Coda a unique and powerful tool for this is that all editors are free. This feature empowers everyone on the team to contribute to the design system documentation, whether that's by adding new content,
suggesting edits
⁠
, or
providing comments
⁠
. In this way, Coda not only helps maintain the integrity of your design system but also fosters a collaborative environment where everyone is encouraged to contribute.


Components Navigation
1
Toggle Switch
The Toggle Switch is an interactive UI element that allows users to switch between two states, typically on/off or true/false.
In Progress
Open Documentation
Links
Links are clickable text elements that lead users to a different page or section within the application or an external website.
Released
Open Documentation
Sliders
Sliders allow users to select a value or range from a set of options by moving an indicator, providing a dynamic and interactive interface element.
Open
Open Documentation
Checkbox
A Checkbox is a graphical user interface element that allows users to select one or more options from a list.
In Progress
Open Documentation
Search Bar
In Progress
Open Documentation
⁠

How to create a new page for your component

Begin by creating a new row in the
Component Database
⁠
. Populate all necessary data fields and ensure all connections are in place.
Next, right-click on the
_Template
⁠
Page and select “Duplicate”. In the pop-up window that appears, choose “Create Connected Views”.
At the top of the page, within the Page Information section, select your new component from the drop-down list. This list is linked to the
Component Database
⁠
.
Once connected, this will automatically generate sections such as Usage, Design, and Code. You can add more data, adjust the format, and delve deeper into the formulas that generate the page.
Remember, the beauty of Coda lies in its flexibility. You're free to create your own structures and building blocks to suit your specific needs.

Components Navigation
How to create a new page for your component
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.