Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Christopher Bartley

Component/Symbol Art Boards Cut Off Symbols When Uploaded to DSM Revealing Other Issues

I'm trying to resize symbol art boards so that the entire symbol and its other elements (e.g., shadows) also fit on the art board. There are three issues:

  1. DSM cuts off symbols. DSM doesn't display shadows, or even strokes in its entirety because of the auto "Fit" option under Sketch's Symbols layer. Strokes that are selected to align in the center or inside vs. the outside causes the symbols art board to also auto-align with those strokes in the center or inside, which cuts out the "outside" portion of the rest of the stroke. This is fine, since the symbols still show correctly with in a layer. However, when that individual, un-nestled symbol is uploaded to DSM, the symbol reflects the cut-off nature that the art board produces. And so I try to create some padding in the symbol's art board, which leads to #2 below:
  2. No "Margin/Space" Option. Sketch only has a "Fit" option, which appears to be the automatic action when a symbol is created. Because there is no option to create some white space/padding so that DSM won't cut off the symbol, I attempt to resize manually, which leads to #3—the bigger issue:
  3. Unintended Symbol Resizing. This appears to happen when an individual symbol is linked to (or nestled within) another component with individual symbols. When attempting to make the art board a little larger to add padding for the DSM upload, the symbol within another component on a separate art board is resized—and the "Adjust content on resize" option has not been selected. Here's the caveat: The symbol does not resize on its individual art board appears to only resize as a nestled component on the other art board it's located within.

So, as you can imagine, while trying to create padding for DSM to capture strokes, shadows* and other elements affected by the inside/center stroke alignment issue, and then heading back over to the Layers tab, I encounter a mess of resized nestled components (if I didn't catch it in the Symbols layer).

*Shadows are affected because the art board does not recognize shadows, only the symbol's fill or stroke)

I hope this made sense

Figure 1: Sketch's stroke alignment to center or inside causes art board to "Fit" to that alignment and trim symbol.

 

Figure 2: Before adding padded to symbol by resizing art board.

 

Figure 3: After adding padding to symbol by resizing art board. This causes unwanted scaling of symbol as nestled component in another art board.

 

Figure 4: DSM trims the stroke (or shadow) because of the art board's alignment to center/inside stroke option.

**I would easily just change the stroke from center to outside so that the art board does not trim the symbol, but then the icon's appearance is affected, especially when it's resized smaller in other parts of my design.

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Mike Siegle
InVision ambassador Mike Siegle, InVision Employee , ambassador
Comment actions Permalink

Hey Christopher, 

It's Mike from InVision here. I'm really sorry you're running into these issues but wanted to thank you for taking the time to share this with us in such detail!

At this point, I'm not entirely sure why this is taking place and was hoping you could provide the following items: 

  1. I'd like to try and recreate this on my end and was wondering if you're able to provide a screenshot (or series of screenshots) showing how this symbol is setup/created
  2. Can you send us screenshot of the Layers panel for this symbol?
  3. Are you able to provide a the exact steps/actions you're taking when editing this symbol?
  4. What version of Sketch do you have installed? Sketch > About & Registration…
  5. What version of Craft Manager do you have running (for example 1.0.95)? Checking Craft Versions

Once I have these details, we will be better suited to dive deeper into this investigation together.

If you have any questions, please don't hesitate to reach out, I'm here to help any way I can.

Looking forward to hearing back!

All the best,

Mike

0

join the conversation

to comment, sign up or sign in.