Henrique Ourique • Aug 1st, 2017
One of Lingo’s jobs is to help design teams ensure consistency at scale. We do this by enabling you to build a central design library that is accessible and usable by your entire organization. However, if your design team uses Sketch, chances are you have a separate library just for UI components. This produces multiple sources of truth, making it harder to scale consistency. Not anymore…
With the Lingo plugin for Sketch we’re now fully supporting your component-based workflow. This means you can add your Sketch design system to Lingo, share it with your team and ensure everyone uses the right Symbols, Text Styles, Layer Styles, Artboards, Groups and Layers.
At its core, the plugin allows you to move assets between Sketch and Lingo by using the familiar actions of “pushing” and “pulling”. Let’s dive deeper into how you can leverage push and pull to set up, use and evolve a shared design system with minimal effort.
There are a couple of ways to push content from Sketch to Lingo: batch push or selective push.
Batch push allows you to effortlessly add all the reusable components of a Sketch file to Lingo — Symbols, Text Styles and Layer Styles. This is the quickest way to get started and frees you from the laborious task of “hunting” for every component that needs to be included in the design system. To batch push simply…
As a bonus, if you batch push to an empty Lingo kit, the plugin will set you up for success by automatically organizing the different components into separate sections. Batch push gives you a more holistic view of your design system and a better understanding of the “relationships” between its components.
Selective push is the manual alternative to batch push and allows you to add the Symbols or the non reusable components of a Sketch file to Lingo — Artboards, Groups and Layers. This can be performed either by copying and pasting from Sketch to Lingo or selecting a few assets in Sketch and pressing “Push (#)”. The latter will display a confirmation step, allowing you to review your push.
Adding content is just one part of setting up a shared design system. One could argue that naming and tagging is equally as important. After all, to pull from a system, users must first locate the pieces they need to use. In Lingo you can of course name and tag any asset. However, With / The / Way / You / Name / Components in Sketch we saw an opportunity to automate tagging and naming so…
Once your components are in Lingo you can customize how your design system is presented and give guidance to anyone pulling from it by using features like asset reordering and inline notes.
Similar to pushing, there are a few different ways to pull content from Lingo to Sketch: batch pull or selective pull.
Batch pull adds the reusable components of your design system to your working Sketch file in one go. This allows you to design without ever “leaving” Sketch and is specially handy if you rely on Sketch’s built-in UI or plugins like Runner to place components. To batch pull simply…
Batch pull ensures you’re designing with the full context and constraints of the design system, leading to a more efficient and consistent workflow.
Selective pull is the manual alternative to batch pull and allows you to add any component from Lingo to Sketch either by dragging and dropping or copying and pasting.
Products change and interfaces evolve. This means updating components may become a recurring task once your design system is set up and your entire design team is pulling from it. To update a component simply make the necessary changes wherever you’re using it and push. Independently of the push type (batch or selective), you’ll always get a visual diff where you can compare what is changing before committing. However, let’s look at what happens behind the scenes when you change a few components and batch push:
Batch push updates “connected components” together thus ensuring your design system remains globally cohesive and up-to date.
When design system components get updated all you have to do is pull the changes into Sketch. The most efficient way to do this is to batch pull from Lingo and let the plugin figure out exactly which components need to be updated. You’ll see a visual diff so you can review the changes before committing any updates to your working file.
Batch pulling guarantees you’re always working with the most up-to-date design system while ensuring all “connected components” get updated.
Helping design teams ensure consistency at scale goes beyond just helping designers. Because Lingo is a central design library that is usable by everyone we’re making sure even non Sketch users can find value in design specific components. This is made possible via Lingo’s file cuts feature which provides PDF, SVG, PNG or JPG alternatives of every Sketch component in your library. Let’s say your CEO or Product Manager wants to communicate an improvement to the product’s on-boarding flow, they can mockup their idea by simply dragging the alternate file cuts of the Sketch components into their favorite content creation tools like Keynote or Google Slides. We believe given the right design “ingredients”, everyone on the team can express themselves in creative ways.
To start using the Lingo plugin for Sketch simply download and install the latest version of the Mac App. Once you do this the plugin will automatically install. Then open a Sketch file and launch the plugin from Plugins > Lingo.
We hope you find the Lingo plugin useful for ensuring design consistency. In the months to come we hope to bring you additional features that will help with scaling and automating consistency beyond design. As always, if you have any questions, suggestions or feedback we’re just an email away.You can also find us on Twitter or Facebook.