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

[newstart346]

Hi

[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]

@romanr What I meant is that I'm not sure what the functional value of this as a symbol is:

Everything in the Sketch file already has their color set (and layer styled!). I'm fine not having each color and shade be a layer style, since if you're deciding to change a color for something that likely means you're doing something outside what Blueprint gives out of the box and should just use the palette.

[terpimost]

Hi @aycai, thank you for the feedback. I'm sure many people use Blueprint Kit not only at Palantir. I wanted to improve the Sketch library to streamline the design process and handoff to developers. Since I'm working with the already established library, I should not change it but the only level up the comfort of using it.

The majority of color and text styles were already in place. The kit was easy to use; you can see all the elements nicely laid out on a big artboard. A designer drags and drops an element from one sketch file to another. But after several copy/paste moves, I don't need the blueprint sketch file anymore. Because I remember the order of elements, and I want to paste them from my head. Here symbols are handy.

Maybe the order of symbols on the original artboard is arbitrary, but it is not my decision, and it is like it is historically. I didn't dare to bring in a confusion an decided to order things the same way. Numbering is the only way to keep the manual order in sketch symbols.

I don't think alphabetical order helps new designers because the organic flow is to check out the original layout and review the library and after use symbols from Add menu. We have to admit that not all designers will use Add Symbol dialog in Sketch. One designer told me that he always prefers to drag items form visually arranged elements on an artboard. So there will be designers who will continue to use Blueprint Sketch Kit as it was.

This is my first attempt; I'm sure more updates will be required in the future. And I'm ready to do them (as well as future adoption to the newest Sketch). We will not satisfy everybody with the update, but please allow me to clarify my thought behind that symbolization work.

Splitting the file could help with performance, but in that case, we have to connect more than 1 file as a library in Sketch, which is a bit dirty and doesn't help with consistency. Also, there could be projects where we want to use both themes at the same time. For example, I want to place something on a dark sidebar while the main container is white. Or I have the design with a white theme and decided to switch symbols to a dark one. I didn't start the dark theme yet, but I don't think it that different from the light, so it will be copy+rename for some of them.

I wanted to do a prototype version of Blueprint, and now I understand that it should be a separate file.

Icons are tricky. As you can see, I use a small number of 16 and 20 icons within symbols, so they must be in the kit. I agree that all the other icons could be a separate library.

The colors may be better served as layer styles; They were like that before I started.

I'm not sure if the color palettes as literal UI elements need to be symbolized. I understand that you may never use it. I don't know how the decision about it should be made, but I'm ready to accept it.

Why would anybody need color palate as symbols? Because when a designer needs to choose a color, he/she can quickly add variations of Blue on the artboard and decide visually. While with layer styles rectangles should be created, colorized and moved together to pick the right color. Symbolization of color palets solves the quick color chose the issue.

I think the typography section would also work better as layer styles. They are right now. The advantage of having it also as a symbol is speed. Without Header 2 symbol, you have to add text, click inside the layer and change text, after select style. With Header 2 symbol you select paste it. Well, it is not an actual speed but cognitively easier actions.

I think when I'm putting wireframe, I don't want event touch symbol configuration and just through things on the canvas and move them.

Guys, obviously the decision is up to you, I'm just waiting for a signal from you to continue.

[aycai]

Hi @terpimost , After giving it some thought, I think overall I agree with your reasoning. Short version is:

1. Let's keep everything a symbol, as you had it.
2. For now, let's keep the order of the lists as you had them, matching the visual order of the Sketch file.

Definitely appreciate the work you've done for this! Lots of good ideas to go ahead and try out, we'll update things as we go along :)

(Much) longer version: Below are some points you brought up, as well as some of my thoughts on them:

• The symbol work should remain incremental in changes, and will take iterations (agree)
• The order of the symbols should match the visual order of the Sketch file (agree)
  • That being said, I like how you have pulled out elements from their groups in that screenshot (e.g. inputs are pulled out of the "form" group). This keeps each element type in a flat list. This might be worth revisiting the visual order of the file itself to match this down the road. I don't think the visual order of the elements should never to be updated, so long the changes make sense.
• Perf allowing, let's keep everything (including both themes AND icons) in a single file (I think this is fine for now).
  • I think that if we want to be consistent with library files, we either want everything together or everything separate. If we want everything in one file, EVERY icon should be included as well. If we have icons in a separate file, you then go back to relying on multiple files as libraries.
  • For example, what if I want an icon not in the kit as an icon for a button?
  • I don't disagree that you might want both themes in a design, but (and this is specific to a use case) if I use something like Runner and type "button", do I always have to type "light" as well so I don't get the dark theme button (which has different styling) first? Having separate files means that I can uncheck it in my libraries and not have it show up when I don't need it (and re-check it when I do).
  • I personally don't see the pain in having separate files for separate themes; the work to update both is still the same, and I'd wager most users don't frequently touch their libraries after adding them, only to update the files (this is an assumption).
  • What do you have in mind for prototyping? I don't think symbols themselves make the kit unnecessarily opinionated, but baking in prototyping actions on how they are used potentially so. That said, I'm open to ideas here!
• It looks like you're trying to make literally every variation of everything in the kit (including the palette) a symbol. Initially I felt creating a unique symbol for every variation of an element and elements solely defined by their layer/text style incredibly redundant, but after some thought I can't think of a better alternative (e.g. buttons require you to change two layer styles to switch to another button style, which feels inefficient). I do have concerns of updating the file should any non-incremental visual update occur (it would be nice for a change to a single symbol to update all of its variations), but I guess that's a bridge we'll cross when we get there.
  • On the plus side, to your point, you can add anything from symbols (I use Sketch Runner, which definitely benefits from this).
  • I'm warming up to the idea of creating symbols for text; if you want to be strict with type setting, then you shouldn't need to adjust its styling.
  • On the downside, I'm wondering how often users will detach from an inserted symbol because either the content is too rigid or they can't use any custom styling otherwise. Date pickers and dropdowns are examples of this. Maybe this is something we wait on until Sketch releases the smart content features!

[terpimost]

@aycai thank you for feedback and your thoughts. I'm going to continue with Dark theme. Do you think I should do pull request before that?

Here are some comments on your thoughts

I don't think the visual order of the elements should never to be updated,

Sure, and symbolization update has to follow the Blueprint team.

EVERY icon should be included as well.

For now, I don't have an automatic solution for that. But open to adding all icons manually later.

if I use something like Runner and type "button", do I always have to type "light" as well so I don't get the dark theme button (which has different styling) first?

Let me explore that plugin and get back to you later.

What do you have in mind for prototyping?

https://github.com/palantir/blueprint/issues/3415

it would be nice for a change to a single symbol to update all of its variations

Yes, it would be great, but there is no such tool yet. If we want that we have to create a specific plugin for sketch

Date pickers and dropdowns are examples of this. Maybe this is something we wait on until

Sketch releases the smart content features

Date pickers and dropdowns are examples of this. Maybe this is something we wait on until Sketch releases the smart content features

Yes, I'm thinking that we should wait for Sketch v56 because after it, I will have to perform significant changes to all symbols. Meanwhile, they are as they are.

[terpimost]

Just realized that version 56 is already on my Mac, let me research smart layout and decide if we need a significant update.

[franckl]

I think smart layout is still not available on v56

[aycai]

@terpimost For the icon update, I might be able to save you some work with that; I think we have a Sketch file kicking around for the 16px and 20px icons already, I can bring that in after your changes 😄

it would be nice for a change to a single symbol to update all of its variations

Initially I was thinking how well nesting symbols would help here (e.g. use a base button symbol, then use different layer styles for its variations), but I think that just adds more redundancy.

My inclination for PR timing is to do it after both themes are done since I think symbols are kind of an all or nothing affair. Defer to @adidahiya for this!

[kudigaracoder]

Sketch 58 just launched with Smart Layouts. Would it be good to incorporate Smart Layouts and baseline this version before adding/updating components?

[terpimost]

@kudigaracoder was waiting for it.

[romanr]

Any progress, maybe I can help? Perhaps with new Sketch collaboration features it can be arranged to work on same file.

[terpimost]

@romanr sorry for the delay. Now as we have new features of Slack like smart layout and components dashboard I think it is time to finish the job. I plan to finish light and dark theme in Jan 2020. @aycai could you point me to all icons in sketch for Blueprint? It will be really helpful.

About Sketch collaboration - it is not released yet, right?

[giladgray]

@terpimost icon svg files live here: https://github.com/palantir/blueprint/tree/develop/resources/icons

[kudigaracoder]

@terpimost Sketch Collaboration is not out until 2020.

[estevesd]

@terpimost @giladgray I just did a PR for icons library https://github.com/palantir/blueprint/pull/3933 and colors as symbols https://github.com/palantir/blueprint/pull/3932 I saw this thread after doing the PRs, and now realize that they are probably not optimal

[terpimost]

@estevesd that is great. I'm not sure how should I join it except manually. In symbolization process I would love to have all of those icons inside the sketch file. Because they are used inside components. Could we have a call together to discuss it? Please pick a time here https://calendly.com/vladkorobov/30min

[estevesd]

@terpimost I added the icons to your version of the kit. All the icons I could find have been updated in the Symbols Page. Now it needs to be done in the light and dark pages https://github.com/wicastr/blueprint/blob/de/stech-icons-in-kit/resources/sketch/blueprint-core-kit.sketch I also made some symbols for radio button and switch an put them in the Icons folder like you did for the checkboxes All the instances of the icons you created before have been replaced with the new ones

[estevesd]

@terpimost I did the changes in the dark page. The light one didn't need it. https://github.com/wicastr/blueprint/blob/de/sketch-icons-in-kit/resources/sketch/blueprint-core-kit.sketch

[terpimost]

Working on a dark theme, I will update elements with icons from @estevesd. I'm going to improve buttons with new flex layout from Sketch, other elements are already with a proper scaling configuration and there is no need to make them more complex.

[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 :) https://github.com/palantir/blueprint/pull/4006

[terpimost]

Sorry, this one should be with a rebase on Develop https://github.com/palantir/blueprint/pull/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.