How to fix Symbols’ layer visibility issues?

This article addresses the visual discrepancies you may encounter when using different versions of Sketch, especially concerning the new Hide Layers feature introduced in version 101. These discrepancies can affect not just layer visibility but also cause distortions, unusual spacing, and other unexpected visual issues.

Introduction to the Hide Layers feature

In Sketch version 101, we introduced a powerful feature: the ability to hide any layer within a Symbol instance from the Layer List without affecting the Symbol Source. While this feature provides greater flexibility in design, it also introduces compatibility issues for users who are working with older versions of the Sketch Mac app.

Compatibility issues with older versions

If you’re using a Sketch Mac app version older than 101 to edit a document where the Hide Layers feature was used, you’ll likely encounter visual discrepancies with symbol instances. These issues can manifest in several ways:

• Layer visibility: Hidden layers in newer versions might still be visible in older versions, leading to inconsistencies between the Mac app and the Web app.
• Distortions: Symbol instances might not render correctly, causing elements to look distorted or misaligned.
• Weird spacing: You may notice unusual spacing within symbols, making the design look off compared to how you see it in version 101 or newer.

These issues typically arise when someone using version 101 or newer has edited the symbol instances, causing the discrepancies when viewed in older versions.

Troubleshooting visual discrepancies

To determine if the compatibility issue is the root cause of your visual discrepancies, follow these steps:

1. Communicate with your team
   1. Since these issues often arise in collaborative workspaces, start by reaching out to your teammates. Confirm whether they are using different versions of Sketch, as version mismatches could be causing the discrepancies.
2. Check your Sketch Mac app version
   1. Open the Sketch Mac app.
   2. Go to the top menu bar and click on “Sketch.”
   3. Select “About Sketch” and note your version number. (These issues typically affect versions older than 101.)
3. Identify affected Symbols
   1. Open the affected document in your Sketch Mac app.
   2. Locate the symbol instances with visible issues.
   3. Note any differences in layer visibility, distortions, or spacing.
4. Compare in the web app
   1. Open the same document in your browser.
   2. Compare how the symbol instances appear in the Web app versus the Mac app.
   3. If you see differences, it’s likely due to the compatibility issue.

If you encounter these issues even while using version 101 or newer, this suggests a different problem. In that case, please contact our Product Support team for help.

How to resolve these issues

To ensure visual consistency across different platforms, you’ll need to update your Sketch Mac app to version 101 or newer. This update will align the appearance of symbol instances, eliminating issues with hidden layers, distortions, and spacing.

If the problems persist after updating, don’t hesitate to contact Sketch Support for further assistance.