The anatomy of a button using Sketch and nested symbols (medium.com)
1 year ago from Alberto Orsini, Chief Product Officer at RefineAI
1 year ago from Alberto Orsini, Chief Product Officer at RefineAI
Great tutorial, Alberto! Love this technique :)
Thank you Jon, and thanks for the kind words on Medium ;)
Nice tutorial.
But it shows that's it way to complicated to create states. The old friend Fireworks had the ability to define symbols as buttons with four states if I remember correctly, You were even able to try it out.
Now, you have to like export it to Principle or Invision to only test a hover change.
I think the software has a long way to go, but being that it is the tool we're using for now I believe it to be a good workaround. There is a lot of setup time, but as mentioned if the time is spent at the beginning it can be saved down the line.
I never really used Fireworks, but that sounds like the perfect solution to buttons, so maybe Bohemian Coding needs to implement something like that!
I didn’t mean to criticize the tutorial. I just mean that testing such a simple thing as a button is more complicated than it has to be.
Fireworks was really a great piece of software tailored for web design. It had pretty much everything Sketch has; advanced symbols, artboards, great export options, and some really nice JavaScript based plugins and prototyping capabilities out of the box. It was the first software that used the dynamic Ribbon toolbar feature that MS Word implemented years later which saved precious space. The files were PNGs so everyone could view them without any type of extra software.
But Adobe stopped develop it and Sketch came along and stole that market. Now they try to rebuilt Fireworks with XD.
Yeah no, I didn't think you did hehe. I wonder if they brought that functiobality to XD, I should give it a shot.
Your article is a direct copy of this article that was released before yours.
https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c#.9tipn857m
Hi Ryan, I wonder how we got to the same conclusion. Maybe it is the fact that we use the same tool. Or that we belong to the same profession. Or maybe it is that we get the same updates from Sketch. Odd. In any case, thanks for taking the time to read through mine, which I wrote, and looking at theirs, which they wrote, and coming back to leave this comment. I'll try to be concious of that when writing future articles with the only intention to share knowledge and techniques with fellow designers.
I think he meant "direct copy" the same way kids use "literally" these days.
Which means that it's not a direct copy - it just bears some similarities.
In which case he's literally right, but figuratively wrong.
How's that for word play?
Hey, I'm the author of this referenced article. Alberto and I have talked and think it's just an awesome coincidence! I'm thrilled to see that designers are thinking the same way about these design techniques, so there are no hard feelings or assumptions of copying!
Alberto wrote a great, concise, and straightforward article documenting his process. Don't hate on him :) It's all good!
Hi Alberto, thanks for taking the time to write this. I've been looking for a tutorial like this for months and your simple explanation has been a massive help!
Hey Chris, no problem. It is a big pain indeed so while the setup time might be daunting, it saves A LOT of time when you nest it further into other symbols and still have the buttons as part of your overrides.
Helpful, thanks a lot!
No problem Pavel!
This is great, thanks!
Designer News
Be nice. Or else.
Designer News is a large, global community of people working or interested in design and technology.
We're Tiny Boards along with We Work Remotely, Unicorn Hunt, Fresh Gigs, Future Jobs and more.
Get in touch.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment. Remember: Be nice or else.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now