Speed up your Sketch design specs using GitLab Pages
Title:
- Design handoffs: From Sketch to developers using GitLab Pages
- How we handoff design specs with Sketch and GitLab Pages
- Speed up your Sketch design specs using GitLab Pages
- Faster design specs: from Sketch to developers using GitLab Pages
Summary: Using the Sketch Measure plugin to generate design specs and GitLab Pages to host them online for anyone, you're able to save time, money, and improve communication between designers and developers. At GitLab, we're using this setup to power design handoffs not only for our product but also for our Design System.
Main take-aways:
- Sketch Measure is a free, open source Sketch plugin that automatically generates specs from your Sketch designs, accessible via a web-based inspector.
- You can even annotate the designs with implementation notes.
- Your company saves money on Sketch licenses.
- Developers can use their favorite operating system, no need to be locked to macOS or have a macOS virtual machine to open Sketch files (which also saves time).
- Developers save time by not having to install Sketch, learn Sketch, download files, and open files.
- The GitLab Pages is a free continuous integration (CI) solution that provides a URL for your design specs.
- You just have to push your specs to GitLab and the rest is magic.
- Specs are effortlessly made available to developers through a URL, easy to share anywhere.
- By mentioning the GitLab issue in the commit message, a note is created in the issue to let everyone know that the specs are available or have been updated.
- GitLab's CI can save all versions the design specs that you pushed online, using the artifacts feature. This means you can go back in time and see what a previous version looked like, inside of GitLab, without having to clone, revert, download anything. Everything can be saved.
- Also, because we're using Git for version control, you can browse the history of changes made. Nothing is lost.
- GitLab CI is so awesome and flexible that we're thinking about using it to automatically create SVG files for icons every time we update our pattern library Sketch file.
Keywords, themes: Sketch app, Sketch Measure, design specifications, GitLab Pages, continuous integration, user interface design, frontend development, designer-developer communication, DesignOps
Edited by Pedro Moreira da Silva