Working with the Component Links and the Used In Panel

So we’re talking about maintaining a , right? That means we already have something in our (we’re already reusing some elements a lot in our apps), and what we do when we are reusing it for our new feature?

So what I do is, if I use an frequently used element in a latest feature, and that element hasn’t been uploaded to our pattern library yet (developers are probably not aware that this is an universal element), I would first export the new feature’s artboards with the component that I want to add into our pattern library — you have to make sure that the previous artboards that contain that component are linked to the same Sketch symbol.

If you have successfully uploaded the component, you’ll see a blue box indicating the component link appears above the component instance in your artboard.

After the artboards and the component are successfully uploaded, you will see a blue box with the component link in it above the component instance you selected in your artboard. This link will direct you to the actual component artboard, and there, you will be able to see where else it’s been used in on the right side located in the Used In panel.

Select a component and you’ll see in what artboards it’s been used

That way the user (your developer) will probably recall, oh yeah, we used this navigation bar in that feature as well, I’ll just reuse that part. Or they might code it into a real component — well, that’s like the best ending I can imagine.

I used to write Zeplin note trying to communicate to the developers about reusing certain elements. But most time they don’t read the notes — Zeplin makes it so easy to read the artboards, who would read the note if it’s not super necessary?



Source link https://blog.prototypr.io/building-usable-ui-kits-in-sketch-2-how-to--a-pattern-library-17d40fa0c150?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here