-
Notifications
You must be signed in to change notification settings - Fork 153
File Structure for Sketch Symbols
Lauren Rice edited this page Mar 9, 2021
·
5 revisions
Please use this structure when making contributions to the kit. This will ensure that file structure it kept consistent for easy use. Thanks!
- always singular, not plural
- all lowercase letters
- spacing before and after /
- spacing between multi word states (Ex: 06 disabled unselected)
- no underscores
- 01, 02, 03 numbering etc
- no cursor in symbols
Follow this order of states. Not all components will have all of these states, if states are not necessary just skip them.
- 01 enabled
- 02 hover
- 03 focus
- 04 focus up
- 05 focus down
- 06 active
- 07 selected
- 08 selected focus
- 09 unselected focus
- 10 filled
- 11 visited
- 12 error
- 13 warning
- 14 disabled
- 15 disabled unselected
- 16 disabled selected
- 17 skeleton
| [element] | [component name] | [type] | [sub-type] | [content type] | [state] |
|---|---|---|---|---|---|
| component | button | primary | - | text | 01 enabled |
| component | radio button | group | - | 1 item | - |
| component | link | secondary | standalone | text and icon right | 02 hover |
| [element type] | [category] | [breakpoint size] | [specific style] | [token/name] | [size] |
|---|---|---|---|---|---|
| color | blue | - | - | blue-60 | - |
| icons | navigation | - | chevron | - | 16 |
| pictograms | retail | - | - | assistant | - |
| type | editorial | lg(1056 breakpoint) | gray-50 | display-02 | - |