menu

UXPin

Design, prototyping and design systems solution chosen by the best teams.

Channels
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Feature requests
view-forward
# Help
view-forward
# Before you post
view-forward
# Learn
view-forward
Team

Resizing Components For Multiple Resolutions

April 2, 2020 at 12:17am
The UXPin community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Resizing Components For Multiple Resolutions

April 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
Here's a GIF of what kind of thing I run into: https://recordit.co/sS9peA63ly
I have a title card component, I want to resize it for this particular page but cannot.
  • reply
  • like
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.
Edited
like-fill
1
  • reply
  • like
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.)
Edited
like-fill
1
  • reply
  • like
  • reply
  • like
  • reply
  • like
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.
Edited
  • reply
  • like
  • reply
  • like
Here's a recording of how these 3 folders and their contained elements will behave based on the resizing properties assigned.
  • reply
  • like
When my folder of elements behave as intended, I then duplicate it and convert it into a component for further testing.
Edited
  • reply
  • like
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.
Edited
  • reply
  • like
  • reply
  • like
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.
  • reply
  • like
I hope I understood your issue correctly and could help in resolving it.
  • reply
  • like
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.
  • reply
  • like