Sketch Import - why does the layout look like this?

Bug Reports
1

Hi,

// Fuse 0.29
// macOS Sierra 10.12.1
//Sketch 41

This may not be a bug, more my lack of understanding. For experimentation I grabbed an artboard from the free “Now UI” mobile UI kit (https://www.invisionapp.com/now) and created a new Sketch file with just the one artboard in it.

Using fuse import myfile.sketch --app MainView.ux I imported the file / artboard into MainView.ux. Ran the local Fuse preview, an Android preview and a couple of iOS previews and things were looking good for a first attempt. Except on one of the iOS previews (an iPad 2 device).

Android Nexus5 - screen layout looked about the same as it did in the Sketch artboard. iPhone 5 and Fuse local preview also looked the same as the layour did in the Sketch artboard. But the iPad 2 has a large amount of white space around its panels.

Looking at the MainView.ux generated by fuse importit seems the panels should each be taking up their own specified % of space on the device(s). So why are things ok in Fuse preview, the Nexus and the iPhone but not the iPad? (Hopefully screenshot attached - I forgot to include the Nexus)

Thanks,

Steve

file
OOPNVAzpVEbf-image-1479816449572.png1771×1020

2

Hi Steve,

I haven’t seen this before. Have you tried specifying some more image densities? You can specify how many and which image densities to import into fuse, by adding ‘–1x --1.5x --2x’ etc as arguments to the import command . The default is 1x and 2x. Try to run ‘fuse help import’ for a list of options.

If this doesn’t do the trick please feel free to upload the sketch file so I can try to reproduce the problem.

Hope this helps,
Anette

3

Hi Anette,

Thanks for the suggestion.

I tried an import using all densities this lunchtime in a freshly created test project, but the result is the same - looks fine on physical iPhone 5, physical Nexus 5 and all the ‘virtual devices’ in fuse preview (iPhone 6, iPhone 6 Plus, iPhone 5/5S, Sony Xperia Z3, Samsung Galaxy S6 Edge) with the exception of the larger screen size tablet devices.

On my physical iPad 2 and the iPad Retina + Google Nexus 9 in Fuse Preview, the layout looks as it did in my previous screenshot.

I’ve uploaded the .sketch file I’m using to Google Drive: https://drive.google.com/file/d/0B6uuFgwmnwBUekMwcURBQTBDWWM/view?usp=sharing It’s a single artboard from the freely available ‘Now UI’ kit that InVision put out (https://www.invisionapp.com/now)

Thanks again,

Steve

p.s.
Same issue now that I’ve upgraded to Fuse 0.30.0

4

Hi Steve!

I tested the sketch file you uploaded and resized my viewport a bit. The problem is that the design is only made for a certain screen aspect ratio and so wont work when you put it on a screen dimension that differs significantly. One thing that “sort of” helps is to put StretchMode="UniformToFill" on all the generated classes in nowUiTiles.sketch.ux. It doesn’t really fix everything, but it gets rid of the gaps. You could try it and play around with different screen sizes to see what it looks like.

The best approach if you’re willing to learn more of Fuse is to use the generated classes as assets and put your app together using layout.

5

Hi Kristian,

Thanks for investigating this and the explanation makes perfect sense.

Yes I like your idea about importing the Sketch files as assets and then using layout, I’ve been experimenting with things like Grid and DockPanel to do just that.

tbh the more I learn about Fuse UX features like drawing rectangles etc. - they cover many basic UI cases anyway, and then just reference the imported Sketch assets.

Kind regards,

Steve