Sketch plugin to use images for borders?

Question

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:

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):

Answer 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).

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

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

4. 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)

5. 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):

6. 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:

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

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

8. REPEAT for each corner and side.

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

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

Answer 2

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.