My goal was to use nested styles and with the latest update from sketch 52 apply layer and text styles as overrides. Since I am focusing on the process of making the most adaptable symbol I would skip the guidelines of creating the base container and label for this in sketch. Download sketch file :. To have everything we might need and simulate the states from one symbol I need to put everything in the symbol from the start including the label, the outline container , the placeholder text, the helper text, the leading icon and the trailing icon.
The helper text is also part of the main symbol because that is where we simulate the validation messages. In order to make it flexible with the size of the text field growing we need to pin the helper text to the bottom so it always stays there no matter the size of the field. Helper text is done! In the text field we can show 2 icons. One in front of the placeholder text called leading icon and another right aligned to the field called trailing icon.
For that purpose I created a placeholder icon that would act as an icon indicator in the main symbol. Foremost, we need to nest the icon inside the symbol so we can easily override it with other icons:.
Tip: Make the icon shape combined shape so you avoid having multiple overrides options just because your icon can consists of several shapes. The trailing icon needs to be inside the container so it follows the resizing of the field:. To add the leading icon before the placeholder text we need to duplicate the current symbol because that is another type of text field we can use.
In order all of this to work we need to create the text styles because that is the only simple way how we can simulate the changes in the text color when the state changes. We need text styles for the label, helper text and input text when they are in inactive, activated, error or success state:. Branches Tags. Could not load branches. Could not load tags. Latest commit. Git stats 11 commits. Failed to load latest commit information.
Create Nested Symbol. You can use Emojis in front of the text layers to help quickly identify what needs to be done in the Override panel. The order of the Symbol layers is reflected in the Overrides panel. Make sure all of your Symbol layers are organized based on the hierarchy reflected in the Overrides panel.
The common way to arrange is from Top to Bottom. You can swap any symbols as long as they are all in the same size. With the power of overrides, you can change the Symbol with a different image, different state, different icon all in just one Symbol.
To take a step further, you can change the color of the background, add or remove shadows, etc. As long as it is a Symbol, anything is replaceable. For Text Layers, to make it disappear in the Symbol, you can set the value to blank by pressing the Spacebar and then Return key in Overrides panel.
The override option will be hidden in the panel. Disabled Overrides work for text layers too. Go to the Symbols Page and lock the layer by mouse over the layer, then press and hold the Option key and the Lock icon will show up. Click on it and the layer will lock. Return to Instance and select the Symbol, you will notice that the layer is now hidden from the Overrides panel. If you unlock the Symbol or Text, it will show again in the Overrides. Sometimes, you might find it hard to override in the panel.
Sketch is smart enough to retain the overridden content. However, the downside is that you will have multiple Symbols that are similar. If there are changes needed, then you will spend more time updating related Symbols. With the flexibility of Nested Symbol, there is a lot of different ways to create a component. Most importantly, you can keep your Symbols organized and reusable. Like this, your design workflow will improve significantly.
Always make the Text Layer in Symbol Fixed, this will make it align properly and retain its padding and position when resizing. You can speed up your workflow by adding the Symbol icon to the toolbar.
Go to the Toolbar and right click it, choose the Customize Toolbar, and a modal will show up. Find the Symbol icon and drag it to the Toolbar. You can place it anywhere you like.
Like this, you can view your Symbols in a multi-level menu view. There are many icon shortcuts that you can add to the Toolbar to speed up your workflow. Using Sketch Runner , you can search and place Symbols very fast as long your naming convention is well-thought out. This plugin works best for other things too.
You can press the shortcut Command Apostrophe to activate Sketch Runner. You can use Symbol Instance Renamer to make this task a breeze. This will help you update their names across all your documents. Once you create a new Symbol, it will show up in the Symbols Page. And if you check the Symbols Page you will find the symbols all over the place without a proper placement. Symbol Organizer will help us to organize the Symbols page and make it align and arrange appropriately according the naming of your symbols.
It can help to remove all the unused Symbols from the document as well. You can use Sketch Runner to install the Symbol Organizer plugin. Before we run the Symbol Organizer, you should configure its settings first. This is how I setup the settings for Symbol Organizer. Once you press Organize, the Symbols Page will arrange neatly according to the naming and the Symbol Organizer configuration. A plugin called Merge Duplicated Symbols will help you find Symbols that have the same name.
You can choose the ones you want to keep and merge the others. Once you Run the plugin, a pop-up window will appear, there you will be able to choose the Symbols that you want to keep, then press OK and the Symbols will be merged. Sketch Plugins. Sketch Libraries. Templates and source code. Download the videos and assets to refer and learn offline without interuption. Source code for all sections.
Video files, ePub and subtitles. Introduction to Sketch Basic Tools. Strong Foundations for your Sketch Workflow. Designing an iOS App from scratch in Sketch. Designing and adapting for iPhone X in Sketch. Designing an iPad app from Scratch.
Designing a Website from Scratch. Designing a Website from Scratch 2. Boost your productivity in Sketch. Essential Sketch Plugins for Designers and Developers. Share Symbols with Other Designers. The Github for Designers. Make your design meaningful with real content. Working with Multiple Resolutions.
Vector Techniques in Sketch. Delivering Assets to Multiple Devices in Sketch.
0コメント