Sketch:

In Framer, the image for Status bar is exported both in its own view, and as part of the Phone view.

Example file:
https://www.dropbox.com/sh/jrn1x18qipd4s9l/eF4GsjtF-e

If I have a multiple windows of Sketch open, the importer fails and says "Sketch Framer found some errors". I have to close all other windows in sketch for it to work properly. Ideally, I could leave any number of windows open and only import the active one, which is how the photoshop importer works. I'm also not sure why the error message talks about "Pages", when the "Windows" are what appear to be the issue here.

I suggest that this supports exporting pages and artboards in pages. So, you could either export pages each in their own folder, with all artboards contained in the framer js file export. See below as my example of what the export could be:

• Filename.sketch
• Filename (folder)
  • Page 1 Name (folder)
    • framer (folder)
    • images (folder)
  • Page 2 Name
    • framer (folder)
    • images (folder)

Took me a while to figure out what was going on here. Basically, a border set to 'outside' on a child group (or element) is resulting in erroneous width/height on the parent group. This is only visible in the .png output. Here's an example:

The pink view is 640px × 1136px. However since I have a child group with an outside border thickness of 50px, it has exported out as 740px × 1236px (an extra 50px on each side).

Not quite sure if this is something to do with Sketch, Sketch Framer, or me!

Hi guys-

This morning—I think this morning—I got a dialogue box to update to the latest version of Sketch3 beta. After that, when I go to export using the Sketch Export plugin, the /framer and /images directories are created, but no files are added. In the Sketch app, the top-most folder (including its layers) is duplicated. If I attempt to re-export, the top-most folder is duplicated a third then fourth time.

The first time I run Export to Framer on a new project, the launched index.html file can't find framer.js, even though the file exists in the directory:

Fortunately this fixes itself on refresh—which leads me think that perhaps the open task is being fired too soon. Not a big deal, but thought I'd mention it here anyway.

FYI this only appears to have started happening since upgrading to the latest version of Sketch Framer. I'm on Version 2.4.3 (5347) of Sketch.

Error:

When visual elements exceed the bounds of the artboard, the user is able to scroll around in the Framer viewer in undesirable ways that are outside the bounds of the artboard.

Sketch file
https://dl.dropboxusercontent.com/u/7264254/OutofBounds.zip

Example:
https://www.dropbox.com/sh/brkwxirgrsj5u7d/5Fkor54vBi

Sketch:

Phone both has a subgroup (Status bar) and two shape layers under it (text and background). Phone2 (not buggy) only has groups as children.

Framer:
When exported, Phone has double dimensions (640x1136) but Phone2 is fine.

Hey!

This doesn't quite work on 2.4 or 2.4.2. Just wanted to give y'all a heads up.

I'm super pumped this exists and really wish someone would update it. Hell, I'd throw down 5-10 to support. Are there any updates down the line?

what if bitmaps were exported at at their original resolution and resized in framer so we can scale them up/down without loss of quality. this would be similar to how Sketch itself handles bitmaps.

downsides: larger exports and potential problems with the scaling algoritms?

Right now the offset calculation code assumes that effects are symmetrical in both axes, and will fail miserably for effects that aren't (your typical drop shadow, or a basic reflection, for example).

Have a look at the Group folder and how it gets exported

Download the file with the issue: http://cl.ly/X46V

Any plans / road-map to support framer 3?

Thanks!

Setup:

The "Screen" group contains all other layer groups. Nothing exceeds 640 x 1136.
When targeting Screen within Framer:

What's causing this extra padding? Masking makes no difference. Including / removing Artboards doesn't either.

Sketch File: http://cl.ly/X8bJ
Framer File: http://cl.ly/X8lw

If you import these to framer the kermit in the ContainerA will be the right unchopped size and the other one will be as high as ContainerB (flattened).

Because the Sketch-to-Framer is pretty shaky, I've been liberally flattening layers by appending a * to the Sketch layer name. The problem is that when I want to use the flattened layers, I have to say myLayers['flattened_'] because myLayers.flattened_ throws and error obviously.

Does it make sense to strip out the asterisk? I can see arguments against stripping, but I thought I'd let you know it's an issue I've run up against.

And I've been using this loop to fix it:

/*Because Framer currently includes the * for flattened layers, we need to remove them*/
for(var i in myLayers) {
    if(i.slice(-1) == "*") {
        var newName = i.slice(0, i.length-1);
        window[newName] = myLayers[i];   #in keeping with using framer shortcuts which move all layers to the global namespace.
    }
}

A layer that is masked has the wrong frame. If you add a fill to the mask it gets the correct frame.

Sketch: http://cl.ly/2Y0O2B3O2e3G

I was trying to debug a weird alignment bug that I was losing sleep over, and found the bottom of it. Basically any external border or shadow causes every parent element in the document to shift by that amount. Also the immediate parent will grow by that amount as well, even if the borders don't mess with its boundaries. This is probably caused by a bug in calculate_real_position_for?

@bomberstudios

Example

Without borders, everything is fine. Phone is at (0,0) and Feed_scroll is 640px wide. Card is 600px wide and starts at x=20.

With a 8px outside border, Phone shifts to (-8, -8), an Feed_scroll grew to 656px, even though the border actually didn't cause the container to grow. Card is 616px wide (correct) and starts at x=12 (correct).

Here's the file:
https://dl.dropboxusercontent.com/u/811105/prototypes/sketch-framer-border-bug.zip

the official framer app shows this message, if run on unsaved documents:

Framer: Please save document first
You need to save your document before running Framer so we know where to write to.

It would be nice with the same kind of feedback in sketch-framer :)

As you guys probably know Cactus is an awesome static site generator for designers.

It would be awesome that the Sketch/Framer plugin could export into a similar folder hierarchy so I don't have to move the files.

Cactus already have a Framer template that you guys can check out.
https://github.com/koenbok/CactusTemplatesExtras

Example file: https://www.dropbox.com/sh/j5zd3udczpiu1ax/7dSxtMm3yA

Sketch:

Framer:

Set-up:

Framer Studio result:

It clips layers at the selection of the original rectangle. Not too big of a deal, but I thought I'd share anyway. (As flattening layers should prevent this)

Hi there!

This is the output when I export from Sketch :

framer.js is missing.

Thanks!

Since borders lay outside the coordinates of each element, "outside" borders get cut off. Couldn't find a workaround yet.

@bomberstudios

Ex:
Sketch:

Framer:

When I import from sketch from an artboard properly sized for iOS, the layers on import are all shifted to the right a number of pixels.

Every time I export to Framer, Chrome opens a new tab with the prototype.

Is there a way to reuse the same tab? Or maybe only open the browser the first time a prototype is generated, and not subsequent times.

In this file, a group with no contents (view), just folders that contain layers, exports as a opaque png that is too high and therefor offsets vertical alignment.

Zip here: http://cl.ly/X3ut

Set-up:

Bottom layer masks. Middle layer gets appropriately clipped. On the top layer, I set "ignore underlying mask". It gets cut-off in Framer:

Sketch File: http://cl.ly/X8UA

Firstly Sketch 3 is very much beta and they are releasing updates at an incredible rate so this is more a ticket to be aware of the new release.

SketchFramer running inside Sketch 3 beta exports blank images. I've looked at the code and not got to the reason for the blank export yet.

Is it possible to exports everything in 2x if I uses retina canvas? As frame set image using background-image, I think the result is that we can achieve a retina-friendly prototype.

If the Sketch file has a group that is hidden the script will not export anything

Even if just Sketch Version 3.0.4 (8053) is installed and open, if I have a beta version or other older versions of sketch, the importer seems to try to boot them up and use them, and then the importer fails. If I remove the other versions from my machine and empty the trash, then reopen framer studio and reopen sketch, it seems to start working correctly again.

Test file: https://www.dropbox.com/sh/tdi5ef68x285sjf/yvIJsWBAmF

On Framer:

In Sketch:

As a first time user it can be hard to know what's happening when you hit the "export to framer" button. Sketch offers a non-obstrusive way to implement messages to the toolbar. It might be a good idea to add something like "Export finished! Project located at: /xxx/my project"

Only the visible part gets exported, the whole thing should be

http://cl.ly/X46N

When exporting, I get the set of correctly sized images in the /images folder, but all are blank transparent pngs. It's correctly doing everything else. :-)

Would be nice you could choose to export a project using Tisho's framer templates instead of having to manually add them from the github repo :)

https://dl.dropboxusercontent.com/u/93762/Framer/Rectangle%206%20does%20not%20get%20imported.sketch.zip

The layer group Card4 gets imported with 3px extra transparent pixels around each edge. The image is 566x726, whereas the shape in Sketch is 560x720.

Framer project and Sketch file: https://www.dropbox.com/s/2iop5se3yil0emp/20140822%20Card%20Dragging%20%28Framer%29.zip?dl=0

The group 'Oval 1' has a shadow set to it. With a group in 'Oval 1', the outcome gets clipped. With no group in 'Oval 1', the outcome is good.

Zip with file here: http://cl.ly/XBtV

I just updated Sketch 3 Beta and Framer stopped working. It does nothing when selecting "Export to Framer". I tried removing and adding again the plugin files.

Just in case this takes time, is there a way to return to the previous beta?
Thanx! : )

The plugin is technically "showing up" but there's not name and the empty space there isn't clickable.

I'm using the newest Sketch Beta (2.4.0) and I'm on Mavericks.

https://www.dropbox.com/s/4poe5blz2pu6tsf/Screenshot%202013-11-01%2018.34.44.png

Not sure if it's the new Sketch Beta 3.0.2 or changes here but when I call layer group names in app.js they're showing up as undefined in the error console. Any tips?

Right now they can only be created manually in code, and that sucks : )

I just grabbed sketch 3 and I'm trying to run the plugin and I'm getting this error in the console:

4/18/14 9:18:25.956 AM Sketch[15084]: Sketch-Scripting Error on Line 589 (/Users/jga/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Export to Framer.sketchplugin): TypeError: 'undefined' is not a function (evaluating 'filename. stringByDeletingLastPathComponent()')

Is this because I'm using the app store version?

Currently, if a user imports a Sketch file with layers sketchdoc["Layer1"] and sketchdoc["Layer2"], and assigns them z: 1 and z: 10, respectively, then creates a new layer called layer3 with z:5, sketchdoc["Layer2"] will not be visible over layer3, despite having a larger z-order.