A Sketch tutorial for building UI elements that maintain padding and spacing as content changes Download the Sketch Smart Layout file here: www.dropbox.co... #sketch #smartlayout #tutorial
Bryan from Learn InVision Studio Would be good to make an extra video where you show how to make more complicated buttons with nested symbols. Like Button with icon+label, dropdown-button and square-button with different states for the background and the label. And all that still with dynamic width ;-) Keep it up!
Is there a way to make a lable on the left and have an icon on the right. Then when the text length gets shorter or longer the icon would follow keeping the same padding? Thank you for your help! Edit: I figured it out, Thanks!
I started to hate Sketch, there are lots of issues. For example, how I can create a button and arrow on the right as an auto layout? The text is already defined as symbols in the library and when I pick the text from the library(symbol) and locate an arrow on the right side of it. It does not work because the text is defined as a symbol. I wonder whether your UX designers use Sketch or not?
Yeah, there are definitely a number of things that end up being pretty challenging. I have been using Figma pretty exclusively for work lately, but as you start to do more complex layouts the smart/auto layout becomes more difficult in both
My request might be odd but if you can help then it would be great. Is there a way if I want to add a bold text or a link text in the paragraph placeholder section without changing the whole text styling? I just want to make one text from the whole paragraph text to be bold or linked?
I'm not sure I totally understand what you're asking. Do you mean that the final width of a button, for example, would always be some multiple of 8px/4px? You can easily make the 'padding' and space between elements fall within that grid, but the final sizes often depend on the size of the content. If you're talking about height, having the lineheight of text be some multiple of 4px/8px should result in the final height be part of that same multiple... hope that makes sense!
@@joemontero741 Excuse the crackly audio, but hope this helps... www.loom.com/share/c19479e2ab5e46b886cb5b30355284bc The width won't necessarily be a multiple of 4/8px, but the padding and the height will.
Totally agree! I do that as well (it's also generally how photos are matted too!). Specifically with Smart Layout, there isn't anything that says it has to be mathematically centered. It would still work well with it visually centered.
Hmm, not exactly sure what could be causing that, but here are a couple things to check... 1. Do you have version 58 or later installed? 2. Do the alignment settings on the symbol match these screenshots? On the symbol (share.getcloudapp.com/4gu78JXA) and on the text (share.getcloudapp.com/OAuxZJl6)
