Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Leina Zouitene
Leina Zouitene
412 Points

sizes in Sketch

Hello everyone,

I have trouble understanding the size in pixels that appear in Sketch. When I create a shape I can see its size in the inspector but them when I send this size to the developer, it is way too big. I've tried to divide the size by two, thinking it might be problem with the Retina display stuff, but it does not work.

Could you please explain to me what is the problem ?

Thanks,

7 Answers

Mike Baxter
Mike Baxter
4,442 Points

Sketch doesn't do anything weird with the sizes, so it's likely just a misunderstanding or miscommunication going on.

Make sure your Sketch artboards are targeted to what your developing. Also make sure you zoom out to the proper scale when designing. A lot of times something will look good zoomed in, and then when you finally see it exported it's way too big (or too small) in the context. Also, keep in mind that when you're designing for Retina (like in the iOS artboards), you're going to need to halve your font size in the actual code.

If it's an iOS app, then use the iPhone and/or iPad artboards. Sketch 3 has those ones set for Retina, so the artboard for iPhone is 640 pixels wide—but the development environment (Xcode) wants to see all iPhone stuff as 320px wide, and wants you to provide images 1x and 2x. The image at 1x (for older iDevices) is name whatever the image name is. For the Retina image, make sure to include the "@2x". For example, 1x is "my-image.png" and 2x is "my-image@2x.png".

If it's for web, just use the responsive web design template. (You can find it under the File menu.)

I hope that helps!

Jacob Miller
Jacob Miller
12,466 Points

Does it tell you what units it's using? (px, pt, in, etc.)

Leina Zouitene
Leina Zouitene
412 Points

Hello, The unit written is pixels

Leina Zouitene
Leina Zouitene
412 Points

Hello, The unit written is pixels

Jacob Miller
Jacob Miller
12,466 Points

Hmm. I'm not really sure then because I don't use Sketch. If you look at the properties of your image after you export, what is the size compared to what it was in Sketch? Is it the same, or double, or some other size?

Leina Zouitene
Leina Zouitene
412 Points

Thank you very much Mike ! Such a complete answer !

Travis McCormick
Travis McCormick
2,313 Points

I am having so much trouble with this. I am using the template in Sketch which includes art boards for the following:

  1. 180 - iPhone 6 Plus
  2. 152 - iPad
  3. 120 - iPhone
  4. 80 - Spotlight
  5. 76 - iPad (@1x)
  6. 58 - Settings
  7. 180 - iPhone 6 Plus

There has got to be a better/easier way to do this, but here's what I've done: I created 1 app icon and created a Symbol out of it. I then clicked the art board for each icon size and resized the app icon. Each time I resize the symbol it changes the symbol across all art boards. I'm assuming my problem is that im resizing it in pixels instead of points, however Sketch does not have an option to change the points value (at least nothing I'm aware of)

Pasan Premaratne explained this really well but im stuck on the export part, not importing into sketch. Any help is extremely appreciated. I can't believe that im this far into the course and this is what im stuck on.

Thank you.