I need help designing a banner that works well on both desktop and mobile devices. My plan is to save two versions of the same banner with different sizes in my database. Then I can show the right version depending on whether someone is using a phone or computer.
The tricky part is that I want both versions to look identical. I don’t want any cropping, stretching, or missing parts when I resize for different screens. Both the desktop and mobile versions should show exactly the same content and layout.
Can someone walk me through the process of making this kind of responsive banner in Figma? I want to make sure the final images are truly identical across both formats, just with different dimensions.
Here’s what most people miss: set up your grid system first, before you design anything. I learned this after making tons of banners that looked terrible on different devices. Create a grid with margins and gutters that work mathematically for your target sizes. Design everything to snap to this grid. When you resize the frame, everything scales proportionally because the grid scales too. Don’t use absolute positioning for important elements - use percentages of container width instead. This keeps everything aligned when Figma scales your banner. Pro tip: test this with simple shapes first before spending hours on your actual design.
honestly, vectors are ur best bet in figma. build everything as vectors and text elements instead of raster images. when u export at different sizes, everything scales perfectly - no quality loss or weird cropping. just make sure your text is set to scale proportionally too.
Creating responsive banners in Figma is entirely feasible with careful planning. I recommend starting with a mobile-sized frame since it’s the most limiting. Design your banner within these dimensions to ensure everything fits well. After that, duplicate the frame and resize it for desktop use. Utilize Figma’s constraints and auto-layout features to allow text to scale proportionally and maintain the layout integrity. For images, adjust settings to prioritize scaling rather than cropping. I typically use 16:9 for desktop and 4:5 or 1:1 for mobile, but choose ratios based on your specific content needs. Consistency is key to ensuring both versions have the same visual impact.
I’ve dealt with this same issue tons of times. Components with constraints are your best bet - way more reliable than other methods. Start by making your banner a main component, then build variants for each aspect ratio. The trick is nailing the constraints on everything. Set your text boxes to scale with the container and make images fill proportionally. Once that’s done, the component frame resizes and everything adjusts automatically without messing up your visual hierarchy. I always test by creating instances at different sizes to catch anything that breaks or gets chopped off. Keep your export settings identical for both versions so colors and quality match. This approach has saved me tons of time vs manually tweaking each element.