# Sketch Import - why does the layout look like this?

**URL:** <https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372>\
**Category:** Bug Reports\
**Created:** [November 22, 2016, 12:08pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372 "2016-11-22T12:08:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve\_Harman](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@Steve\_Harman](https://forums.fusetools.com/u/Steve_Harman)\
**Post date:** [November 22, 2016, 12:08pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372/1 "2016-11-22T12:08:58Z")

</div>

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](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 import`it 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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/OOPNVAzpVEbf-image-1479816449572.png)

---

<div class="post-metadata">

**Author:** ![Anette\_Gjetnes](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@Anette\_Gjetnes](https://forums.fusetools.com/u/Anette_Gjetnes)\
**Post date:** [November 29, 2016, 3:47pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372/2 "2016-11-29T15:47:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve\_Harman](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@Steve\_Harman](https://forums.fusetools.com/u/Steve_Harman)\
**Post date:** [November 30, 2016, 2:17pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372/3 "2016-11-30T14:17:43Z")

</div>

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](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](https://www.invisionapp.com/now))

Thanks again,

Steve

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

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 30, 2016, 5:52pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372/4 "2016-11-30T17:52:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve\_Harman](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@Steve\_Harman](https://forums.fusetools.com/u/Steve_Harman)\
**Post date:** [November 30, 2016, 6:03pm UTC](https://forums.fusetools.com/t/sketch-import-why-does-the-layout-look-like-this/3372/5 "2016-11-30T18:03:14Z")

</div>

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
