1

I was looking around for a while, but can't find a solution for this. Essentially, I want to use an image for the border of a square, to ensure it stays consistent while resizing (very similar to this css borders approach):

#borderimg { 
    -webkit-border-image: url(border.png) 30 round;
    -o-border-image: url(border.png) 30 round;
    border-image: url(border.png) 30 round;
}

My reason for this is that I have this image as a background for containers:

example

However, I have multiple containers that need to use the same style and are of different sizes. Resizing this image to fit them skews the borders, making them uneven sizes. Hence, I need to somehow make these containers responsive and the idea that came to me was to find a plugin to allow using images as borders.

Do you guys have any suggestions?

Here is example of what I mean by skewed borders when resizing container (pay attention to top and bottom borders):

skewed

1

Absolutely, there's a way to do this in Sketch. The plugin you're looking for is Anima's Auto Layout (Recently packaged as LaunchPad) https://www.animaapp.com/

If you don't want to read and do it yourself, grab the final result Sketch file HERE. You need to have the plugin installed for it to work.

The setup is weird the first time around, but it's logical and once you get the hang of it, you'll get a lifetime of coolness ahead ;) let's dive into it:

  1. Make a square rectangle (20x20 in your case) on the top left corner of your frame (position it so it doesn't overlap with where your image will be).

enter image description here

  1. copy/paste the image on top of your rectangle, group the rectangle and the image duplicate, set the rectangle as a mask.

enter image description here

  1. Remove the color/border from the rectangle, name the folder by it's "real" name (top left), and convert the group to symbol. It should now appear in the Symbols page in your Sketch file.

enter image description here

  1. REPEAT for all corners, then all sides (process is the same - you will create top, bottom, left, right symbols. Note: The symbols should also automatically remain on the initial screen (Page 1)

enter image description here

  1. On Page1, select all the symbols you created, and create a new symbol with the selection. The result should look something like this (that's in the symbols page):

enter image description here

  1. Fun starts here. Open up the Auto Layout (Launchpad) plugin (opens on the bottom right part of the sketch screen). In the "Symbols" page, in the last symbol you created (I called it "frame"), select the "top" nested symbol, like so:

enter image description here As shown on the image, "Pin" the symbol to the top, left and right. You don't need to change anything else.

  1. Select the top right corner. Make sure you "Pin" it in the plugin to the top and right corners. Don't change anything else.

enter image description here

  1. REPEAT for each corner and side.

  2. Go back to your main design screen (Page 1 by default), and try resizing your new symbol. Magic.

enter image description here

Resize to the needed size and place photos underneath the layer.

  • To optimise further this symbol, create a rectangle in your 'frame' symbol, pin it to all sides to stretch well. Then place it in the back, and fill it with an image. Set the image to "fill" the frame. Back in your design, you can override the image in your symbols, so you can have different images in your design. When you change the dimensions, the image within will try its best to fill the frame :) cheers. – Spasimir Dinev May 12 '17 at 11:11
0

I have no experience with Sketch, but you could do what we used for rounded corners before CSS3 was around; using a 3x3 image grid.

CORNER BORDER CORNER

BORDER CENTER BORDER

CORNER BORDER CORNER

It's a pretty clunky solution though. I'd not find it worth the effort. After all, it's called "sketch", instead of "the final image design" for a reason.

  • Yeh, I might end up writing plugin for this in the end I guess. – Ilya Knaup May 15 '16 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.