How we’re using Abstract and Sketch Libraries in large-scale projects
If you’re working as a UX-designer for the largest system integrator in Germany on large-scale projects for multiple systems and devices, chances are that you’re dealing with pretty big design files in which you can find hundreds of artboards, symbols, and styles.
When I started working with Sketch in mid-2015, some more or less functional plugins existed in order to commit and push your progress on different branches to GitHub. But one of the biggest downsides was that your .sketch binary files were obviously not mergeable. Fast forward two years later and we’ve stumbled over Abstract. It solved the problem, Sketch moved from a binary file to an open file-format based on JSON and we were finally able to create multiple branches that are mergeable and non-destructive in any way. Our workflow at this time was powerful, but it even got more powerful with the integration of Sketch linked libraries.
In this article, I want to show you how we’re structuring our files for large projects. We’ve iterated this structure multiple times, some things worked great from the start, some things needed more improvement over time.
Organisation of our Abstract project
In general, our projects are split up on different platforms. For one of our latest projects, we’re working on two mobile frontends (iOS and Android) and a web-frontend that is also usable on mobile clients thanks to a responsive layout. This is the base for the general structure of our Abstract projects:
- Project-iOS.sketch
- Project-Android.sketch
- Project-Web.sketch
- Project-Shared.sketch
Each platform has his own Sketch library file. In addition to that, we have a Project-Shared.sketch file that includes some assets that all three platforms are using. If we’re updating those assets, they can be automatically updated in all of the other project files for the clients. We can also access all other library elements; the web version is basically re-using the Android elements, just with other values for width and height.
Organisation of our Symbols
Imagery
Imagery / img-image-01
All assets that are images or graphical content besides icons. One example of this could be the logo of the product or the customer.
Icons
Icons / ic-icon-01
All assets that are used as an icon inside our objects and elements. Most of them are stored inside our Project-Shared.sketch file, but some of them are exclusive for iOS and Android. We’re building all of them on a base-size, in most cases 24x24, so that we can easily upscale them in the design.
Elements
Elements / Buttons / 01-Primary / 01-Active
All user-interface components that should be re-usable. For example, this could be a button or a picker where you’re choosing a specific type of data. They’re offering multiple states sometimes and what we’re trying to avoid is to create more element components than you would need by nest those states into one component. Due to some limitations; for example: resizing and auto layout for text and other layers inside this component, we sometimes need to add more component states. We’re structuring them by naming the state and numbering them in a logical order.
Objects
Objects / Bottom-Sheets / 01-Minimized
Re-usable components or even sub-views that are containing multiple elements. One example for this could be a dialog or modal that pops up and contains multiple input-field, a picker, and some buttons and icons.
Text-Styles
SF-Pro-Display / Medium / Centered / #00000
Still one of the biggest construction-sites for us and the area where we’re desperately awaiting improvements from Sketch. This is our current structure that works best, even though it’s not efficient and hard to maintain.
Some other useful stuff and tips
In order to select our elements and resources faster and more efficient, we’re using the Sketch Runner plugin. We can search for different components inside Sketch and just place them. Setting resize options allows us to resize the elements accordingly — if needed — but it’s still a bit restricted, for example, if we’re working with labels that are wider than usual. I hope that future Sketch versions are shipping with improvements regarding resizing options so that your layout is even more flexible.
Since Sketch 52 we’re also using layer-styles for basically all elements in our objects to manipulate colors. All of our icons are also working with layer-styles, so forget about creating multiple symbols for each icon in order to choose an active or a disabled state. Our developers are using SVGs or PDFs anyway, it’s a lot easier for them and more future-proof, so they’re also flexible enough and can change the colors of the icons as well.
By keeping this level of organization and the structure of our project files, we can easily track changes and merge elements, icons, objects, basically everything in a fast, efficient and reliable way.
By the way: If you want to chat with us about Sketch, join our Meetup in Cologne! We’re also looking for speakers and we’re livestreaming our events on YouTube. You can find more information here: https://www.meetup.com/de-DE/Sketch-Design-Cologne/
Interested in working with us? Checkout our jobs page: we’re hiring UX designer, developer and more: https://www.grandcentrix.net/
