search

mathieudutour / git-sketch-plugin

:gem::octocat: A Git client generating pretty diffs built right into Sketch.
https://mathieudutour.github.io/git-sketch-plugin
MIT License
2.45k stars 127 forks source link

[RFC] workflow #47

Closed mathieudutour closed 6 years ago

mathieudutour commented 8 years ago

I'm preparing a talk about emergent design process and in the startup I'm working there is only one designer so I'd love to have more point of views.

I have some crazy ideas as well:

What do you think of it? Do you have any other?

@Lesterng @edsonespindola @zeroxme @PatrickDattilio @Davst @aryaman765 @buughost @rnicholus @loklaan @every_body_else

methodik commented 7 years ago
  1. I'm the only full-time designer. We sometimes have friends (contractors) come and help. I also have an assistant who helps me with a lot of the time consuming work (finding image options, organising usability tests, etc.)
  2. There's a variety of projects I do here, there isn't a general workflow
  3. I don't currently, but I would consider it later down the line
  4. The pretty diffs in Bitbucket aren't categorised by what page they are in. So if I have 14 pages in my Sketch document, it becomes hard for developers to find the artboard because it's not organised well enough and there's a lot of graphics.

Prototype: it would have to be extremely good for me to move away from Flinto.

From where I'm sitting, this plugin would provide most the most value to me by focussing on communicating my designs with developers.

scrumit commented 7 years ago

I'm a solution architect on contract to a design company so these are my opinions. I was tasked with:

"Supply a development workflow for visual assets from change request through to use by developers."

To that end someone suggested I look at this plugin (I've discounted the other git plugin). Before I respond to your questions I had better point out that I've had problem with using it (all to do with access and security) and I suspect that with artboards with lots of enclosed artboards the designs here might overwhelm this approach.

But here goes:

How many designers are working together in your company?

There are at least seven creatives but only one is a full time sketch user.

What is your general workflow?

With most design material the company has internal developers that take assets and put them into mobile apps or embedded devices. Most assets are supplied as PNGs.

With the project I am working on we have external developers and they were going to be supplied with PNG files for the various elements. However we asked the developers about using Sketch because they were Mac users developing an iOS app. They were prepared to try it and decided it allowed them to select the elements they needed. So we extract artboards for single screens and group them into functional areas and save them as smaller sketch files that we make available to the developers. For managers we export these functional artboards to PDF and we overlay with pretty (horrible) linking arrows with the _"User Flow"__ plugin.

Our user experience feedback team (another external organisation) use Proto and they also just take the sketch files.

Would you use something like git-sketch-plugin for personal project or do you only see value when working in team?

Not a chance. I'm a developer and wouldn't know a user interface if it slapped me in the face.

Seriously the designers here are tool averse, and they are used to creating multiple versions of sketch files. At least the file names have the date on them when they first created them. Their biggest problem is more to do with filing systems, so really it's a document management system they need.

What are the pain points in your process?

Developers may take the parts that they want. Then the screen on the device doesn't look exactly the same. There are mismatches on the ability to show gradients, fills.

Because sketch is static animations have to be created in other tools.

Opaque file system

I think the problem is the opaque file format of Sketch. Now if the contents could be cracked and a service catalogue created then this could be used in large scale or enterprise systems. Each element would need to have allocated (and keep) a unique, user supplied, reference number for the service catalogue.

Davst commented 7 years ago

Sorry for the late-ish reply but.

How many designers are working together in your company?

What is your general workflow? Our general workflow with sketch at the moment (which i find very lacking) is: Keep a master file, this file gets updated by one person, everyone else marks this file as locked. This is updated daily or after need, this way people can pull assets from ONE source without chaos.

We run a working folder where people have their "branches" and a merge folder where they place a cleaned asset that they wish for the master to merge to the main file after review.

So far this has been the workflow we've stuck with. Have tried craft (miserable UI that makes everything confusing) and a few other collaboration tools (brand.ai being the latest that sparked interest but given their terrible pricing for multiple projects they were quickly tossed out in fear of it being decent). All of them are lacking in the sense that there is a wild west feeling to it where it provides more insecurity than security.

Example: John updates a symbol since he uses it in one way, Anne uses it in a different way and this for her breaks the designs shes made, if she updates that symbol it'll wreck her designs. There being no review/approval process, this is hard to discover before the damage is done.

The best solution for us would definitely be if Symbols was a shared database instead of a local page in the document, as well as there being an approval process/review process for merges.

Would you use something like git-sketch-plugin for personal project or do you only see value when working in team?

What are the pain points in your process?

I went over this a bit already, but the pain points are

mathieudutour commented 7 years ago

@scrumit Thanks for your feedback. That's very valuable. I do agree that some designers are "tool averse" but I really believe that in the next few years, the designer workflow will radically change in the same way that coder became "software engineer" some years ago and soon we will have "design engineers". Let's try to facilitate this transition with nice tools :) Your last argument is right on point. The opaque file system is what we really need to change (I wrote a bit more about it there: https://blog.enki.com/yes-designers-can-use-git-too-79f3cef9c899#.jk48qs6tg). I started an exploration here https://github.com/mathieudutour/git-sketch-plugin/pull/74. I'd love your feedback (and even your collaboration if that's something which interest you) :) (In the meantime, you might want to check https://abstractapp.com/.

@Davst Thanks! I totally agree that the main issue is team collaboration. This plugin can already help you with "Approval / review process" and "Reviewing updated assets before updating them in the document (side by side compare or such)" if you use pull requests on github. Or did I misunderstood? I'm working on a way to enable a team to work on the same file at the same time and being able to merge the changes. For example if you change the text to be red and I change the same text to have a size of 20px, then when we merge (automatically) the text will be red and have a size of 20px! That's still very WIP but I'm getting there (https://github.com/mathieudutour/git-sketch-plugin/pull/74).

Davst commented 7 years ago

@mathieudutour Ok, haven't looked at it in a while. I think what broke it for me before was the lack of "natural integration" with the sketch product. When i tried it last it was more of a script with short commands than something that integrated with the main product in feel.

I'm still a firm believer that the solution that figures out how to hijack the symbols library will win. With this you could have symbols that synced and were a common library, but also access then via the built in symbols interface, alot of solutions replace or dont work side by side with the preexisting symbols of sketch.

mathieudutour commented 7 years ago

Exactely, if you figure that out, then you can even create a registry of open source symbols! I think I have a solution but it's a bit too early to show anything yet

scrumit commented 7 years ago

Ah, SVG as JSON.

Finally.

Sense.

The JSON record for each SVG element can be a superset with extra tags.

It would be good to have date tags in that JSON stream. I spend ages wandering around a huge space 1, click, 2 trying to find the screen that the designer last touched.

I want to be able to find the symbols that an image is using. And copy the set.

I want to be able to search with perhaps multiple attributes. Like content of a text string, name of any entity.

Plenty of converters lying around. Although, bearing in mind that the progression of vector graphics from Postscript to SVG to JSON might have been less tortuous if the XML step (SVG) had never happened. Then we wouldn't have to deal with multiple steps like this.

Yes, I'll help where I can. It's my remit. Although I draw the line at writing Javascript...

Perhaps we need a roadmap?

mathieudutour commented 7 years ago

Actually I'm not generating the JSON from the SVG, I'm generating directly from sketch so I have all the informations.

Although I draw the line at writing Javascript...

Unfortunately sketch plugins are based on javascript

scrumit commented 7 years ago

Sorry for late reply.

Meanwhile I've found an article about creating plugins interfacing directly to cocoa.

I've also discovered the command line sketchtool and that can extract a lot of information from a sketch file. I'm beginning to find tools that use that. Admittedly this one is a node app.

mathieudutour commented 6 years ago

closing this. Thanks all for the feedback, it helped create kactus