Here’s the Full Tutorial of Responsive Design using Variables in Figma #figma #figmatutorial #figmadesign #responsivewebdesign #uidesign

Hmm, not sure if this is responsive. If you change the size of the artboard, now the size of the component doesn't change with it? Since in this design the component uses the full width of the viewport you could just put the component in a frame/container with auto-layout enabled and set it to fill. This way it will always use the full width. Then set up two variables: one for controlling the padding on the sides and one (optional) for controlling the max-width for the component for the different breakpoints. As a bonus you can set up another variable that changes a string name per mode that you can use to swap between component variants if you need different lay-outs per breakpoint.

@figma I've made an add-on that can make a true responsiveness by switching component variants based on max-width property numeric value, the only drawback is that you need to have add-on opened to make magic happen. If I figure out that 10+ ppl are interested in it, i'll publish it.

@figma Very helpful. Thank you for sharing 😊

@figma Highly needed Harshil

@figma Wait, help. If you were doing this - changing size without changing layout - wouldn't you just put fill-container on everything? Show me how to put those pay methods on one line at desktop/tablet but stacked on mobile.

@figma sorry but its useless. developers already do this easily. you have to think about user experience for each dimension different.

@figma 😩😭😭……🥱😴

@figma Great tutorial 👍👍