Skecth 3.7 新symbols机制
Today, the guys at Bohemian coding released Sketch 3.7. The biggest change they made (for better or for worse) was to symbols.
Symbols are now very much like Artboards and they occupy one central place in your document. Instances of Symbols are no longer groups which you can edit directly, but are instead single layers that just mirror the content from their master.
It’s getting a lot of hate. The main issue people are having is that you lose context of your designs once you’re in the new symbols page. Fair enough. But as they say themselves:
We’ve also made a conscious decision to ship it in parts. We could deny everybody our “complete” idea of Symbols for a long time, but instead we decided to release a simpler version as we think our customers prefer more frequent and smaller releases
I don’t think they’re done with symbols.
What they have done though is really cool. Here’s how I started using them today.
####The old way
One thing that always bugged me about the old symbols was that you needed to create a new symbol for every state that an element had. Say you have a list of items like so:
Simple list item with an inner shadow as the border
You want manage each row as a symbol. You also want the last item in a group to have a shadow on it. You have a few options.
- You can create a white solid underneath the symbol with a shadow.
- You can fake the shadow with a spacer type asset
- You can start duplicating symbols. “row / regular” and “row / shadow”
I’m sure there’s more. I’ve tried all the above and they all become unmanageable if you’re working on a big app.
- The background method requires you to constantly update the size of that assets. As well as remembering to use it whenever you have a similar list.
- The spacer method has similar issues. Keeping it updated throughout the file.
- Duplication is probably the worst to maintain. You’ve got to keep track of all the different states and update them accordingly. Blegh.
None of them work well if you’re handing over Zeplin files. They don’t make sense then.
Spacer option
Background solid
They all feel ‘hacky’. It’s the reason I ended up ditching symbols altogether. They were more work than they were worth.
####The new way
Enter nested symbols. These can be as simple or as complex as you’d like. Let’s start simple.
The first thing I did was to create a base symbol. This is what I want all other variations to work off of. It has everything except the shadow. I populated it with data and images from Craft (Try using the Craft repeat tool on a symbol with Craft data. Sorcery!)
The base symbol
Populated with some data (No shadow yet)
I then create another symbol and drag an instance of the base symbol into it. I named this row::last.
Creating the ::last symbol
I then put my solid with it’s shadow behind the instance
Adding the shadow
Now I can go back to my mockup and start using my row::last symbol
Changing the symbol type
Here’s where the fun starts. Say I want to change the font style on all my rows. Pre 3.7, I’d have to work through both symbols to make that happen. Now it’s just one step. All I have to do is edit the base symbol. The rest takes care of itself.
Notice the ::last symbol doesn’t need updating
If that wasn’t enough. If you select the row::last symbol, you can still edit the text and fill properties as you would if you were editing the base symbol directly.
This opens the door for LOTS of possibilities. In this example I created an ‘expired’ and ‘active’ symbol using the same method I did for the row::last symbol.
Creating some variations off the base symbol. You can change the opacity of nested symbols too!
Again, illustrating that your changes are propagated throughout the nested symbols.
Update 4 symbols at once
####Final thoughts
Context editing was great. Nested symbols are better. Maybe they’ll get together in Sketch 4 and have babies.
近期评论