• Stars
    star
    167
  • Rank 226,635 (Top 5 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A plugin to place external bitmap files into Sketch and update Sketch layers after external bitmaps are updated

Place Linked Bitmap

A Plugin for Sketch 52+

What is this?

This plugin allows you to take a bitmap file (JPG, PNG, PSD, etc) and place it inside Sketch. ā€œBut Sketch can already do thatā€ you might be thinking. It can, but what the plugin adds is the ability to easily update the placed bitmap after itā€™s been placed, without having to re-place it.

Place a PSD file on an artboard, handle your business in Sketch, then maybe switch to Photoshop to tweak the PSD, then return to Sketch, run the ā€œUpdate All Bitmapsā€¦ā€ command, and your placed PSD has the changes you just made.

But wait, thereā€™s moreā€¦

If you donā€™t use Photoshop (or Pixelmator, or Acorn, or etc), I envy you. But you still might want to give this a try, and hereā€™s why:

As of Sketch 3.4, an artboard canā€™t be turned into a symbol. You can, of course, export an artboard as a bitmap. So export the artboard and place the bitmap of the artboard in your .sketch file. Then, after you edit and re-export the original artboard, ā€œUpdate All Bitmapsā€¦ā€

So How Does This Work?

Either open an existing .sketch file or create a new one (be sure to save the new document somewhere first). To place a bitmap, you have two options:

  1. Place Bitmap as New Layerā€¦ will create a new bitmap layer with the contents of the bitmap file
  2. Place Bitmap as Layer Fillā€¦ will place the contents of the bitmap file as an image fill on a selected shape layer [great for avatars and hero images that mimic CSS background-fills]

When one of your bitmap files has been updated, run the ā€œUpdate All Bitmapsā€¦ā€ command.

For Best Results

If you roll solo, like I do, you donā€™t have too much to worry about. But if youā€™re part of a team, with lots of people touching the .sketch files, I have two recommendations:

  1. keep your placed assets in the same directory as your .sketch file, or in a subdirectory of the directory in which your .sketch file lives.
  2. or, if your team works off a file server, keep your placed assets on that server. [Because, theoretically, the paths to the files will be the same for every person who uses that server.]

Frequently Asked Questions

  1. Can I place Photoshop files? Yes! Thatā€™s actually why I created the plug-in.
  2. What about vector files? Sort of. You can do it, but theyā€™ll be rendered as bitmaps, meaning the image canā€™t be scaled up.
  3. Okay, what about... a .sketch file? That would be interesting, but no, that wonā€™t work.
  4. If I move a bitmap file to a different folder, can I still update it in Sketch? Not at the moment, no. Iā€™m looking into it.
  5. If I move a placed bitmap from one artboard to another, will it still update? Yes.
  6. What about from one document to another? Maybe. If both .sketch files are in the same folder, definitely. If theyā€™re not...
  7. If I copy a placed bitmap from one artboard and paste it into another artboard, will it still update? Yes, they both will update.
  8. If the size of my bitmap changes, will the size of the placed bitmap change, too? Right now, the size of the bitmap layer wonā€™t change. Iā€™m still thinking of ways to make it smarter, based on complicated math and dumb luck. But I donā€™t have a solution yet.
  9. Is there any way to have the plugin automatically update a bitmap after itā€™s changed, like Adobeā€™s apps can? At the moment, Sketch plugins can only run when you tell them to. Iā€™ve heard Bohemian Coding might be looking into other events to trigger plugins, but until then, the answer is no, unfortunately.
  10. I already have a bunch of placed bitmaps in my .sketch file. Will the plugin update them for me? That would be great, but no. Bitmaps have to be placed by the plugin, so that the plugin can store location of the bitmap file.

Roadmap

  • a way to ā€œrelinkā€ and/or ā€œreplaceā€ a bitmap
  • a way to ā€œunlinkā€ a bitmap

Version History

  • 1.72.0
    • updates for Sketch 72.
  • 1.52.0
    • updates for Sketch 52.
  • 1.51.0
    • updates for Sketch 51.
  • 1.50.0
    • updates for Sketch 50.
  • 1.47.1
    • bug fix for Sketch 47.
  • 1.43.5
    • Support for Sketch 45ā€™s plugin auto-updating.
  • 1.43.2
    • compatible with Sketch 43.
  • 1.39.2
    • compatible with Sketch 39 & Sketch 40 beta.
  • 1.39.1
    • updated for Sketch 39. Donā€™t update if youā€™re sticking with Sketch 3.8.
  • 0.9.3
    • updated for Sketch 3.8.
  • 0.9.2
    • Place Bitmap as New Layerā€¦ can now select multiple bitmap files at one time to place as multiple layers
    • fixes for Sketch 3.5
  • 0.9.1
    • Removed support for the Mac App Store version of Sketch.
    • preserve dimensions for bitmap layers with strange DPIs. (fixes #1)
  • 0.9
    • Initial release / Public beta

Who?

Iā€™m Frank Kolodziej, a Wichita, KS-based freelance designer & developer. I am available for hire. Iā€™m @frankko on Twitter.

Other Plugins

  • ā˜… Utility Belt: An always-expanding collection of simple, focused plugins for Sketch.
  • Artboard Tools: Plugins for arranging artboards and navigating between artboards.