![]() ![]() You can use combinations of pinning and fixing to determine where how each element in your symbol is affected when the instance resizes. You should create your symbols at the lowest size conceivable because things are much less likely to break as you resize them larger than vice versa. If a layer is 10% from the left edge, it will remain 10% from the left edge as you go up and down. The same holds true for placement within a symbol. If a layer goes from one edge of the artboard to the other, then it will stay edge-to-edge as it resizes. If a layer is 50% of the width of the overall symbol, then it will remain 50% as you resize. Sketch provides several distinct tools to help you prepare individual elements of your symbol.įirst, by default every layer resizes by percentage within the symbol. Prepare to resizeĬhances are you’re designing for devices or screens that won’t always be the same size. Right-click on it and select Lock Layer from the context menu, or select Arrange > Lock Layer from the top menu. You can lock the layer by selecting it in the layer list. To prevent this from showing in my overrides, I lock the layer. For example, in my Card symbol, I don’t want to change the “By” before the author name. Sometimes you will have layers that you don’t want to change from instance to instance. And, because Sketch is magical, it will automatically push and pull elements to the right of your text to the right or left as the text gets longer or shorter. This way, changing the text on each individual layer will retain the styles for each type. Instead, I recommend breaking out that single, multi-styled layer into individual layers for each style. It’s not useful in symbols because you can only change the text of a layer and not the style of individual parts. It’s efficient when I’m designing something quickly. When those pieces of text fall on the same line, I’ll often combine them in a single text layer by selecting different parts and changing the styles. I often use different styles of text in the same layer, whether to add links, emphasize a word, or quickly mock up a key/value pair. ![]() Note how they resize and reposition automatically as I override them. Here’s what I do: Rename layers for better labelsīecause each bit of text has a different style, I have separate layers for the name, Twitter account, and role. Now that you have created your first symbol, let’s consider how to make it more organized and reusable. Clicking this will take you back to the instance of the symbol you were editing. When you edit a specific symbol, a button will appear at the top left of the canvas prompting you to Return to Instance. You can access your Symbols page by either a) selecting the page at the top left section of the Layer List, b) double-clicking a symbol to edit it, or c) hitting enter with the symbol layer selected. Each symbol you create afterward will automatically appear on this page, by default to the right of the most recently added symbol. When you create your first symbol, it will create a new Page in your Sketch document called Symbols. When you create a symbol, a checkbox below the name asks if you want to send the symbol to the “Symbols” page. If they are not grouped, then the default symbol name will be the name of the bottom-most layer. If you create the symbol from a group of layers, the default symbol name will be the name of the group. You can also right click on the selected layers in the canvas and choose from Create Symbol from the contextual menu. From the Layer menu, choose Create Symbol. Select the layers you want to include in the symbol. ![]() Creating symbolsĬreating a symbol is simple. Here are my recommendations to take your symbols to the next level. Making a symbol is easy assembling a flexible system of symbols takes planning and perseverance. Bohemian Coding has made symbols into powerfully reusable objects that can speed up your design flow and help you create more coherent work. Symbols in Sketch have come a long way since I wrote about them just last year. ![]()
0 Comments
Leave a Reply. |