DSM Comparison

	A	B	C	D	E	F	G	H	I	J	K	L
1			Storybook Integration	Design Tool Integration	Documentation Tool Integration	Design Tokens	Permissions	Shareable components w/ dev or other	Version Control	API	Jira / Slack Integration	Account & Pricing

2	Zero Height	Pros	• Embeds storybook link in online docs	• Sketch plugin upload selected or all symbols • Full Figma specific workflow • Intuitive updating	• Creates documentation webite • Rich text, embed prototype, videos, gifs, code snippets, tables • Tree navigation w/ infinite sections (manage in website) • Multiple guides/systems • Easy to pull in updates from figma or sketch • Cusom domain • Custom fonts and colors for guide	• sass, css, ios, android • color and font prefix • Note: the only tokens synced are currently typography and color styles, but we plan to add support for many more token types, as well as custom tokens.	• Team editors and view-only links • Password protection	• View-only links • Component detail view is a dev inspector • Shows nested components/variables	• History of uploaded files • Granular additions/removals • Styleguide drafts, versions, and publish (company plan)		• Yes w/ Figma	• Company: min 5 editors ($39 x 5 x 12 = $2340) • Enterprise: ???
3	Zero Height	Cons	• Missing knobs
4	DSM	Pros	• Includes knobs • Links to github • dynamic code sample • auto-generated properties table	• Sketch plugin (dsm window) • Add symbols, colors, text styles, layer styles, icons, components from sketch and add to dsm window • Sync library changes to document button	• Creates documentation website • Insert bullets, images • Multiple guides/systems • Tree navigation (manage from sketch)	• sass, css, less, stylus, xml, json, yaml, android, ios • color and font prefixes • generates icons svg file	• Org roles:Admin, editor, viewer, visitor • library roles: Admin, editor, viewer, visitor • password protected links	• Inspect mode links to design and code documentation	• Versions history and current version in dsm app • Release version pushes all changes to everyone • Online version history with numbering, comments, and optional diff • Revert to previous version	• Yes		• Team: up to 5 ($99 x 5 x 12 = $5,940) • Enterprise: ???
5	DSM	Cons		• Not super intuitive at first	• No branding/whitelabeling • No custom domain	• ability to cusomize?		• Component detail is static
6	Brand AI (oob 12/16)	Pros		• Sketch plugin (brand.ai window) • Select symbols from sketch and add to brand.ai window	• Creates documentation website	• sass, css, less, stylus, xml, json, yaml, android, ios • Asset zips	• Yes	• Lacks functionality	• ?
7	Brand AI (oob 12/16)	Cons	• None		• Limited
8	Lingo	Pros		• Sketch plugin and Mac app • Push/pull asset management • files, colors, fonts, sketch symbols, text styles, layer styles, artboards, groups, layers • visually browsable • drag n drop • push/pull diff	• Creates documentation website • Custom branding • Unlimited kits • Manually arrange content • Add notes, tags		• Admin, owner, member, limited member	• Public and Private links • Export controls • Code snippets (?) • individual components	• Versioning w/ rollback	• API
9	Lingo	Cons	• None			• No design tokens
10	Avocode	Pros		• Mac app • Web app • drag and drop sketch file to import • Figma, Sketch, Jira, dbox, slack • comments, tasks	• Unlimited folders • Sync versions through Dropbox folders		• Public/private share link • Granular permissions	• Inspect mode • Commenting • Asset generation • Export code (w/ variables) • Copy styles	• Yes, unlimited history for every asset • Version backup
11	Avocode	Cons	• None		• No docs site	• No design tokens
12	UXPin	Pros		• Design system libraries • Colors, text styles, symbols, assets • imports from sketch • pull updates w/ diff (no overrides lost) • push updates to library • multiple libraries • WCAG • prototyping: simulate, comment, spec, documentation (page) • interactions, variables, states, expressions, data generator	• creates online docs • docs auto-update	• No design tokens	• Owner, team, specific users • Add edit etc	• Specs mode • Comments, tasks			• Yes
13	UXPin	Cons	• None
14	FramerX	Pros	• I think the idea is that it's self documenting	• Prototype with coded components • visually renders React • Prototyped motion/animation can be reused in production • Sketch plugin • components are in a "store" (compares to figma)
15	FramerX	Cons	• None		• No docs site	• Don't think so, but you do import real components
16	Figma	Pros	• Can embed a Figma prototype in storybook. https://github.com/hharnisc/storybook-addon-figma	• Design system libraries • Colors, text styles, symbols, assets • imports from sketch • pull updates from library • push updates to library • multiple libraries • Strong prototyping capabilities, transitions, object-level or artboard • close parity w/ Sketch in terms of design capabilities • contant autosave • can real time co-design with other editors in real-time	• Can share a library file that feels like a design system style guide • free unlimited viewers, any viewer can inspect and grab code • Team Page: Files, Projects, Members, and Billing. • Files stored in cloud • decent search • Full Zeroheight Integrations	• Looks like some people have done things via Figma API: • https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f • https://www.figma.com/resources/extensions-and-apis/figgo/ • https://github.com/mikaelvesavuori/figmagic	• SAML SSO • Viewer, editor, admin, owner roles • Org, teams, individuals • Multiple teams with multiple libraries • free unlimited viewers, any viewer can inspect and grab code • can set Permissions at a Team, Project and File level	• Live view of a prototype, collab with comments • free unlimited viewers, any viewer can inspect and grab code but not edit files • Ability to publish an entire file, styles and components, team library updates • publish w/ notes	• Similar update flow (edit library, hit publish) • add description of changes that displays in version history • review / accept changes to individual styles/components • version history shows all saved versions w/ timestamp and user • previous versions can be named, retored or duplicate	• Seems to have a strong API that people are making use of for things like design tokens • https://www.figma.com/developers/api	• Embed live proto, always up to date • Zeplin, Dropbox Paper, Jira, Trello, Dribbble, Principle, comment notification from Slack, Protopie, Zeroheight, Avocode, Flinto	Professional: $12/month/editor • Unlimited projects • Unlimited version history • Custom file/user permissions • Invite-only private projects • Shareable team libraries Organization: $45/monthe/editor • Org-wide design systems • Centralized teams • Private plugins • Plugin administration • Shared fonts • Single sign-on integrations • Advanced security
17	Figma	Cons	• commnunity created integrations • does not support a storybook embed inside figma	• Transition from Sketch will take some adjustment time • cloud files: must open file first before going offline."	• Looking at a Figma file instead of a traditional style guide website might seem strange to people	• No out of the box tokens support • Using one of the above methods would take dev resources		• No custom units
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100