[Sketch] provide Symbols for components

[romanr]

Continuing from #2668.
Sketch file does not represent UI as symbols. Symbols in Sketch are like components in React.

Imagine if controls in Blueprint were developed as functions in one monolithic javascript file. Then in order to use a component the developer had to open a large javascript file, copy relevant code and paste into their application.

[giladgray]

@romanr yes we are aware and actively working on this.

[equinusocio]

@giladgray Please make good use of symbols. All colors should be use a master simbol which, if changed, should affect all ui components. Also, remember to use anchor points inside fluid components and sub elements.

Let me know if you need help about that.

[giladgray]

@romanr @equinusocio FYSA this is a huge amount of work and we all have full time jobs over here so it'll take some time to symbol-ize the entire library. don't think there's much opportunity for OSS contributions here unfortunately. watch this issue for updates.

@pkwi will be coordinating the work.

[romanr]

We would like to help but I don't think Sketch file is possible to be worked on by different contributors concurrently. I don't think git merges will be possible.

[vkorobov-boostlabs]

I could propose a version of symbolizing everything for your review in March. What do you think?

[adidahiya]

@pkwi is this still on our intended roadmap for the sketch file? if so, I think @vkorobov-boostlabs can go for it

[pkwi]

@vkorobov-boostlabs @adidahiya yeah, that would be great!

[vkorobov-boostlabs]

@pkwi @adidahiya I made a fork and working on it.

[equinusocio]

To work on sketch files together there are some tools like:

https://www.abstract.com/ (Free with limitations)
https://plantapp.io/ (Free with limitations)
https://kactus.io/ (free)

[vkorobov-boostlabs]

Hey guys, quick update. Working on symbols. Buttons are done including buttons with icons (left, right and both).

Structured good:

I'm doing that in the fork here https://github.com/boostlabscom/blueprint

[vkorobov-boostlabs]

Did 60% of symbolization.
Here is what's left to do:

• Forms
• Dropdown menus
• Lists & trees
• Navigation bar
• Breadcrumbs
• Dialogs & alerts
• Date picker

[terpimost]

All form elements are done.

Here is what's left to do:

• Dropdown menus
• Lists & trees
• Navigation bar
• Breadcrumbs
• Dialogs & alerts
• Date picker

@pkwi @adidahiya do you think I can do a pull request just with a light theme or dark theme has to be done too?

[pkwi]

@terpimost do a pull request when you're ready. This way, we will be able to look at it before doing the dark theme

[vkorobov-boostlabs]

Update, I'm still working on it. Just want to finish the Light theme properly and submit a pull request. Dropdown menus are almost done.

[terpimost]

Update. Light theme complete. Cleaning up and preparing a pull request.

[vkorobov-boostlabs]

@pkwi to which branch I should do a pull request? It is just sketched file updates and nothing else. You can also download a file and take a look at it here https://github.com/boostlabscom/blueprint/blob/sketch-symbols/resources/sketch/blueprint-core-kit.sketch

Everything on a Light page symbolized with resizing in mind, and:

1. Text styles for all 3 sizes
   
2. All type of inputs for all intents:
   
3. Icon symbols created (16 and 20) for an easy switch of icons in symbols:
   
4. All types of buttons, resizable and text changeable with all stages and intents:
   
5. 2 intents of icons buttons for all sizes:
   
6. Segmented buttons and tabs components created so it is easy to construct any tab bars:
   
7. All types of tags for 2 sizes:
   
8. Dropdown elements and components:
   
9. The naming of symbols utilize number for the proper organization:
   

[vkorobov-boostlabs]

@adidahiya @pkwi I could jump on a call to discuss that if you want. I do understand that is not ideal now and more work needs to be done. I would love to hear any feedback from you guys about it. Ready to improve it before doing a pull request.

[pkwi]

hey @vkorobov-boostlabs Thanks again for all your hard work it is much appreciated. We have started using this file internally and will get back to you once we have more feedback.

[vkorobov-boostlabs]

There are some bugs I should fix but probably more huge rework is coming because of that https://blog.sketchapp.com/sketch-for-teams-smart-layout-and-more-announcements-from-layers-eed45e3fa0fd

Anyway, tell if you want me to continue with Dark theme or I should make any changes in the structure.

[terpimost]

Hey guys, I'm going to work on a dark theme. Let me know about bugs and things you don't like now.

[aycai]

Hi @terpimost,

Thanks so much for your work so far! Lots of good stuff here. I have a few notes that include some from other designers on the team that I'd be keen to get your thoughts on so far:

• The colors may be better served as layer styles; I'm not sure if the color palettes as literal UI elements need to be symbolized. The colors themselves are available in the Sketch palette, and many of the colors are baked into components that use them.
• I think the typography section would also work better as layer styles.
• The numbering of labels seem arbitrary, and seem to follow the order of the Sketch file (which is also somewhat arbitrary). I'd opt to remove these numbers in favor of better structured labels; this also makes the list alphabetical which may be easier for newer users not familiar with the file.
• Splitting the file into separate parts is starting to make more sense to me, namely with the Light Theme and Dark Theme. This helps cut down on naming verbosity and allows the user to draw that distinction sooner.
• Splitting icons into their own file for symbol/library use also makes sense to me.

At first I was unsure about creating symbols for indeterminately sized components like dropdown lists and tables, but I can see designers using plugins like Runner to quickly drop the base version into their file, then detach the symbol to customize the content. This might become more magical with the upcoming Smart Layout features!

[romanr]

@aycai Do you mean using layer styles as fill colors? This is controversial, more like a hack. This method is used in Google’s Sketch Material generator plugin and is nightmare to work with. You can achieve the same by saving and updating styles themselves in Sketch library.
Let’s not ruin it with this just when we finally have this perfect reusable library at last!

[aycai]

This is all amazing progress, thank you @terpimost and @estevesd for your hard work so far!

One thing I do want to be mindful of is scope creep. Adding in icons and layer/text styles are valuable in tightening up the symbols, but the diff in the sketch file is getting quite large and it's hard to spread these changes out in Github.

It sounds like you are both working on a single Sketch file with all of these changes already so this might be a moot point. So far I've heard:

• Adding color layer styles
• Adding icon symbols
• Symbols for Dark and Light theme

I think it's possible to review these all at once, but I'll want to hold on additional changes until after this is done as this will be a lot to go through and review.

[terpimost]

Sorry, guys, it's taking so long. But I have to recreate all buttons with a smart layout. A simple button in both themes is done. After I go through all button-based symbols it will be almost done.

Form elements and everything before them is already in both themes.
You can always take a look at the latest version here https://github.com/terpimost/blueprint/tree/sketch-symbols/resources/sketch

[terpimost]

Hey guys. Here is some update.

Bug with a corner in Sketch 63

While working on flexible layout buttons I noticed a weird bug: when the top right corner of a button is strangely bent.

When exporting it is SVG path and not SVG rect. You can see that bug only when Shadow applied to a button. I asked Sketch and it turns out it is a bug of Sketch 63. They told me they will fix it in the next version.

Current progress

1. I've finished the Light theme button updates. Now they support elastic layout. Except for segmented buttons where equal width is usually important.

2. Elastic buttons are flexible, content-driven but it is possible to set up a fixed width too.
   

3. Thanks to @estevesd it's easy to replace an icon of a button.

4. I have to update buttons in the dark theme and create symbols for other elements in the dark theme. Form elements and tables are finished in the dark theme.

Sorry for such a terrible delay. I'm focused to do a push and prepare to pull request in the next 2 weeks.

[kudigaracoder]

Thanks for the update @terpimost. I'm on the Sketch Beta 64 and the issue still persists! I've been using your file to test drive certain parts of a design, I noticed that text and icons were rotated 180˚. Could you let me know the reason behind that?

[terpimost]

@kudigaracoder rotation was the old hack, it is not the case anymore. I removed it.
I've message about the bug 2 days ago, I hope they will fix it eventually. If not we will have to update all button backgrounds to the actual rect. I was thinking to write a plugin for Sketch to help with that process.

[terpimost]

You can watch for progress here https://github.com/terpimost/blueprint/commits/sketch-symbols/resources/sketch/blueprint-core-kit.sketch

[terpimost]

Updated tags and badges. Remorted another Sketch bug when label shifted 1 pixel up or down in the label (I manually moved labels if I saw such behavior)

Next: dark theme Callouts, Tooltips & popovers
After: the rest is easier because no flex symbols support needed

[terpimost]

Complete symbolization process for both themes. Not everything ideal. There are bugs on Sketch side. The whole lib could be minimized and a bit slow. But it is definitely better Sketch file than it was :) #4006

[terpimost]

Sorry, this one should be with a rebase on Develop #4007
@aycai @adidahiya please let me know about your review. If you want to jump on a call (Washington D.C. time) and discuss it let me know.

[kudigaracoder]

I've been testing the file on the latest Sketch beta. It looks like the inner shadow that was getting bent has been fixed and the overall responsiveness has also improved ..a lot!

[terpimost]

@kudigaracoder sorry to disappoint you but the issue was on the outer shadow in the dark theme and it is not fixed by the Sketch team yet

[estevesd]

I added new icons (diagnosis and lab-test) to @terpimost kit. https://github.com/estevesd/blueprint/blob/develop/resources/sketch/blueprint-core-kit.sketch

[romanr]

(OP here) This is an amazing work @terpimost ! 1.5 years later it was worth it!
I think it's ready for release or be published on Blueprintjs site. Of course you can improve it endlessly but it's very much usable as it is just fine.

With one issue I must add: Sketch file uses SF family of fonts. This is not right:

• While SF font is used for iOS app prototyping, but for web it's useless because it's not officially available as a web font. So you can imagine anyone using blueprint Sketch kit will have to spend a lot of time updating all the styles with web font.
• Blueprintjs site itself uses Segoe UI, Roboto, Oxygen. font family. So you can't closely reproduce examples from Blueprintjs unless you change all the font styles.

[terpimost]

@romanr hey, it was closer to 1 year. I said I could finish in March and I did 😂
About the font problem. I've never changed anything in the original file unless it was utility. Keep in mind that my project was to symbolize everything to improve design productivity. SF font was part of the Sketch file before I started, so I didn't dare to change it in any way.

On the official page Blueprint suggests using SF font:

So I don't think it is up to me to make that change. I guess somebody from Palantir is supposed to make that note there. SF font is not only or iOS but for Mac OS too. I think it is logical that Sketch (Mac app) would use SF font.
Blueprintjs site itself uses this css line:
Font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;
-apple-system is SF font

@romanr @aycai @pkwi please let me know if I should change anything before you can accept the pull request #4007

[romanr]

On the official page Blueprint suggests using SF font:

And why is that recommendation there? Because too many people don't have it due to apple-specific nature of SF font. They open the Sketch file and have font warnings.
That's exactly my point. Use normal public fonts like Roboto in Sketch file so you don't have direct all users to download the font from Apple's walled garden.
I think SF font there looks more like a bug rather than a feature.

[terpimost]

@romanr I agree that there should be a single most common font, but if Blueprint is relying on a system font, I don't see what choice do we have except list all system fonts for all OS versions on the official page.
I think OSX has SF as a system font longer than Sketch has flexible layout feature (a major feature in my PR).

I guess the majority of users already have SF font which comes with El Capitan version of OSX.

According to https://gs.statcounter.com/macos-version-market-share/desktop/worldwide OSX versions without SF font (OSX 10.10 and others) have less than 7% marketshare.

Downloading and Installing SF font from Apple's website it is easier than downloading and installing Roboto Font from Google Fonts now.
Here https://developer.apple.com/fonts/ we have a direct link to .dmg installation: https://developer.apple.com/design/downloads/SF-Font-Pro.dmg (no registration is required):

@romanr unless we have ability to define fonts like in CSS for Sketch I believe its expectable to use SF "". If we have Blueprint for Figma I believe we should go with Roboto (Figma uses this as default on Mac).

As a designer I would prefer to use SF font on Mac. Unless you at Blueprint team decide to use Roboto as a default cross platform choice for designers.

[adidahiya]

I agree with @terpimost here, since Sketch is a Mac app and SF font is the platform default there, we are going to stick with that for the Sketch kit. It's pretty easy to install from the link in the documentation.

That doesn't mean that we endorse the SF font for Blueprint as a web toolkit... and the CSS is proof of that (it supports multiple platforms' default fonts). But if you are on a Mac, you will see the SF font used in Blueprint components by default, so the Sketch kit should reflect that.

[terpimost]

Quick update from Sketch.
I remind you that the bug with weirdly rounded corner happens because of Sketch.
In the old blueprint sketch file and in new #4007 Rectangles are the same but new version of Sketch thinks that they are paths.
It is not fixed in Sketch v64 but Sketch devs knows about the issue and we might get the fix in the next Sketch version.

The solution for now is to redraw every Rectangle where we see the issue. But there are 2000 of these in all symbols I've made. If we have to do this I should create a Sketch plugin for that.

[terpimost]

Hey guys (@adidahiya @romanr @aycai @pkwi), Is there anything I should do to make the pull request be review and accepted?

[aycai]

@terpimost I'm looking through the sketch kit now, I'm happy to approve these updates to unblock usage while keeping tabs on small tweaks in the symbols:

• [Light] Large input labels and text is not stuck to the left, and will not resize correctly.
• [Light] large removable tags do not resize on text change.

These are what I've found from my first skim. Otherwise thank you for creating such a massive update to the kit!

[romanr]

I vote to release it. This is a great work and long overdue to release.
There will always be resizing inconsistencies, and can be fixed in updates.

[aycai]

@romanr already approved #4007 :)

[adidahiya]

Closing this as fixed by #4007, thanks for all the input. Feel free to open new issues for iterative improvements.

[romanr]

Website links to the 2018 version of Sketch files. When is it going on website?

[terpimost]

@adidahiya @aycai thank you for approving the PR. I will create another issue for future updates (bugs that you've found) and post my thoughts about what could be improved.
I hope soon to use Blueprint js components and be deeper in my understanding of a library.

@estevesd thank you so much for the icon work. I wonder how did you make it? Please email me terpimost@gmail.com

@romanr my understanding is that PR is merged into develop branch before releasing to the website I suggest checking with people you know that they can open Sketch file and its fine to work with.

The biggest annoying thing now is a bug in Sketch which treats current rectangles in Blueprint (everywhere in symbols) as paths. So every shadow is rendered with a weird top right corner. I'm thinking about creating a Sketch plugin to help with that issue because manually replacing current rectangles which are paths with true rectangles is a bit scary.

[adidahiya]

@romanr the website gets updated manually with each release of @blueprintjs/docs-app... until then, please use the link to the file in the Github UI