Select a text layer and launch the plugin by pressing ⌘J. Turns a text layer into a simple button.Very soon it was obvious that such things should be done by a single plugin. Then I would launch Dynamic Button to get the bottom layer resized and Dynamic Reposition to get the caret icon into the right place. I would duplicate an existing component, and change its label. Usually, I created a drop-down list as follows. These plugins make an excellent combination. For example, one can ‘ask’ the drop-down list arrow to be always on the right, with the indentation 10 pixels from the page. The second one uses indentation to position the objects in a component. The first one adjusts the button size to the new label. As the result, we have some decent CocoaScript-based plugins.įor quite a time, I used the plugins Dynamic Button and Dynamic Reposition. Some skilled designers couldn’t but come up with solutions of their own. These problems have been around too long to be unattended. Thanks to Sketch’s plugin engine, extending its functionality is just a question of time.

The Symbol won’t know I want to align the text to the bottom.ĭynamic Button and Dynamic Reposition plugins were close to fixing it. What if we have the price at the top and the name at the bottom with the name aligned by the bottom of the picture? If the name is shorter or longer than it is by default, the construction will become a mess. The problem is the tiniest change in our card will prevent Symbols from working.

Turn this construction into a symbol, and the considerate Sketch will allow each item to have parameters of its own. Let it be a more complex component like a product card with the photo, name, and the price. One has to adjust the rectangle to fit the label there is no escaping it.Īnother example. Unfortunately, this is not a case when Sketch Symbols can help. Everything is perfectly fine until you need a button with a long label.Īssume the button width depends on the label width. Create a text layer and a rectangle, then align them, and turn them into a Sketch symbol. There is still a lot of room for improvement. However, as useful as it was, this update didn’t change the situation entirely. Of course, there has been a certain progress lately, and the symbol update in Sketch 3.7 is a fine example. That is why it is totally surprising that today’s design tools are so poorly suitable for work with components. When it comes to the design, UI components are the foundation stone.

The plugin can be used with State Machine. With Compo, pressing ⌘J is all it takes to turn a text layer into a button or put an existing component in order. Compo is a Sketch plugin that makes it easier to work with interface components.

Compu sketch