Dear all,
I am new to Figma, I have done pretty good by creating variable based prototypes however I am stuck in creating responsive design that should work on each screen size,
I have created responsive components for Desktop version and they are responsive till screen size changes to 1100-900px however for tablet and mobile size, will I have to create separate components or I can use wrap property to create one responsive component but when I set the out Frame to Fixed width and wrap and its childs to fill container and gives it min width of 800px, they do not wrap and get a messed up layout? what is the best way to design responsive page that works for each screen sizes?
Any plugins to help me achieve this?
Should I switch to html and css to create responsive designs?
I will be thankful for your guidance.
Hi @Naeem_Ashraf , I’ve solved a similar problem for myself, perhaps this is something you could use too. Essentially, it’s an alias to another variable that controls the frame size.
I created 3 variants of a component to match different screen sizes/ breakpoints to change things like a horizontal layout to a vertical one, or reduce margins and padding on smaller devices. I called this property “component-size” and set the values of Large, Medium, Small.
I also use some sizing variables (i.e. min and max widths) which are applied to my design frame (with three modes: Desktop, Tablet, Mobile) which change the frames width / screensize across the three breakpoints allowing me to test responsiveness easily. One of these variables is called screen-size which, as above, holds the values Large (desktop mode), Medium (Tablet mode), Small (Mobile mode). This variable is applied to the frame.
when I drop my component instance onto the frame I want its size variant (component-size) to change in accordance with the frame size (screen-size variable).
When the component instance is in your layout, select the component-size property, and instead of using the drop-down to select one of its size variants (Small, Medium, Large), simply click and remap this to the screen-size variable that the frame uses.
As these share the same values (Large, Medium, Small) you will be able to change the frame size to say Mobile, and your component instances will now be displaying their mobile variant.
Hope that helps.