Add sketch template / styleguide

[mrmrs]

Could be useful for people to have the design system in tachyons ported to a sketch template for some static designing. Could include:

• Typescale
• Colors
• Border widths
• Border radius
• Spacing?
• Text elements with proper line-height / measure

Could potentially toss some visual components together too

[joehua87]

I think tachoyns should be helpful in Sketch in combining with https://github.com/hrescak/Sketch-Flex-Layout @mrmrs How about your thinking?

[halfmage]

Hey @mrmrs, first I wanted to say that I totally love tachyons. Just found this issue and was curious about it because I worked on a sketch template / styleguide some weeks ago. Are you still want something like this? Would love to contribute to this, maybe we can add these styles/settings into a open sketch library to maintain more easily. See screens attached:

Type Scale / Text Styles

Background and shadow element styles

[smakinson]

I'd love to see some quasar related sketch assets.

[spiside]

@halfmage Are you still working on a sketch template? I would be very interested :)

[jikkujose]

@halfmage do you have a version, that can be released?

[halfmage]

@spiside @JikkuJose not done yet. Would love to release it if there ist enough interest for it ;)

[jikkujose]

Yes, please do!

[aolko]

same but for XD please?

[artingei]

@halfmage can I support you? :)

[cmnstmntmn]

@halfmage i belive this approach, not having tachyons main repo as a single source of trouth, is wrong.

hoever i saw this https://github.com/airbnb/react-sketchapp/tree/master/examples/styleguide

[halfmage]

Yes, please do!

@JikkuJose @spiside i re-started development for tachyons sketch symbols. hype-train!

same but for XD please?

@aolko not sure about this. would like to finish the sketch version first. but never say never.

can I support you?

@artingei Thanks a lot for your support! Until we don't have a first release version I would like to do it on my own. Anyways I will upload the first version around next week. After this we can think about collaboration with sketch-versioning tools.

i belive this approach, not having tachyons main repo as a single source of trouth, is wrong.

@cmnstmntmn I do not get you. From my perpective tachyons can be used as an functional addition to existing projects or can be a very good standalone solution for small projects. Maybe it is not logical to create a sketch-framework of tachyons but I think it would be a great addition to have a visual-based version of it.

[halfmage]

Added symbols for background-size modules:

There are now two new modules in the sketch file, both will create a container with a kitty dummy image and the ba-module. You can easily change the image, customize border-width and border-color or disabled them:

• background-size/cover: Creates a container in fill-mode
• background-size/contain: Creates a container in fit-mode

[cmnstmntmn]

@halfmage indeed, what i was saying is that is wrong to fork the tachyons repo to create something else. in contrast, i proposed to use it as a base/dependency for a Sketch plugin; if the tachyons repo gets updated, the plugin also gets updated.

[halfmage]

@cmnstmntmn ok got it. But actually we are not forking the tachyons repo to create something else. The sketch-symbols would need to be added/updated manually of course. We would transfer the basic approach of tachyons into sketch.

Something like: Functional sketch-symbols for humans

[spoeken]

@halfmage Really looking forward to see what you have come up with! Give a shout if you need testers.

[jcarpenter]

+1. Would love to use this @halfmage. Am working on my own at the moment and would love not to duplicate the effort 😄

[halfmage]

@jcarpenter no problem! First version is ready. A lot of font-styles are missing but for a first impression it is more then enough!

Download link https://www.dropbox.com/s/9cgf4buwlj6mgqd/tachyons-sketch-v1.0.zip

And some preview screens of the symbols

I really hope you like it. Leave feedback after you tested it 👍

[jcarpenter]

Beautiful! Thanks 🎉 Am looking through it now. I may be able to contribute a PR, if you wanted to throw this up on it's own repo? (Have never user GitHub for Sketch files, though). Here's where I'm at after some work this weekend, creating Tachyon-compliant layouts in Sketch. I focused primarily on the grid, widths, measures, and body text:

[halfmage]

@jcarpenter looks great so far! I created a new repository with the kactus tool. Would be great if you could test to create a pull-request with kactus.

• tachyons-sketch - our sketch repository
• kactus - version control tool for designers

If this works well I see no more big obstacles to create a open source, maintainable and visually appealing experience for static designing with tachyons.