DOL Organizer Kit - Component Registry Index
Source file: DOL's Design Organizer Kit (key: NxdDuGawc6P4d9ffKCoCZ1)
Counts: 32 component sets · 35 standalone across 10 categories
What is the Organizer Kit?
Section titled “What is the Organizer Kit?”Canvas meta-components for organizing designs - different from DS V2 which has UI-building blocks (Button/Input/Modal).
Organizer components are used to:
- Wrap groups of screens with labeled banners (Design area: level 1 / 2 / 3 hierarchy)
- Connect screen-to-screen flows with arrows (Flow direction / Element note arrows)
- Place dev/design notes alongside designs (Design note Box Style 1/2 - purple, blue, orange, etc.)
- Annotate specific elements (Element note anotate - rare use)
- Document spacing, dimensions, cursors, animation directions
→ See usage-patterns.md for layout rules + when to use which component.
How to use this registry
Section titled “How to use this registry”| Need | Use |
|---|---|
| Find one Organizer component by name | python3 ../figma-ai/tools/lookup.py organizer <name> |
| List all organizer components in a category | Open components/<slug>.md below |
| Understand layout pattern (design area hierarchy, flow arrows) | Read usage-patterns.md |
Design Area - Canvas structure (banner levels 1/2/3)
Section titled “Design Area - Canvas structure (banner levels 1/2/3)”components/design-area.md · 5 sets · 0 standalone
Preview:
Design area/Horizontal→16891f09524f25f5609fdd2f9d0f52e3db8d606b(set)Design area/Main (All in one)→1293e29d5348914f05ede6c23c2f0dd590ee669e(set)Spacing adjust→ba91ee52ca88cc04e0bcd7ad672bc26a9f3531e3(set)- … 2 more in detail file
Design Notes - Boxed notes (dev / design / flow / update)
Section titled “Design Notes - Boxed notes (dev / design / flow / update)”components/design-notes.md · 2 sets · 0 standalone
Preview:
Design note/Box note - Style 1→65f939262872d57c9a120941980696101e93471d(set)Design note/Box note - Style 2→f754e4589000cdefaaac036bc0a53ec645e8f27a(set)
Arrows - Flow direction + Element note + Breakdown arrows
Section titled “Arrows - Flow direction + Element note + Breakdown arrows”components/arrows.md · 12 sets · 1 standalone
Preview:
Destination Frame→48a780450510d12780efcdfe955b963a48067822Note/Arrow/Breakdown note/1→c2715f07b5cafecec309fff37840880a49b96894(set)Note/Arrow/Breakdown note/2→b1cc253cb34547cbf4173515bc3d3626d7a78bfd(set)- … 10 more in detail file
State Notes - State indicators + small notes
Section titled “State Notes - State indicators + small notes”components/state-notes.md · 2 sets · 0 standalone
Preview:
State note 2→029e2189248d1bc0d02ae86d68c696231010de60(set)State note simple→a5c506bde89eb967ee21a4c5d70fca855047c3ef(set)
Token Notes - Token annotations
Section titled “Token Notes - Token annotations”components/token-notes.md · 5 sets · 0 standalone
Preview:
Token note/Arrow/Element note/1→3784a750303b9623580dca6b4a9f3be10ff352f8(set)Token note/Arrow/Element note/2→448edf72651913192fe74ef41d49f32f57b20356(set)Token note/Arrow/Element note/3→9d81e4f7ee0bc0dbb44db081a22b70f216c870e0(set)- … 2 more in detail file
Element Notes - Anotate bubbles pointing at elements
Section titled “Element Notes - Anotate bubbles pointing at elements”components/element-notes.md · 3 sets · 1 standalone
Preview:
.Layout/Design note/Anotate→4daedde59b5af8f9c1c3be0874e6307832ac531e(set).Layout/Design note/Anotate 2→bfac06ba9172e0cfa14dbea7a3b224bf585a19e3Design note/Anotate→503b01470ccc219d56e81609d9c7bc3dd65f6fcf(set)- … 1 more in detail file
Animation Direction - 9 arrows for animation entry
Section titled “Animation Direction - 9 arrows for animation entry”components/animation-notes.md · 0 sets · 9 standalone
Preview:
Anim note direction/← From right→2a04a45bdf1365958e293c4b2fdc8abb003d8955Anim note direction/↑ From bot→2eb489fe4c71e2792ab1de0c1d2786eae1b62991Anim note direction/→ From left→c4f17b8f946a469c78ac2217947ca8b3ea04ca1f- … 6 more in detail file
Guide Areas - Block notes (purple/blue/green)
Section titled “Guide Areas - Block notes (purple/blue/green)”components/guide-areas.md · 0 sets · 3 standalone
Preview:
Guide area, Block note/Blue→cdc3f59a9441d6d758edc99e024eda589c17603bGuide area, Block note/Green→04d05da7ec7a301ede2ef6ddf9274106f47b897eGuide area, Block note/Purple→8a6ec19047ed1c4938aba376e5c4560f58d97f9f
Guideline Support - Ruler / Dimension / Spacing / Cursors
Section titled “Guideline Support - Ruler / Dimension / Spacing / Cursors”components/guideline-support.md · 2 sets · 20 standalone
Preview:
Cursor/Click click→a1e49d6e77c46961a1db5bcc62ec5809fe38c8c7Cursor/Clickable→1cdb937f138313cd7c81dbe682ca05019bc7f906Cursor/Copy→01b15a82a3d6cd16888ca57552cb1dd7625c956d- … 19 more in detail file
UX Kit - Flowchart note + smart connector
Section titled “UX Kit - Flowchart note + smart connector”components/ux-kit.md · 1 sets · 1 standalone
Preview:
Figjam Arrow, smart connector (File location)→c1263ad601f4c18604095726abb98b05a6ae2119UX doc/Flowchart note→2881d7efaa8bc15397a3b352da09e343348946e6(set)
Related
Section titled “Related”usage-patterns.md- layout rules + when to use which component (HAND-AUTHORED)README.md- folder overview../tools/lookup.py- CLI for organizer queries (subcommandorganizer)tools/extract-organizer-metadata.py- this generatortools/resync-organizer.md- how to re-extract when Organizer Kit changes