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


InVision ambassador ambassador
Kelly Knowles Kelly Knowles

Responsive resizing in Studio?

I know its in early access so I can't expect it to work 100%.

Does anyone know how responsive resizing of elements works in Studio? Only thing I can find about it is that "it's part of its core tenant," which doesn't tell me much. I know I can pin things to the top or side of the artboard, but that doesn't cause anything to resize with the artboard.

Is it supposed to be totally automatic? Does it require me to set something up for each element to define how it should be resized? I can't find any of those tools.

Is this feature just not available yet?

1

comments

sort by

official comment
Shaina Torgerson
Shaina Torgerson, InVision Employee , ambassador Edited

Hi Kelly,

Thanks so much for reaching out here in Community about this Studio feature. We actually have some very helpful documentation, including an explanatory video, on this subject here in the Getting Started Guide for Studio in the "Responsive and Static Sizing" section.

You are able to define whether a component will resize responsively, or remain static in size. To define whether a component uses static or responsive sizing:

  1. Select the component.
  2. Click Edit Component at the top right of the canvas. Alternatively, you can go to Library by clicking the book icon at the top of the layer list on the left, and then click the arrow to the right of the component you want to edit.
  3. In the inspector, just below the alignment icons, hover over the Width and Height fields (one at a time) and right-click.
  4. In the drop-down list, click either Px (for static sizing) or Percent (for responsive sizing).

Please be sure to check out the video in the Responsive and static sizing sections of this article to view how this works. Hope this helps!

Thanks,

Shaina


Kelly Knowles
InVision ambassador Kelly Knowles , ambassador

Woops, I did a text search for "responsive" on every page of the guide and somehow I missed that section! Thank you :)

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Of course! Glad I could help.

Please feel free to reach out with any other questions :)

0

Asaf Cohen
InVision ambassador Asaf Cohen , ambassador

Hi, I am trying to change a component so it is responsive, but nothing happens when I click on Percent in the drop-down. The width value remains in px.
Any ideas?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Asaf,

Sorry to hear that you're running into this issue. It appears as if our Support team is aware of this issue. I will open a ticket on your behalf with our Support team so they can keep you in the loop on any updates to this issue. Please look for a message from them soon.

Thanks,

Shaina

0

Bryan
InVision ambassador Bryan , ambassador

Hi Kelly,

Here are some additional details about how responsive and resizing works in Studio (and how it compares to Sketch): InVision Studio vs. Sketch responsive tools

Since it sounds like you've already figure out the basics, here's one specific tip that might be helpful. If you want something to resize based on the outer group, create a component. Anything percentage-based inside the component is calculated as a percentage of that component. If you want it to be based on the artboard leave it as a group or make sure the component is also percentage-based.

Hope that helps!

Cheers,
Bryan

0

José Juan Navalón Gallego
InVision ambassador José Juan Navalón Gallego , ambassador

Hi, all:

Masks within components or combined shapes cannot be turned to percentage. When right-clicking in "width" or "height" and changing to Percent... nothing happens.

Thus, I cannot import an icon or svg with shapes under a mask or complex shapes, turn it to component and make it responsive. In fact, if I resize it manually, the dimensions doesn't change because they're pixel-based (and can't be switched to percent), only  the bounding box resizes!!!

That is a very basic and IMPORTANT issue: I cannot manage a collection of icons as components and make them resizable!

Please, rethink this "responsiveness approach" or fix theses exceptions... I wonder if I'll have to change to percent EVERY WIDTH AND EVERY HEIGHT OF EVERY SINGLE SHAPE OR WHATEVER I IMPORT AND TURN TO COMPONENT. And don't hide those important options behind right-clicks, please.

Thanks.

JJ.

2

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi JJ,

So sorry to hear that you're also running into these issues. Our Support team has been able to replicate what you're seeing. Our Engineering team is currently investigating this issue, and I will let them know that you're also encountering it. As soon as we have any updates on the resolution, I'll be sure to post the solution here.

In the meantime, I will open a ticket with our Support team on your behalf so that they can gather all the necessary information from you. Please look for a message from the soon.

I apologize for the inconvenience that this is causing for you!

Thanks for hanging in there,

Shaina

0

Erin
InVision ambassador Erin , ambassador

I believe I'm running into similar issues as JJ. In my case, I want to resize a vector logo that I imported into Studio (and was converted to a component). However, when I try to reduce the size of the logo component using the width/height as a percentage, only the bounding box changes in size or the elements in the logo jump around within the bounding box. Is there a way to resize a component without having to go into the master component and manipulate every shape inside of it? What about complex vector illustrations?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Erin,

Sorry to hear that you're running into issues similar to JJ. To answer your questions from above:

     1. You should be able to resize/edit a component without needing to resize/edit the master component. However, this can be dependent on the way your component is built.
     2. Can you please clarify what it is that you are looking to do with complex vector illustrations? Do you have a screen recording or screenshot of this instance?

In addition, can you please answer the following to help troubleshoot your issue?:

     1. Can you please send a screenshot of the About This Mac overview? (click the Apple icon > About This Mac)
     2. What version of Studio are you using? Does this occur if you update to the latest version (0.93.10)?
     3. Could you provide a screen recording showing what’s going wrong?

Look forward to hearing from you and assisting you further.

Thanks,

Shaina

0

Ryan Aldred
InVision ambassador Ryan Aldred , ambassador

I'm still having problems setting component dimensions to percentages.  Is this still an outstanding bug as fundamental to my adoption of this application.

Regards,

Ryan.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Ryan,

It appears as if this is a known issue, and our Support and Engineering teams are still investigating this issue. I'm happy to open a ticket on your behalf so that they can keep you in the loop here. Please look for a message from them soon.

Have a great day,

Shaina 

0

Adam
InVision ambassador Adam , ambassador
Hi Shaina,
 
Has JJ's issue been rectified? 
 
I believe I am having a similar issue, I have a vector logo that I've imported with different shapes underneath one another and a stroke on around outside. I've tried changing it to percentage base but it doesn't seem to work properly, well it's mainly just the stroke that doesn't want to resize. 
 
Any help?
 
Thanks
Adam
 
2

Beth Vanderkolk
InVision ambassador Beth Vanderkolk, InVision Employee , ambassador

Hey Adam,

I just checked with our Support team, and it sounds like they'll need to look at your file to troubleshoot this for you. I'll open a ticket on your behalf and they'll reach out shortly. Apologies for the trouble, and thanks for hanging in there!

Beth

0

Kevin Ernst
InVision ambassador Kevin Ernst , ambassador

It looks like I am having a similar issue.  I bring in a vector of our logo that I want to convert to a component.  If I select the group and resize, it is fine.  Once I create a component and try to resize the paths go all over the place.  I have been through all of the tutorials and can't get it to respond in the same way that the video shows.  Please help (willing to send you the file).

Best regards,

Kevin

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Kevin,

Sorry to hear that you're running into issues with resizing in Studio. Before having our Support team work directly with your file, can you please provide the following information?:

     1. A screencast or screenshot(s) displaying the issue(s) you are encountering.
     2. The version of Studio you're currently running.
     3. A screenshot of your "About this Mac" overview.

Thanks in advance,

Shaina

0

Diana
InVision ambassador Diana , ambassador

Hello,

I'm still having the same issue, can't change pixel to percentage in a component while resizing + following the tutorial, i don't have the 3 icons beside the rotate that allows you to fix an object with respect to its background? Any advice on that?

Best, 
Diana 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Diana,

I'm so sorry to hear that you are having issues with Studio and resizing. I'd be more than happy to help dive into this further for you. A few questions for you:

     1. What version of Studio are you using?
     2. What is your "About this Mac"?
     3. Can you please provide a screenshot showing what you mean by, "...i don't have the 3 icons beside the rotate that allows you to fix an object with respect to its background"?

Looking forward to hearing back from you soon!

Best,

Shaina

0

Diana
InVision ambassador Diana , ambassador

Hi Shaina, 

1- Version 1.8.0-B1497 

2- Version 10.12.6 (16G1815)

3- Attached are the images

4- When you change from pixel to percentage in the resizing, the percentage value is not running. It stays in pixels. 

Thanks

0

Florian Haßler
InVision ambassador Florian Haßler , ambassador

Hi there, I'm having the exact same issue on 1.8.0, while trying to resize a component with combined shapes. I can't turn them to % resizing. Is this issue finally solved or in the process of being solved, maybe? I really don't know how to work around that, except for export and re-import.

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador Edited

Hi Diana and Florian,

Thank you each very much for providing those details! I would like for our Support team to take a closer look at this issue for each of you and will be opening a tickets on your behalf. Please look for a message from our Support team soon for further troubleshooting.

Thanks for your patience,

Shaina

0

Gareth Ashfield
InVision ambassador Gareth Ashfield , ambassador

Hi,

 

Do you guys have a Sack group for users to submit issues and open member discussions about shared issues and potential solutions?

A link to a page requesting a full submission request is quite tedious. You guys are amazing for responding quickly, but putting fundamental functionality flaws to a vote seems counter-productive in gaining loyal users.

Animation is amazing icing on the cake, but nailing a user friendly, fully responsive core of the app, surely should be the priority?

G

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Gareth,

I totally hear you and understand that it can be frustrating to fill out a full request for each issue or feature request you're looking for more information on. While we don't have a Slack group at this time, I can assure you that we are working hard to make these issues and feature requests easier to find and report on here in Community.

We really appreciate hearing from loyal customers like you about how these types of issues, and how we can do a better job. Thanks for the sweet remark about our quick response times! I'm glad to hear that you are getting quick and effective service from our Community and Support teams.

Can you please confirm if you are also encountering the issues described by others in this thread? If so, I would be happy to put you in touch with our Support team so that they can take a closer look at the issues you're encountering.

Look forward to hearing from you,

Shaina

0

join the conversation

to comment, sign up or sign in.