is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. Refer to the advertising and sponsorship page for inquiries.+
One of the most tedious things about designing interfaces for a living is creating buttons. For example, you might start with one like this:
Soon, you’ll be making variants on it, like these:
When I use Photoshop for this work, each variant requires manually adjusting the left and right padding as the text expands or contracts. It’s very time consuming.
However, with Alexander Kudymov’s Dynamic Button plugin for Sketch, this process is made much, much easier. The padding around the button label is defined in the layer name for that text object. In these examples, the layer name for each text label is “28:80:40:80,” indicating that the button shape should have 28 pixels of padding at the top, 80 pixels on the right, 40 pixels on the bottom, and another 80 pixels at the left (I used over-sized dimensions for illustration purposes). Once the layer name is set, I can type any text I like, then hit the key combination command-J, and the button shape adjusts accordingly and instantly.
Watch this video to see it in action.
This is one of the many reasons I think Sketch is so terrific. Kudmov’s plugin is free and available here.+