Design+Code logo

Quick links

Suggested search

What is Version Control?

Version control allows you to view earlier versions of a file that are being continuously saved after a certain period when no changes are happening. Since every change is saved in chronological order, it is easy to look at specific things at a certain point in time.

Version control and Version history

Version control lets you manage and set rules that help you avoid errors and conflicts to minimize failures providing a better collaborative experience. On the other hand, Version History gives you a way to look back at previous iterations of work.

Abstract for Sketch

Abstract is a macOS app and web app with secure versioning system that builds on top of Git for design files, but without going through Command Line. By hiding the complexity of Git, Abstract app is more straightforward and designer-friendly. It is a new way for multiple designers to manage and version their files, document their process and work on things in parallel without the fear of overwriting. It saves everything to let you keep track of all the changes and record the history. Now, every designer can work together on the same file, review the changes and differences, merge files, collaborate and comment, with a clean and updated Master file. If you are an Adobe Xd user, you can apply for the public beta. UI S24 01

Sketch Cloud

Sketch Cloud is a Sketch native version control tool. With it, you can share documents and libraries among your team members. Your account can belong to different teams or you can stick to your personal account. UI S24 02

Version History Figma

If you are working with Figma, you don't need a version control app since Figma is a real-time collaboration tool. Although, it does have version history. With version history, you can view your document's timeline, and you can restore any specific version if you'd like to. UI S24 03

Sympli Versions

Sympli versions is another product by Sympli and it is a versioning control tool for Sketch. It has integrations with GitHub, GitLab, Azure DevOps, Bitbucket and Jira. You can review your version history, sync changes and share your projects. UI S24 04

Plant

Plant is a versioning tool for Sketch. You can view the version history of your document, compare document versions, and restore old versions. There is a public beta of Plant for Xd users. UI S24 05

Version Control with Plant

Plant is a version control tool that works with Sketch. For this exercise we will use Plant because in another section we already showed how to work with Abstract. The first thing you need to do is to download Plant from their website. Once installed, let's open Sketch and we will notice a new tool bar on the right side bar of the UI. UI S24 06

To start, we need to create a new project using Plant. Let's click on the plus icon + from the toolbar or you can choose the project icon which is underneath the + icon. Then let, add a name to the project, and finally click on Create. UI S24 07

Then a pop up will appear asking us to select a file to create a version control. UI S24 08

Once the file is selected, Plant will create a project, and you will be able to preview the new file in the project sections. Open the file to start working on it. UI S24 09

Once the project is open, let's make some changes to the original file. Make two copies from the original mockup. UI S24 10

To push or upload your changes we will press the up arrow icon ⬆️. A new window will pop up. We can write some details of the changes and then, hit Send to upload the new change.
UI S24 11

Finally if you want to see all the different versions of the project, you can click on the Project history icon.

UI S24 12

Conclusion

Version control tools are a crucial part of the design process, and they are essential when you work with teams. Tools like Sketch Cloud, Abstract, Plant, and Sympli help designers work more efficiently and focus more on their work instead of organizing and sharing files.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Turn your Designs into Code

READ NEXT

Developer Handoff

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

ui-design-handbook-sketch-version-control

1

UI Design Aesthetic

Learn about UI design aesthetics.

3:52

2

Design for accessibility

Learn about accessibility in design.

1:59

3

Localization

Read more about the importance of localization.

1:14

4

Color Selection

Select colors for your projects

5:06

5

Pick Fonts

Select the most suitable fonts for your design.

3:35

6

Font Managers

Manage your fonts more efficiently.

2:06

7

Icon Organizer

Organize your icons in a better way.

2:59

8

UI Sound Design

Importance of sound in UI design

4:25

9

Stock Images

Find the right images for your UI

1:29

10

Image optimization

Optimize your images to improve performance.

1:46

11

Illustrations

Add illustrations to your design project

1:38

12

Realistic Mockups

Resources to add realistic mockups to your design.

2:47

13

UI 3D Assets

Work with 3D assets in your design projects

2:29

14

Introduction to Animations

Learn about basic animations in UI design.

5:09

15

UI Animation Resources

List of tools and resources for UI animation.

1:45

16

Apple Watch Faces

Create customizable watch faces for the Apple watch

2:06

17

Designing for Apple Watch

Getting started with Apple Watch Design

4:24

18

Designing for Apple TV

Learn the basics steps to design for Apple TV

1:58

19

Design for Game Center

Learn how to design for Game Center

3:43

20

Designing for CarPlay

Learn the basics of designing for CarPlay

1:37

21

Designing App Clips

Learn how to design app clips for iOS

7:05

22

Designing Widgets

Design widgets for your applications.

3:29

23

Design Systems

Create design systems for a better workflow.

1:27

24

UI Kits

Learn more about UI Kits and where to find them.

3:33

25

Prototyping Tools

Learn about prototyping tools.

3:22

26

Voice prototyping

Take a look at voice prototyping.

2:14

27

Prototyping with Code

Read more about prototyping with code.

3:01

28

Turn your Designs into Code

Learn how to turn your Designs into Code.

2:18

29

Version Control Tools

Share and synchronize your files with your team

2:12

30

Developer Handoff

Learn more about developer handoff.

1:05

31

Color Theory

Understand color theory to select the best color themes for your application.

10:35

32

Dark Interfaces

Add dark mode to your application.

3:53

33

Icons

Learn more about UI icons.

10:32

34

Background Patterns

Create beautiful background patterns.

5:41

35

Typographic Scales

Learn more about typographic scales.

2:40