menu

Sketch

The Sketch community on Spectrum. Sketch is the ultimate tool for designing user interfaces, websites, and icons.

Channels
Team
Posts
Chat
Members
Info
Show previous messages

May 2, 2019 at 4:45pm

Hello guys, I am trying to understand how symbols work... I am trying to apply different colour for my symbol BUT I cannot merge/ flatten these two shapes in one. Do you know how to success?

Hi Lisa, you should "Convert to outlines" both layers. To do that you can press CMD+Shift+O or Layer/Convert to outlines. After that, select both layers and choose hot to merge them (Union, subtract, ...) Right click on the new shape to convert it into a mask layer. Insert the symbol color:

Now, if you add the icon symbol into your dartboard, you should be able to change color easily.

like-fill
1
  • reply
  • like

May 3, 2019 at 3:28am

I've spent more time than I'd like to admit trying to figure out how to migrate local symbols (including text and layer styles) to a library and am having zero luck. I've had issues with all the plugins I've found (from missing overrides, to every single symbol missing, to sketch crashing). The times that they have gotten close, I realized that I still I have text and layer styles to deal with… The fact that there is no native/official migration path for this seems crazy

like-fill
1
  • reply
  • like

May 3, 2019 at 1:13pm

Hello guys, I am trying to understand how symbols work... I am trying to apply different colour for my symbol BUT I cannot merge/ flatten these two shapes in one. Do you know how to success?

Before Sketch 52 that was the way I produced all of my "color" overrides. Since then though, there is a much easier way to achieve this, Style overrides. Check out this great article on the technique: https://medium.com/ux-power-tools/the-sketch-update-weve-all-been-waiting-for-plus-a-brand-new-ux-power-tools-72c405fd490d

like-fill
1
  • reply
  • like
2:23pm

I know red not really a good color for main/positive action, if it's a landing page, totally okay, but i'm doing the dashboard/editor of a product, scratching my head right now, haha

Your question actually deals with several concepts that have equal value and must be considered:

  1. Brand Equity
  2. Common UX Patterns (Axioms)

Brand Equity: I avoid "spending" brand equity on basic elements. The overspend of the color on the page devalues the uniqueness of the thing. Consider the following scenarios:

Say you have $20 of brand equity to spend on a page. You place a logo and word-mark in the Header or navbar. And a smaller one in the footer. Then you scatter 3 images across the page that show brand colors or logos.

20 / 5 = 4 Each "item" now has $4 of value. Not bad, but not great either.

If you then burn the color by adding it to every primary action, underline on tabs, active/selected states on Switches, Radio Buttons, Checkboxes. Link colors or highlights. If those total 20 elements across the page, a conservative estimate for a SaaS application. Here is the result:

20 / 20 = 1 Each "item" now has $1 of value. Almost worthless. You can start to see what happens. Nothing is unique, you've diluted your brand.

But if you reserve brand color for the "Brand" elements, which are only the Logos, you get: 20 / 2 = 10 Each "item" now has $10 of value. Much more valuable. Each item should grab attention now.

Or simpler put, f you see the color 20x on a page, on buttons, highlights, backgrounds, text, your eye tends to skip right past it. It becomes common and thusly ignored.

Common UX Patterns (Axioms) The problem with Red as a common interface color is that is a common UX axiom which is "assigned" to a negative response pattern. Across the inter-webs, it most often shows a destructive action or error.

One of the Greats in the UX community, Jakob Nielsen, identified this pattern now commonly referred to as Jakobs law: "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

The key takeaway is that "You can simplify the learning process for users by providing familiar design patterns."

There is however an easy way around this challenge, re-assign the color value of "error" or "delete" to a slightly different shade of red that doesn't detract from the Brand "Primary" red. A pinker red perhaps.

But if I were directing the design, I would avoid the use of Brand colors for Primary actions.

  • reply
  • like

Hey ya'll, I posted about this but I figured maybe I should just as here too. I must have done something weird or clicked a setting because my symbols being sent to the page i'm on and not the symbols page? Can someone advise how I can fix this?

Likely you deselected '[ ] Send Symbol to "Symbols" page' in the dialog.

Here is how to fix it:

1. If you do’t have a "Symbols" page, add a new page and name it "Symbols”. Make sure to use the proper case on the “S”.
2. Right click on the “Artboard” of the symbol that you want to move.
3. Select ’Send to "Symbols" page’ from the popup menu.

Viola, your symbol is on the correct page!

  • reply
  • like

May 6, 2019 at 5:13am

But if I were directing the design, I would avoid the use of Brand colors for Primary actions. great advice! I totally agreed with you that overpopulate UI elements with brand color will cause confusion, also most people will think twice before clicking on that red button – which was meant to be a "positive action". Thanks for your advice, this is some quality content right here!

Edited
  • reply
  • like

May 14, 2019 at 7:25am

Hi there, which tool are you creating SVG animations?

  • reply
  • like

all depends what sort of animations you are creating. The following are tools I like with monthly licenses subscriptions:

Framer Haiku Animator

  • reply
  • like

May 15, 2019 at 11:34am

Hey guys, whats the best (free) UI Kit/ Design System for Material Design?

  • reply
  • like

May 29, 2019 at 11:51am

Hey guys, whats the best (free) UI Kit/ Design System for Material Design?

hey chris, there is a plugin from google called Material i think, search for it in sketch plugins, its really awesome ;)

https://material.io/tools/theme-editor/

Edited
  • reply
  • like

June 1, 2019 at 2:44pm

Hi everyone, does a dark mode plugin for sketch 43.1 exist?

  • reply
  • like

Hi again was wondering if anyone knows where I can get free icons as well?

  • reply
  • like

June 24, 2019 at 3:32am

June 24, 2019 at 7:02pm

Super excited about the potential of Sketch in the cloud!

  • reply
  • like

June 25, 2019 at 7:09am

so thrilled about Smart Layout feature announcement...finally a native solution for actually making fully responsive component.

like-fill
1
  • reply
  • like

July 2, 2019 at 11:31pm

I'm super excited about smart layout but can we first have "dumb" text styles? If I could at least handle styles in a dumb way, then smarts could come later...

like-fill
5
  • reply
  • like

August 8, 2019 at 8:14am

Hey guys who are using just Sketch without Abstract, how are you? It's so laggy last time in fact from v56 it's just painful process.

  • reply
  • like

August 15, 2019 at 6:20pm

Laggy with or without Abstract?

  • reply
  • like

August 21, 2019 at 7:05am

as I mentioned, without. But with latest version things are going much better.

  • reply
  • like

August 31, 2019 at 1:57am

Hi guys!! I recently published a site of free resources for sketch that updated daily, here is the link https://freebiesketch.com/

  • reply
  • like

September 2, 2019 at 3:56pm

Wonder when we can expect being able to change symbols of different sizes in to smart layout symbols as overrides

  • reply
  • like

September 11, 2019 at 8:41am

hi, we have decided to use Material-iu, and style components in our design. But, are there any sketch-file or any resource close to what we see at https://material-ui.com/components/box/ so we can start building in Sketch?

  • reply
  • like