Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sketch template / styleguide #284

Open
mrmrs opened this issue Nov 3, 2016 · 19 comments
Open

Add sketch template / styleguide #284

mrmrs opened this issue Nov 3, 2016 · 19 comments

Comments

@mrmrs
Copy link
Member

mrmrs commented Nov 3, 2016

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
Copy link

joehua87 commented Nov 8, 2016

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

@halfmage
Copy link

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

bildschirmfoto 2017-07-18 um 12 24 40

Background and shadow element styles

bildschirmfoto 2017-07-18 um 12 26 44

@smakinson
Copy link

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

@spiside
Copy link

spiside commented Sep 17, 2017

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

@jikkujose
Copy link

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

@halfmage
Copy link

halfmage commented Dec 4, 2017

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

@jikkujose
Copy link

Yes, please do!

@aolko
Copy link

aolko commented Dec 5, 2017

same but for XD please?

@artingei
Copy link

@halfmage can I support you? :)

@cmnstmntmn
Copy link

@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
Copy link

halfmage commented Jan 25, 2018

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
Copy link

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
    coverandcontain

@cmnstmntmn
Copy link

cmnstmntmn commented Jan 30, 2018

@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
Copy link

@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
Copy link

spoeken commented Feb 1, 2018

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

@jcarpenter
Copy link

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

@halfmage
Copy link

@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
bildschirmfoto 2018-02-21 um 18 07 45
bildschirmfoto 2018-02-21 um 18 07 38
bildschirmfoto 2018-02-21 um 18 09 08

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

@jcarpenter
Copy link

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:
screen shot 2018-02-21 at 12 48 29 pm

@halfmage
Copy link

@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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests