UX Golden Tip #2. Master the grids in Figma: perfect setup for desktop & mobile design.

Unleash your design potential with custom grid layouts and best practices for seamless, pixel-perfect web and mobile designs in Figma

Summary: In this article, we explored the ideal grid setup for both desktop and mobile projects, ensuring a smooth and efficient design process. For desktop, we covered a 1440px frame with 100px margins, 20px gutters, 1240px working space, 20px inner-padding, and a 12-column layout. For mobile, we discussed designing for iPhone 13 Mini with a 375×812px frame, 8px gutters, 16px margins, and a 4-column setup. Lastly, we looked into the row grid with a top alignment, 8px height, 0px gutter, 0px offset, and a high row count for longer designs. Using these grid setups, designers can create pixel-perfect, well-aligned designs that are easier for developers to convert into code.

Hey there, fellow designers! 🎉👋

You know the feeling, right? You’re starting a new project, and you’re scratching your head, trying to remember the grid setup you used last time. Ah, the pain and the struggle! 😅🤦‍♂️ But worry no more, my creative friends! After countless trials and errors, I’ve finally discovered the perfect grid setup for both desktop and mobile projects that will make your life as a UX designer so much easier! 🙌🌟

So buckle up and prepare to be amazed, because I’m about to share these game-changing grid setups that’ll revolutionize the way you design for desktop and mobile! Let’s dive in and wave goodbye to those grid-related headaches once and for all! 🚀😎

Desktop grid first. 🖥️📏

The perfect desktop grid setup that I’ve found works like a charm consists of the following parameters:

1. Margins: We’ll start with 100px margins on both the left and right sides. This gives your design ample breathing space on larger screens.
2. Frame: A 1440px wide frame is an ideal choice for catering to various screen resolutions while maintaining a clean and consistent design.
3. Gutters: Keep the gutters at 20px. This provides just the right amount of separation between the columns, ensuring that your content is neatly organized.
4. Working Space: A 1240px wide working space ensures that your content has plenty of room to shine without feeling cramped.
5. Inner-Padding: Include a 20px inner-padding to give your content and elements some extra space for better visual appeal.
6. Columns: Lastly, go for a 12-column layout. It provides the perfect balance for organizing your content in various arrangements, making your designs versatile and adaptable.

And there you have it! The ideal desktop grid setup that’ll make your design process smoother and more efficient. Give it a try, and see the magic unfold! ✨🎩

Mobile grid. 📱📏

When working on mobile designs, I prefer using an iPhone 13 Mini as my starting point. It offers enough space to work with while being one of the smallest yet popular screen resolutions available. Remember, it’s easier to scale up your design than to scale it down when the content is already in place.

With Figma’s auto layout and constraints, your design will remain responsive no matter the frame size. Here’s the ideal mobile grid setup for a smooth design process:

1. Frame: Opt for a 375 × 812 px frame. It’s a common resolution that suits most modern smartphones, ensuring your design is accessible on a wide range of devices.
2. Gutters: Set the gutters to 8px. This will keep your content organized and well-separated while still maintaining a clean and neat appearance.
3. Margins: Use 16px margins on both the left and right sides. This creates enough space for your content to breathe without feeling too tight on smaller screens.
4. Columns: A 4-column layout is perfect for mobile grids. It offers enough flexibility to arrange your content effectively while maintaining a clean and organized structure.

There you have it! The perfect mobile grid setup to make your design process a breeze. Give it a try and watch your designs come to life on various mobile devices. 🚀💫

Row grid setup. 🌐📐

We’ve discussed columns, but what about when you want your designs to be pixel-perfect, aligned flawlessly, and easily transferable to code by developers? This is where rows come in! Rows help align your components horizontally, making your design process even smoother. 🎉✨

Here’s the ideal row grid setup to ensure your designs are always on point:

1. Type: Choose “Top” to align your rows from the top of the frame.
2. Height: Set the height to 8px for a balanced and consistent design.
3. Gutter: Keep the gutter at 0px for a seamless and connected feel.
4. Offset: Use a 0px offset to maintain the clean and structured look of your design.
5. Count: Opt for a high number (like 800) to ensure that you have enough rows for longer frame or designs that require a lot of vertical space.

With this row grid setup, you can rest assured that your designs will always be pixel-perfect, well-aligned, and a breeze for developers to work with. Give it a go and witness the magic it brings to your design process! 🚀🌟

If you found this article helpful, attractive, useful and would like to support me, make sure to:

☑️ Follow me on Medium

👏 Clap for the story (50 claps) to help this article be featured

🔔 Follow Me: LinkedIn | Twitter

🎉 You made it to the end! But wait, there’s more! 🎉

Don’t miss out on our top-rated articles that will keep you inspired and motivated! 🚀 Check them out and continue your journey to greatness! 🌟

Remember, knowledge is power, and with every article, you’re one step closer to becoming a true expert! So, what are you waiting for? Let’s keep exploring! 🌍