Design, prototyping and design systems solution chosen by the best teams.
Resizing Components For Multiple ResolutionsApril 2, 2020 at 12:17am
I've made a component, for example, a button that contains a circle layer and an icon. I'm using that button on my 1920 wireframe, but now I want to resize the button so that it will fit on my wireframe for mobile screens. What is the easiest way to resize the component without affecting the desktop wireframe? Currently, I have to create all of my components twice, once for desktop and once for mobile.
April 2, 2020 at 12:23am
Responding while not at a computer but your screen recording is very helpful. My first comment is that you are trying to resize elements within a component while not in edit mode of the master component. This is why nothing happens when you try to select layers within the component from the layer tree.
As far as being able to resize your component it will depend on how you have built your component. Select your component and then click on the “Edit Master” button on the top left of the canvas. You should now be in edit mode for the component.
Its not clear from the screen recording if you are modifying a component within another component, Im assuming that this is not the case. I also noticed that your component appears to have resizing properties set at its parent level. (update: A component having resizing properties may be due to the fact that the component is contained within a parent folder.)
Now the trick for me when making resizable components is to test them before turning them into a component.
I create a folder with the elements that will make up my component.
- Pay special attention to the "resizing" section of Properties Panel.
- Test what sizing options you will need to have enabled and disabled based on your needs.
Here's a recording of how these 3 folders and their contained elements will behave based on the resizing properties assigned.
When my folder of elements behave as intended, I then duplicate it and convert it into a component for further testing.
When UXPin converts the folder to a component it will create a new folder within itself with the same name and set the resizing properties for this folder to stick to top, bottom, left, and right.
Here is a recording of one of my final resizable folder based on the behavior settings I felt would suit my needs converted into a component with editable elements.
Also in the image which shows your component with resize properties assigned, it may be because the component is contained within a folder. https://spectrum.chat/thread/af5ebc63-2ca2-41ec-a923-11282ccda8dd?m=MTU4NTc5Mjg4NzU3MQ==
Modifying the resize settings for the component contained within a folder may help to resolve the issue.