Contains all resources and information UX Designers need.
Please put all exported folders in the
hosted directory. That way you can shuffle the rest of your repository around without breaking links!
- Automatic Sketch previews based on a pre-commit hook
The pre-commit hook will auto generate preview images out of your Sketch pages with sketchtool
- Semi automatic Sketch spec previews with Continuous Integration
Whenever you create a spec preview folder with the Sketch Measure Plugin, append
spec-previews to the name of the generated directory and it will be visible by an URL. Search in https://gitlab-org.gitlab.io/gitlab-design
- Automatic live Framer prototypes with Continuous Integration
Whenever you save a Framer prototype in this repository and commit push it to GitLab, it will automatically be hosted in the same way as the spec previews superpower. See them live at https://gitlab-org.gitlab.io/gitlab-design
- Standalone Live Html Previews
*By using the wget command:
wget -kN --html-extension URL or
wget -E -p -k URL you can create a standalone working HTML page of the GitLab view you want. Just change the name of the file to index.html and append
html-previews to the name of the directory it will be inside of. Good luck! (No guarantees with this one!)
- Sketch Diffs
Add the following to your
.git/config file to see if you are having merge conflicts with a shared .sketch design file
[diff "sketchtool"] textconv = "sketchtool dump" cachetextconv = true binary = true
- Have a Mac with Sketch installed in the /Applications folder
- Copy the
pre-commitfile into your
- The pre-commit hook will auto generate preview images out of your sketch pages
- Issue for Autogenerated Sketch Previews Discussion
- Install Sketch Toolbox
- Install Sketch Measure Plugin with the Sketch Toolbox
- Read on :)
Commit Workflow (includes Community Contribution!)
As design files are mostly binary files, merge conflicts can easily get stuck in conflicts. We will do the file merging manually instead of git.
GitLab Designer Personal Folders
- In the
progressdirectory, create your own folder
- In your own folder, create a subfolder for each issue/project you are working on
- Commit & Push changes
Every designer can contribute to GitLab. For GitLab community members we have a special folder in the
progress directory where you can create and commit your own designs. So you have a consistent backup, which can also be used by other designers to iterate upon! Follow the following steps to contribute.
- Fork this repository and
git cloneit locally.
- Create a new branch based off from the master with
git checkout -b branchname
- In the
community-contributiondirectory, create your own folder based on your GitLab username following the example.
- In your own folder, create a subfolder for each issue/project you are working on.
- Review the files you are about to commit (with
git status -sb), as only files in your folder are allowed to be added or changed!! If you have a hard time with this read through our small section on Git
- Commit and push your changes. Prefix your good commit message with the project path and issue ID (e.g.
gitlab-ce#1337 Commit message). This creates a commit note in the issue, making it easy for other people to contribute and fork the design (especially important if someone is out-of-office).
- Create a merge request and mention any designer who manages this project.
TODO: We should write a pre-commit hook that checks for this naming convention, both in and outside sketch.
- Readability above truncation, so:
- separate words with hyphens, no-spaces-everywhere_
Files & Folders
- for each issue create subfolders for issues
Layers & Groups (inside Sketch)
- Try to adhere to BEM naming convention like so: block-element__modifier
if you need to add the modifier, you can:
- Please try to use the Symbol Resizing feature, when creating symbols
- Add hidden full red (#FF0000) blocks, for important paddings and margins.
All designs mockups and details are delivered in the issue that describes the feature/problem/etc. So there is one place to look for everything related to it.
Designer & Developer Communication
Designers and developers often have different priorities, even though everyone is working toward one common goal: a fantastic, delightful, functional product. At Google, we're always working on ways to bridge this gap through unified spec formats and tools, so that intricate details are never lost in translation and things get done the way they're intended the first time - Designer & Developer Communication Google IO 2016
Spec previews can be generated with the one of the SUPERPOWERS!
When additional detail is needed, developers will ask for this. Take inspiration out of the link above if needed.
Oh My Git
Git is hard: screwing up is easy, and figuring out how to fix your mistakes is sometimes almost impossible. Here are some links and tips to help you along!
Delete your changes on a file and make it as if you never touched it! (before commited anything)
git checkout FILEPATH/FILE
If you did already 1 commit, but want to uncommit those changes
git reset HEAD^
The archive directory contains all old design files and resources, including those made with Antetype.
Old Antetype design files can still be valuable, if so see: Converting antetype files for use with sketch
- Issue for Onboarding/Toolkit Discussion
- Issue for Design Discussion on Guidelines for UX/UI
- Issue for Repository Organization Discussion
- Issue for Layer/Group Naming Convention Discussion
- Issue for GitLab Design Kit README Discussion
- Get the user started with all already existing materials
- Try to kickstart design work while avoiding time lost on creating the duplicate content
- Let designers contribute in a stable and consistent manner
The GitLab Design Kit is distributed under the MIT license, see the LICENSE file.