Regarding mobile responsive design

[Daksh_Kaushik]

Hi
I am new in Figma. I made onw web design for desktop now I want to make mobile responsive webdesign. So, I want to know what basic pixel size I have to take for basic mobile design (360x640) or (360x800).

[Ahnaf_Ramadhan]

Hello,
I have created several mobile UI design in Android Large size(360x800) and I think its the correct size for general Android Device size. But, you have to place the status bar to make it more realistic size.
Thankyou! Hope it help.

[Harry_Willson]

It sounds like you’re diving into the world of mobile responsive design in Figma—exciting! When transitioning from desktop to mobile design, getting the dimensions right is crucial for a good user experience. Here are a few key points to consider:

Key Considerations for Mobile Design:

1. Choosing the Right Pixel Dimensions: For most modern Android devices, a canvas size of 360x800 pixels is a solid choice. This dimension represents a typical view for many smartphones, balancing usability and visual clarity. Another common option is 360x640 pixels, which is ideal for smaller screens and offers a good starting point if you’re targeting a broader range of devices.
2. Accounting for the Status Bar: When designing for mobile, remember to account for the status bar at the top of the screen. This will give your design a more realistic look and feel. It’s typically about 24 pixels in height, so make sure to leave space for it in your design layout to avoid any overlap or crowding of elements.
3. Design for Flexibility: Mobile devices come in various shapes and sizes. While 360x800 is a great starting point, consider using responsive design techniques to ensure your layout adapts well to different screen sizes. Figma’s constraints and Auto Layout features can help you create designs that adjust dynamically.
4. Testing Across Devices: Always test your designs on multiple device screen sizes to see how they look and function. Tools like Figma’s device preview or using your prototype on actual devices can provide insight into how your design behaves in real-world scenarios.
5. Guidelines and Best Practices: Keep in mind platform-specific design guidelines like Google’s Material Design for Android or Apple’s Human Interface Guidelines for iOS. These resources can help you design more intuitive and platform-consistent UIs.

By considering these points, you’ll be better equipped to create a responsive mobile design that looks great and functions well across a variety of devices. Good luck, and happy designing!

[Harry_Willson]

More learning sources:

YouTube - Responsive Design in Figma
Apple Human Interface Guidelines
Apple Human Interface Guidelines - Status Bar

[Lawrence_Bruce]

@Harry_Willson

It sounds like you’re diving into the world of mobile responsive design in Figma—exciting! When transitioning from desktop to mobile design, getting the dimensions right is crucial for a good user experience. Here are a few key points to consider:

Key Considerations for Mobile Design:

1. Choosing the Right Pixel Dimensions: For most modern Android devices, a canvas size of 360x800 pixels is a solid choice. This dimension represents a typical view for many smartphones, balancing usability and visual clarity. Another common option is 360x640 pixels, which is ideal for smaller screens and offers a good starting point if you’re targeting a broader range of devices.
2. Accounting for the Status Bar: When designing for mobile, remember to account for the status bar at the top of the screen. This will give your design a more realistic look and feel. It’s typically about 24 pixels in height, so make sure to leave space for it in your design layout to avoid any overlap or crowding of elements.
3. Design for Flexibility: Mobile devices come in various shapes and sizes. While 360x800 is a great starting point, consider using responsive design techniques to ensure your layout adapts well to different screen sizes. Figma’s constraints and Auto Layout features can help you create designs that adjust dynamically.
4. Testing Across Devices: Always test your designs on multiple device screen sizes to see how they look and function. Tools like Figma’s device preview or using your prototype on actual devices can provide insight into how your design behaves in real-world scenarios.
5. Guidelines and Best Practices: Keep in mind platform-specific design guidelines like Google’s Material Design for Android or Apple’s Human Interface Guidelines for iOS. These resources can help you design more intuitive and platform-consistent UIs.

By considering these points, you’ll be better equipped to create a responsive mobile design that looks great and functions well across a variety of devices. Good luck, and happy designing!

Thanks bro. its really helpful for me.