Version Control for Kolibri UI/UX design
The problems:
It appears to us that a version control solution is needed to accommodate the collaborative design work we've done for Kolibri. There are 3 major issues we want to address with this version control solution:
-
Be able to easily trace back the design decision making history. Following describes a typical issue we are facing more and more often. After many iterations for an UI element, it becomes unclear to us how we arrived at the current approach, and start bringing arguments up that later we realized were fully discussed before.
-
Be able to keep design modifications in sync across the team. Our design team has collectively experienced this pain that if one of us updates the design of a shared UI element, all of us have to find the files that uses this shared element and manually update it.
-
Be able to asynchronously comment on and reply to new designs. We used to post designs in our online chat room to get feedbacks. But it gets pushed up and becomes difficult to access again. Sometimes people come up with good comments or replies afterwards. It makes a lot sense to asynchronously comment and reply via Pull Request.
The solution:
Terminology: link-import
means using Place-Linked-Bitmap
plugin's Place Bitmap as New Layer
method to create a linkage of the external image file. This means that whenever the external image files changed, we can use the Update All Bitmaps
method to update all link-imported images in the Sketch file.
Issue 1 and 3 stated above are addressed by managing the project on github.
For issue 2, we rely on the Sketch plugin Place-Linked-Bitmap
to create external linkage between a external image file and multiple Sketch mockup files. If the external image file gets modified, all Sketch mockup files that link-import
the image file will get updated automatically. The external image file can also be created by Sketch. Using the sketch-image-compressor
plugin, we can export Sketch Slices at once to lossless compressed PNG files.
There is an example how to build a list UI element using this approach.
-
We create 2 Sketch files,
container_element.sketch
andlist_item_element.sketch
. -
We use the
Make Exportable
feature of Sketch to generate 2 image files,container.png
andlist-item.png
. (Note: because we installedsketch-image-compressor
plugin, all exported images will be automatically losslessly compressed.) -
We create another Sketch file
list.sketch
thatlink-import
thecontainer.png
andlist-item.png
, place the imported list-item inside the imported container, copy paste(the duplications will keep the linkage to the external image) the list-item couple times to make it looks like a proper list UI element.
Say later you want to change the background color of the list-item:
-
you can open the
list_item_element.sketch
and change the background color. -
Export image again to update the
list-item.png
with your modification. (it is important to keep the image file name unchanged!). -
Open your
list.sketch
, clickPlugins/Place Linked Bitmap/Update All Bitmap
, you will see that all the list-items' background color get changed to the new color.
It gets more interesting when you apply this pattern recursively.
-
Go ahead and select all elements that consists the list inside
list.sketch
and create aSymbol
calledlist
. -
Export this symbol you get
list.png
. -
Now you can
link-import
thislist.png
in other Sketch mockup files, such as yourLearn_page.sketch
andExplore_page.sketch
, and they will get auto updated if you changed anything inlist.png
.
The dependencies:
You need to install the following plugins.
-
Place-Linked-Bitmap (a Sketch plugin that enables
link-import
images). -
sketch-image-compressor (a Sketch plugin that exports all your slices to lossless compressed pngs).
Let's get started:
-
fork
this Repo. -
git clone
your forking repo. -
Create some PNG formatted UI elements using Sketch and
link-import
them in other Sketch file to create more complicated UI elements. -
Commit both your source file(the Sketch files) and your image files(the Exported PNG files), so that other people can
link-import
your images in their mockup. Future modifications can be done by editing your source files and re-export the image files. -
Open a PR with proper descriptions stating the design consideration(a PR template will be added soon).
-
Everyone can give feedbacks by commenting your PR.
-
After all concerns addressed, another designer with merge privilege can merge your PR to make your new design officially available to everyone in the company.
Notice: If you like to try a couple different design, you should create branches for each design.