Artboard Cropping Behaviour

[voodoo6]

Hi, I’m trying out MagicMirror and its been really great so far – very impressed :)

I have a question (or a feature request?): how can I select a specific area of an artboard to appear in the preview?

Eg. let's say I have a really long artboard and I only want part of it to appear in my preview (so that it fits a screen for example) – is there a way I can specify which portion of the artboard should appear in the preview? I realise I can move the artwork within the artboard to choose the crop but I have to deal with the limitations of having the small artboard (no background colours, objects listed off the page etc).

Further example:

This first image shows the artboard set to the device size with the extra content hanging off the bottom – notice how I can't see the background colours on the overflow content. the image also shows the preview – correctly portioned as expected:

Ideally, I would like to be able to work with any size artboard so I get an accurate view of my design but when I make the artboard bigger, the preview tries to fit it all in and it appears squashed and out of proportion:

Is there a way I can work with any size artboard I like and select the area that should shown the preview – a bit like this suggests (if the the red area was moved, the preview would show that section in the correct proportion):

I hope this makes sense!

[jamztang]

I think that make sense but it might not be in the road map too soon until we've figure out a good UX on that. A workaround is to create another intermediate artboard for the original one then you can sort of provide that function.

[username1290]

@voodoo6 you can have many artboards over each other, and simply select which one to show. so, you can have one large artboard (the original with the whole design), and create 2 or 3 artboards with the iPhone height, Overlap them over the original artboard and, using magic mirror select which one to show. hope I explained myself.

[voodoo6]

@sogen Brilliant! I would never have thought of that :) Thank you.

[jamztang]

Great trick! I think we should find a way to document this

[jamztang]

The trick doesn't quite work for me tho .___.

[voodoo6]

I can get it working but with a few compromises. It's unfortunately not as simple as over-laying an artboard and selecting it in Magic Mirror.

The content has to be on the preview artboard for Magic Mirror to see it. So to easily switch between the two boards for editing and previewing means moving the content from one board to the other – I found the best way to do this was to group everything then drag the group from the master board to the preview board and vice versa to switch between 'master' and 'cropped' modes:

Another issue here is that the overlaid board is visible when working on the lower 'master' board so has to be moved if you want a clean view:

So, it sort of works!

(EDIT – there a few other issues with the artboard background colour too which is a bit of a pain)

@jamztang more incentive to find a good UX ;)

[jamztang]

What if we made the original screen into a symbol and just put it on the artboard with target size?

[jamztang]

But I do agree that's not the best UX possible ;) it's sort of a workaround