18

Ask DN: Is your workflow broken by the latest Sketch symbols/styles update as well?

almost 4 years ago from , Designer at Mono

Hi DN

I was wondering whether you guys have the same issues as me with the latest Sketch updates:

First, copying a symbol from one file to another creates a new symbol rather than sync / replace it if it already exists. This results in multiple symbols that do the same thing and messy files as a result. For example

This happens a lot to me when you have multiple parts of a very big app separated into multiple files, but with shared components.

Second, not being able to edit a symbol in context is a serious pain in the ass for me. I cannot design in a vacuum. The pinnacle of this frustration is demonstrated when I created a white arrow and turned it into a symbol:

I know I can fix this by adding a BG colour to the artboard of that symbol, but the point is that I cannot see what is going on around the symbol. In a theoretical wonderland, you might design all your components first and then paste them together afterwards, but I bet you hands down that you still want to tweak some stuff once you put everything together. The new symbols effectively makes that impossible without going back and forth – which sort of beats the purpose of direct manipulation software for me.

Finally, the whole usefulness of styles for me was that you could quickly see the changes on multiple artboards. The new “sync” button makes that process arduous. Again, I don’t like to design in a vacuum. When I tweak the colour of a button, I want to see how it looks on 4-5 different artboards, rather than just on that one artboard.

These three combined really make designing in Sketch a whole lot less great than it used to be. The medicine is worse than the disease for me. Direct manipulation is one of the key reasons I use graphic design software in my workflow. These changes break that principle on several fronts and I wonder if any of you feel the same way? Have you run into similar issues? Or is it just me?

24 comments

  • Tristam GochTristam Goch, almost 4 years ago

    It's actually fixed my workflow tbh

    Previous flow went something like this:

    • edit element
    • forget it was synced in 100 other places
    • work for 15 minutes
    • realise my mistake
    • curse
    • hit CMD+Z frantically
    • watch Sketch crash
    • reopen Sketch with my undesired changes autosaved across all my artboards
    7 points
    • Xavier Bertels, almost 4 years ago

      By that logic, you would now:

      • edit element
      • forget it was synced in 100 other places
      • work for 15 minutes
      • realise your mistake
      • curse
      • try to find the style you changed 15 minutes ago
      • hit the sync button
      • have some styles synced and other unsynced
      • curse because your file is a mess of synced and unsynced styles

      which is only marginally better, and a handicap for people who liked to use auto updating styles.

      2 points
      • Tristam GochTristam Goch, almost 4 years ago

        I suppose the difference is previously I was making a change I didn't want synced but it happened in the background regardless. Now if it's a change I want to apply everywhere that's something I'm actively thinking about as I make the change so I don't forget to sync.

        1 point
        • Xavier Bertels, almost 4 years ago

          Ha, I see. By my logic I would just remove the applied style. Or add one if I want it in sync.

          So, what do you do when you quickly want to review the impact of a design change (e.g. colour tweak) on multiple artboards?

          0 points
    • Christine RødeChristine Røde, almost 4 years ago

      Every. Damn. Time. The new version is a lifesaver to me.

      2 points
      • Xavier Bertels, almost 4 years ago

        So like Tristan, you do forget that you are editing a styled layer, but you don’t forget to sync? I don’t understand how that works. Can you explain your current workflow and how it is better than the previous one? Curious to learn.

        1 point
  • Miet ClaesMiet Claes, almost 4 years ago

    The direct manipulation would be a great feature to have again! All designers want to be masters of context :-)

    5 points
  • Andrew Michael ToddAndrew Michael Todd, almost 4 years ago (edited almost 4 years ago )

    The new symbols flow assumes that you will never have a need to measure the distance between a layer within one symbol to a layer within another symbol.

    Want to quickly use the eyedropper to match a color from another layer? Oh shit.... the layer is in a symbol and now I'm on the symbols page... back to the original page..... copy the artboard (because that's the workaround they suggested on twitter for editing in context)... back to symbols page.... paste the artboard beside the symbol... eyedrop the color... jump out the window.

    4 points
  • Filippos ProtogeridisFilippos Protogeridis, almost 4 years ago

    I personally stopped using Symbols after the update. Although some concepts are good in theory, e.g. taking inspiration from object oriented programming and overrides, in practice my workflow was at least 3-4x slower, and the lack of in-context editing was a deal breaker.

    4 points
  • Jon MyersJon Myers, almost 4 years ago

    Yes, my work flow is broken now as well.

    I don't like the extra steps.

    I find myself abandoning the use of symbols or unsymboling, and just going back at the end - and symboling after iterations have settled down.

    It's very, very frustrating and poorly considered to impose such strongly opinionated workflows onto users.

    3 points
  • Fri RasyidiFri Rasyidi, almost 4 years ago

    Well tbh, the new symbol system actually improved my works by A LOT like:

    • I have full control of all my symbols since I don't have to worry messed a symbol up since it's locked in different page,
    • it can nest symbols too—I used to have to manage a lot of icons and painfully replace them one by one
    • I can just create modals/entities and then add the contents later…
    • …and then easily change states without redoing the contents
    • it's far easier to manage my assets slicing too since they're all already in a single page.

    As for copying symbols, not replacing the current one is very desirable. If it's replacing the old ones in your symbols directory, there's a good chance it accidentally ruin your current design.

    I do have a solution for your icon problem that I use. You can actually change the symbols' BG color without affecting the symbol's rendering.

    You can do it by selecting the symbol's artboard, change the BG color, and then turn off "Include in Instances". You can also turn off the "Include in Export" option to make sure you won't export the BG color when it's exported. Here's the screenshot on how to do it:

    BG Color Symbols

    2 points
  • Manny Larios, almost 4 years ago

    Yeah. I miss being able to edit a symbol within it's context. I'm also not a fan of not being able to swap an element with a symbol from the Inspector ( yes: I know you can do that if it's currently a symbol, but I wan't to be able to swap any layer to a symbol if I choose to do so). I don't like having to place a symbol and have this hovering, transparent symbol for me to 'drop' somewhere on an art board. Sketch: can we have the option to at least select the layer from the layer's palette, insert the symbol, and have Sketch be smart enough to known that you mean to replace that layer that was selected with the symbol your placing? I love Sketch! I really do. But I believe that Symbols worked but the way it was before. Maybe we can meet in the middle? :)

    2 points
  • Mike StevensonMike Stevenson, almost 4 years ago (edited almost 4 years ago )

    YES!! I literally can't believe Bohemian would do this. What if you have white text in a symbol that lives on a black background? What if you want to size elements in context? What if you want to use the color picker to select a color not in the symbol? This is insanely frustrating.

    1 point
  • Eren Emre .Eren Emre ., almost 4 years ago (edited almost 4 years ago )

    Short answer, no. I'm happy with this change.

    First, copying a symbol from one file to another creates a new symbol rather than sync / replace it if it already exists.

    This I agree with. I'm sure they'll find a better solution for this.

    Second, not being able to edit a symbol in context is a serious pain in the ass for me.

    I actually love this. I don't accidentally change a symbol and mess up with the rest of the page now. An easy way of switching between symbols and last page I was on would be great tho.

    Finally, the whole usefulness of styles for me was that you could quickly see the changes on multiple artboards.

    This one I love as well. No more accidentally changing hundreds of layers. I think they got inspired by Keynote with this feature.

    Overall the biggest complain for me right now is the lack of smart resizing for symbols. Eg. I cannot make my buttons symbol because every button should have a different size and it seems like it's impossible to do that at the moment.

    1 point
  • Johan Ronsse, almost 4 years ago

    I love the new Sketch features and in fact they have been helping my current workflow a lot. I am in a project with a ton of complex forms. My symbols look a bit like this depicting every state of the form:

    Test

    This is just 1 small part of the UI.

    Lack of in context editing is the #1 lacking part to the implementation now. I often have to measure how many pixels I have to move something to make it "correct" and then apply it within the symbol.

    I would love some way to have 2 panes open: 1 with your symbols and 1 with your designs. In fact I think I saw a screenshot with just that in an old thread about Sketch 3.6 but maybe I was dreaming.

    The styles syncing is debatable, I don't think it's in the way of experimentation and direct manipulation. For me the situation that you are looking at elements on multiple artboards at a time occurs way less than the situation where an inadvertent change triggers a global styling change. For example if you have 1000 layers that use the "standard text" style, and you change it without remembering to make a new style or set the text to "no layer style" you effectively get into a massive beachball situation where Sketch is trying to apply your styles to many layers at once.

    I also have some minor quips about not being able to detach a symbol until it's "focussed" (you have to left click first and make sure it's the selected artboard). I think that's just a bug.

    By the way, did you know you can turn an entire artboard into a symbol? So you can prepare your states separately on small artboards and then match them together using instances. This might not mesh with some people's workflow but I love it.

    Currently to migitate the in-context editing issue you can try the following: if you position your symbols close to the designs you are working on you can kind of do in-context editing if you have a large enough screen. But it involves a lot of direct manipulation to position the artboards correctly.

    I also have to do a lot of "symbol hunting" now where I have to go and look where Sketch positioned the new symbol. I think it's placed right of the rightmost artboard but it can be pretty far. A trick to get to a symbol fast is to use Command + 2 to zoom in to a selected symbol in the layers list.

    1 point
    • Alejandro CamaraAlejandro Camara, almost 4 years ago

      Regarding this part

      I would love some way to have 2 panes open: 1 with your symbols and 1 with your designs. In fact I think I saw a screenshot with just that in an old thread about Sketch 3.6 but maybe I was dreaming.

      I think what you saw was a symbol created but with out sending it to the "Symbols" page, and positioned besides the working artboard.

      0 points
  • Thomas Michael SemmlerThomas Michael Semmler, almost 4 years ago

    I never used symbols. I still think they are awful, the update didn't change much for me.

    Unless they get something like "States" or the ability to mark a part of a symbol as flexible, as in I want this button, but I wanna be able to change its width based on the text inside it, something like that.

    0 points
  • Account deleted almost 4 years ago

    I've been moving the symbol artboards to whatever page makes sense. I used to heavily use Magic Mirror as a stop gap for next symbols. Now, I have a page full of components (like a form). Each component is a symbol. I place those symbols in the full form page. The symbol artboards are nearby (not away on a special symbols page). I love this flexibility.

    0 points
    • louie solomonlouie solomon, almost 4 years ago

      I don't understand how this is any more flexible than how it was originally implemented. Not only could you edit the symbol in context, you could edit any instance of that symbol in context as well.

      1 point
    • Noah Warren, almost 4 years ago

      Just tested this and it created a duplicate symbol of the same name... ugh!

      1 point