7

Ask DN: Best approach to "skinning" an app in Sketch

5 years ago from

I have an app of approx. 80 screens, done in Sketch, every screen is done for iOS and Android (so they differ a bit). Now I need to make sort of "skins" for the app, which include recoloring elements with a new color palette and sometimes changing fonts. There will be 3-4 different variations. At the same time, the app continues to be designed every day, so every now and then a new screen or two are being added.

What's the best approach to keep all the "skins" consistent while not spending too much time on updates, if you know something of? ;)

I surely know about symbols and shared styles, but simple things like new font that has different character width crashes the whole thing ;( not to mention that there's no way to store color attribute separately from other attributes of shared style.

I'm just curious if someone has already faced similar problems and came up with an elegant solution or some useful experience.

8 comments

  • Arthur Lambillotte, 5 years ago (edited 5 years ago )

    Is there a reason why you need to make mockups for every 'skin'? If not I think you would benefit from using a style guide, with the different color palettes as a guideline, for the developers.

    5 points
    • Vasiliy LeytmanVasiliy Leytman, 5 years ago

      Sometimes some things change, like background images can be added (skins are app versions for different brands). But I get your point, and it's a very nice idea. May be documenting changes needed, instead of making them will take less time ;) Actually I don't need to have all mockups recolored, as they share a lot of elements, just 5-7 to show new client how it will look like. The rest is needed only to show developers what's changed, but they actually don't need every window too as they also change components. So thanks a lot!

      1 point
  • Shaun Janssens, 5 years ago

    Hey Vasiliy, maybe this plugin can help you. It can select all layers by color. https://github.com/getflourish/Sketch-Style-Inventory/

    3 points
  • Tyrale BloomfieldTyrale Bloomfield, 5 years ago

    You need to ditch every screen approach. Break it up into common parts or components. Design a system of "design legos", that will be used to assemble all of the pages.

    1 point
    • Vasiliy LeytmanVasiliy Leytman, 5 years ago

      Good point there, thanks man! But do you mean using symbols for that, or what? Because they suck a bit, like changing size of one symbol changes size for all of them, and if you detach, changes are not being propagated anymore. All in all, breaking into components and making a style guide possible would make my life much easier, so thanks ;)

      0 points
      • Tyrale BloomfieldTyrale Bloomfield, 5 years ago

        I do not mean symbols, because yes.

        I literally mean do not design every screen. Make a list of all the possible components you are using on the screens. Note the repeats or the variations on the same base component. Then only design the component once.

        Use your other documentation for a plan. Use the designed components to show 1 or 2 screens with them placed together. These will be examples of full pages. You do not need to show every page.

        If they insist on seeing every page in full dress, tell them to call me and I can set them straight ;).

        What you should have is a file with many pieces, not many pages. Systems not screens.

        0 points