#svaixd

Heading towards that, there are a few things that I still need to refine before I can actually start building.

Areas to explore:

Sketch plugin

Its design

How will it function?

What features will it have?

Documentation

Will the plugin export it or simply contain it?

How will the other people on the team who don't have Sketch view it?

Here is a roadmap to the final —

Detailed

Setup:

Download the toolkit, consisting of the code for documentation website and a plugin to integrate with the design tool.

Install the plugin.

Open the code in a editor and install the required dependencies.

Use:

Select the styles or components you would like to document and export it using the plugin to the same location as the code.

Creating and maintaining content can be done using Markdown formatting which allows you to write gorgeous content using an easy-to-learn syntax.

Deploy:

First variation

Docur is a toolkit for designers and front-end developers who want to efficiently create dynamic style guides for digital products. It can combine design documentation with their design workflow, making hand-offs between designers and developers seamless. Unlike Brand.ai, Docur is a static-site and gives you complete control of customisation and flexibility.

Second variation

What was the strongest component of your prototype?

I think what I can do different and benefit both designers and developers is utilizing the power of Lona to generate the design systems documentation is a much more flexible way. Since Docur is a coding kit, it gives you an option to extend and customize it.

What was the weakest component of your prototype?

The weakest and in fact, the most challenging part of my prototype is the ability to render components on the documentation website. Can I make the component render just as it was designed? Apart from just the look of it, can I make the component functional or at least offer an ability to make it functional?

List the areas in your thesis concept to further explore for:

Interaction

Is a Sketch plugin the best way?

What about tools apart from Sketch?

Design

The documentation website will be shipped with a default theme, what is the best way to extend or custom that theme to fit the design systems need.

Technical

Is static site generator the best way to go?

Can there be a better way to integrate a design and the Lona file?

What are existing attributes of your thesis concept to further refine and iterate?

I believe that the documentation website itself is the core of the concept. I need to architect in such a way that it is both adaptable and scalable.

What new areas have you not yet explored that are really essential? If they're not essential, can you rule them out to simplify your path moving forward?

I still need to explore more opportunities and case studies of previous attempts of automating the generation of style guide from CSS, SASS, etc for example like KSS and SassDoc. Also design tokens! A “design token” is an abstract bit of design language that normally becomes visible only when applied to more explicit patterns and components. For e.g.: Colors, fonts, scales, and grid-configurations. I still need to throughly think of the best way of handling them in the documentation.

In thinking about the user's experience what phases have you overly focused on? What parts of the experience have gone under-explored?

"A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts." - source

How does Lona work?

A design system is defined in JSON as a collection of components, styles and data types. The specification for these files can be found in the docs.

Lona has 2 parts to it — Lona Studio, a GUI to work with these .component & JSON files & Lona Compiler which converts the files to UI code for various targets.

How can others benefit from Lona?

At the core of Lona is the .component and JSON files which specifies how and what of a component. This is essentially what your design system is built-up of and hence the translation from design to UI code is what makes Lona efficacious. The potential of Lona also makes it a very useful tool to document your design system.

Coming back to the prototype:

What's the problem?

A very crucial part of a DS is its documentation, without which it is very difficult to use one. For example, which colour to use when? or when to use a solid button vs outlined button?

In my prototype proposal I talk about how documenting design systems is a problem and needs to be tackled.

The current scenario from design to documentation is very time consuming and inefficient, to put it visually, like this:

There is only a connection between your designs and its documentation.

There are few things that don't work here:

Development: Like I said there is only a connection between the designs and its documentation, but no overlap or intersection of its content. And because of this you have to get into code and build the documentation. Hence it is a manual process, hence lengthening the entire process.

Customization: if you use a tool like Brand.ai or Frontify, there are very similar to Squarespace or any hosted service, you can't get complete control over your documentation's look n feel or even functionality.

Time: documentation is crucial but often either neglected, pushed to later sprints or often outdated.

Hypothesis

I believe that if I make a tool that can integrate with the design softwares, then designers will be able to document their design system conveniently.

Solution

Docur - A tool for documenting design systems to educate teams about design and implementation guidelines.

How does it work?

Step 1: Export

Export your designs from the design library/UI Kit.

This will generate a Lona data file that we saw above 👆.

Step 2: Copy to Docur

Docur directory structure

Step 3: Generate documentation

The documentation

Benefits

Docur is not a cloud-hosted solution or even dependent on the design software in-order to work, it integrates with any tool that can generate the data file for it to work.

Docur is smart enough to parse the data files as long as they follow a predefined specification.

Docur's website is a bunch of static code, pretty easy to understand and learn, that makes it possible to easily customise and extend its functionality.

If you choose not to dive deep into code, that's fine, the documentation is simply written in Markdown and hence is nothing barebones or time consuming like raw HTML.