Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Chris Cavill Chris Cavill

XD and invision

Hi guys

 

Im building out a site in Adobe XD and having to collaborate on invision. I work on a retina mac and when i export and upload to Invision it pixelates. 


Tried PNGs/ JPGs the lot. I tried adding the @2x at the end of the files but it makes them even smaller.

I imagine we need to recreate out artboards at double the width. Is that the only way to make the screens crisp (like i am seeing on XD). Feels like such an effort. Am i missing a trick?

Thanks!

0

comments

sort by


Kayden Knauss
InVision ambassador Kayden Knauss , ambassador
Comment actions Permalink

Hey Chris,

Happy Monday! Sorry to hear your website’s appearing pixelated with InVision. Usually when working with retina displays it’s recommended to export at @2x so it’ll look crisp. You should not need to redo any artboards or designs to the 2x size, as Adobe XD can do that for you.

Have you tried using Adobe XD’s export for web @2x when trying to upload into InVision?

On Mac, select File > Export
On Windows, click the Hamburger menu, and click Export

You’ll then want to specify the resolution for web designed at 2x.

Would you mind exporting your artboards that way to see if it does the trick?

Thanks,
Kayden

 

1

Chris Cavill
InVision ambassador Chris Cavill , ambassador
Comment actions Permalink

Thanks for the reply.

 

I tried that again and it still does the same thing. Makes it retina but reduces the scale too.

Im attaching an image of the 2x version you just mentioned (on the right) vs the standard (on the left). 

How do i overcome this issue or do i need to make my artboards massive in width?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Chris,

I'm sorry for any confusion, but using the 2x modifier actually condenses the file. It's meant to help users test on retina screens. Check out our documentation here for more information how to best mock up web prototypes for high-resolution displays.

If you'd like the image to appear larger, I'd recommend not using the 2x modifier. If you're still having issues with the resolution, please let me know and I'd be happy to look into this further.

Hope this helps!

Shaina

 

0

Chris Cavill
InVision ambassador Chris Cavill , ambassador
Comment actions Permalink

hey Shania

 

thanks for the reply

 

Im still having the issue.  Maybe you can give me some quick steps on how to achieve a 1920px dekstop website design set up for invision that is retina-fied?

Im struggling! lol

 

thanks 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Chris,

Sorry to hear that you're still encountering issues. To determine what might be going on here, can you please provide the following information?:

     1. To clarify are you attempting to export for Studio or InVision Cloud? If Studio, what version are you on?
     2. Can you please provide a screenshot of your "About this Mac" overview?
     3. Are you using a 4K or 5K monitor?

Look forward to hearing from you,

Shaina

0

FENG sun
InVision ambassador FENG sun , ambassador
Comment actions Permalink

Also have the same problem, we use adobe XD, retina mac; I tired add "@2x" at the end of the file name: [email protected], it really worked one month ago(can't remember the exactly time), but now, the same method dose not work anymore, maybe some error occur with version iteration?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Feng,

Sorry to hear that you're also running into this issue. In order to figure out why this might be happening, can you please provide the same information requested above?:

     1. To clarify are you attempting to export for Studio or InVision Cloud? If Studio, what version are you on?
     2. Can you please provide a screenshot of your "About this Mac" overview?
     3. Are you using a 4K or 5K monitor?
     4. Can you please provide a screenshot or screencast displaying the issues?

Look forward to hearing from you,

Shaina

0

Chris Cavill
InVision ambassador Chris Cavill , ambassador
Comment actions Permalink

Still having the issue too FENG sun.

 

To clarify on my specs:
• Using invision app which i think is just a 'Project' for a website - maybe its a Prototype

• Attaching screen grab of the mac

• Not using 4K or 5K screen - currently using a macbook pro 15 in touch bar 

 

any extra help given the above info?

 

thanks guys!

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Thanks for providing that additional information, Chris. I would like for our Support team to take a closer look at this for to determine what might causing this issue. I will open a ticket on your behalf with our Support team. Keep an eye out for an email from one of our Support agents soon.

Thanks for your patience in addressing this issue. 

Best,

Shaina

0

Effusion
InVision ambassador Effusion , ambassador
Comment actions Permalink

I am experiencing the same exact problem Chris and FENG sun are meeting.

A file @2px from XD imported in InVision won't show at 100% on screen (but smaller size).

It's been a recurrent and annoying issue that needs to be solved asap.

I am using InVision in the browser / iMac (Retina 5K, 27-inch, Late 2015. 

Please could you advice?

Thank you

 

Julie

 

0

Beth Vanderkolk
InVision ambassador Beth Vanderkolk, InVision Employee , ambassador
Comment actions Permalink

Hi Julie!

This seems related to the way you're exporting the screen from Adobe XD.

If you remove the suffix @2x from the file name and pick the option 'Designed at: 2x' instead, the screens will look the same (full-width) in InVision.

Thanks,
Beth

0

Effusion
InVision ambassador Effusion , ambassador
Comment actions Permalink

Hi Beth, 

 

When saving from XD, I never add manually @2x suffix. My files have all very generic names like 'Homepage' "Content page' etc...

I have selected all the presets you recommended > Format PNG - Export for Web - Designed at 2x which result in 2 type of files as you can see in the images attached. 

 In Photoshop, Content page [email protected] = 1280 x 3047px - true size)  and Content page 01.png = 640 x 1524px. 

When importing both files in InVision, they both show incorrectly (@50%). So my problem is still no resolved. 

The main issue being that I'd like my designs to show @2x in order to get a crisper look (retina display) - which used to work but seems to be broken at the moment.

0

Beth Vanderkolk
InVision ambassador Beth Vanderkolk, InVision Employee , ambassador
Comment actions Permalink

Hi Julie,

Thanks for those additional deets. Images displayed at 50% the dimensions is an expected behavior given that sheer size of the image at 2x, otherwise it would appear very large and would not be easy to view on computer display. Instead, we display images at 50% of the dimensions, while the clarity of the image is preserved. If the image is not appearing clear when synced to InVision with the 2x modifier applied, we’d be happy to dig in a bit further. I see you had an open ticket with Support. If you want to reopen it so you can share your files and they can dig deeper, please let me know!

Beth

0

join the conversation

to comment, sign up or sign in.