Page MenuHomePhabricator

Make build process with automatic SVG creation out of resources
Closed, ResolvedPublic

Description

Establish a build process with automatic SVG creation out of Sketch files – like M101 – in resources folder.

Event Timeline

Volker_E created this task.Apr 18 2017, 8:15 AM

The grunt-sketch npm module caught my eye once, is that what you have in mind with this task?

Is this to be run locally by people contributing to the style guide? Not by some CI, right?

@Jdrewniak Yes, that's exactly what I'm targeting at.
@Prtksxna Yes, only locally as you need to have SketchTool installed.

For the current state of our resources setup we have to work with limitations in opening the process. As mentioned above, SketchTool needs to be installed as does Sketch – and both are Mac OS X only applications.
The export capabilities are pretty impressive, fast and straightforward.

Here's the example config I've tested with, which will be further extended in the upcoming patch.

sketch_export: {
	color_palette: {
		options: {
			type: 'artboards',
			items: [
				'Artboard M82'
			],
			scales: [
				1.0,
				2.0
			],
			formats: [
				'png',
				'jpg'
			],
			saveForWeb: true
		},
		src: 'resources/WikimediaUI.sketch',
		dest: 'img/assets'
	}
},

@Pginer-WMF gave me the impression that we don't want any build tools so that setting up the repo for a contributor is super simple. Is this an exception for a very limited use case, or did I have the wrong impression?

@Pginer-WMF gave me the impression that we don't want any build tools so that setting up the repo for a contributor is super simple. Is this an exception for a very limited use case, or did I have the wrong impression?

I think that keeping the steps to contribute as minimal as possible is important. I was arguing for avoiding mandatory build steps that increase the number of steps the user should take instead of reducing them. For example, I was more in favour of Less styles to be compiled on the fly on the browser (despite the performance tax) rather than requiring an extra compilation step, although I understand developers considering these priorities in a different order.

However, I also think that having a "single source of truth" actually reduces the needed steps since it avoids having to update content in multiple places. So for the case of mockups, extracting them automatically from their source document actually saves us from keeping those in sync between a design doc and the documentation. It helps to keep the content updated automatically, and it does not prevent images to be added by anyone else as individual contributions (such as those in the principles section) without dealing with Sketch or related build steps.

Volker_E triaged this task as Normal priority.
Volker_E added a project: Patch-For-Review.
Volker_E added a subscriber: Jan_Dittrich.
Jan_Dittrich added a comment.EditedMay 20 2017, 7:40 AM

This would be useful for everybody who does not use Sketch, which as a closed-source Mac only tool (e.g. WMDE does not use it currently – I "rebuild" non-perfect versions of it in the tool I use, currently)

@Volker_E What else is left in this task?

@Prtksxna With https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/38 in we've got the main components exported as SVGs.
Next step will be a follow-up PR with SVG optimization.

And then there's open questions, if we

  • want to fine-tune the SVG export even more (fine-grained to not whole component, but f.e. radio buttons as states etc.) and
  • also instead some kind of copy step for those resources to be duplicated in "resources" folder?

Any other things missing, @Jan_Dittrich?

All of these are follow-up tasks though.

Sounds fine to me so far.

For the states of radio buttons etc. I would assume that I just would need a file in which these small components are in all their states and then I would copy them over to where I need them. In the components itself, a single state is fine.

@Jan_Dittrich It has actually been the other way round up to this point. Components have all the states included, because they will be used as descriptive images in the guide and there has not been an overview SVG. While I'm a bit concerned about the overview SVG with all components/states as the resulting big file might feature weaknesses of SVG, it's useful for the points given by you and as open format backup option.
The following pull request provides those overview files as well:
https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/39

(SVG comes down to 745kb on disc.)

That seems good.

Components have all the states included, because they will be used as descriptive images in the guide and there has not been an overview SVG.

Good as well.

To share my usual workflow: I usually find a component, either as svg or very often just as screenshot. This is naturally only one state. To show other states I either copy in other screenshots from other states or, particularly for checkboxes etc., I copy over the states from some general collection (or as an additional screenshot)

Volker_E closed this task as Resolved.Jun 7 2017, 10:32 AM

With PR 39 merged, this is resolved from my POV.