
The platform offers a variety of plugins and options to customize your pages or pagetree, and integrate development. Used by a lot of teams in the industry as a project documentation workspace, most of us have a love/hate relationship with Confluence. If you need a powerful tool for documenting, then pay attention to Confluence. Obviously, the priority of attributes can be different for your company, so study the table and see what you find important for your design system. Support for multiple styles is a very specific attribute for companies that have white labels or need designs for multiple brands of the same component. Less important are the options of using your own domain name, single sign-on, the option to personalize the tool's appearance with your brand style or the possibility to host the whole tool on your own servers. Freedom in structure can also have a big impact on your possibilities some tools give a lot of options for page layout and page tree structure, while others use a strict template.
#ADOBE XD DESIGN SYSTEM CODE#
The best design systems also integrate development, so code options and version control are next.

In the table, we ordered attributes according to importance integration with design tools and price* are always big deciders, so they are featured at the top. But there are important differences, so let’s take a look at how the tools compare to one another. Each tool offers these features, without the need to build your own custom platform. In this article, we will only focus on tools that allow you to document your design on an accessible website, on multiple pages with imagery and text. Examples of custom built platforms are Google’s Material Design, Shopify’s Polaris and IBM’s Carbon Design System. But it also takes significantly more effort, requires technical knowledge and doesn’t support synchronisation with your design tool (unless you are a very skilled programmer, willing to create your own custom plugin). This allows for more freedom in what is possible. Custom platformsįinally, there are options to create your own platform. Some of these tools even sync automatically with your design tool, making it a breeze to keep your design system up to date with the latest changes. Their layouts are more supportive for showing brand and design. Design documentation toolsįrontify, Zeroheight, Nuclino, Lucid and Bynder are all tools that focus more on design. Some examples are Gitbook, VuePress, Fractal and Confluence. Native integration with design tools is nonexistent so designers will have to upload images of design and replace those images with every change they make.

Most of these tools tend to focus on the development side, and offer ways of hosting and showing code. These host accessible websites that anyone can use to retrieve information and often feature version control. Examples are Sketch, Figma, Adobe XD and Framer. Generally, these tools are not meant for documentation.

exporting images, online access and shared libraries). They also have options to share designs (e.g. There are four types of tools you can use in your design system: Design toolsĭesign tools allow you to design any digital screen and manage all the digital assets. 4 Types of Toolsīefore diving into each individual tool, let’s consider what different types are available. Its integration with Storybook and most design tools, makes it a good choice for a lot of projects. TL DR: If you need a documentation tool that brings together design tools and development tools, Zeroheight is one of our favourites. Each one of them has their own culture, design process, challenges and, of course, their own budget. At Hike One we help implement design systems for a diversity of clients: corporates, municipalities, smaller local players, you name it. To help you decide we compared our favourite tools for you. Which tools should you use when setting up a design system? With so many options, it is difficult and time consuming to properly answer this question.
