Skip to main content
Solved

Responsive web page with autolayout


Marina_Klimi

Hello, all, my name is Marina.

I am a graphic designer lives in Greece.

I have also background in web design.

The last year  decoded to transit to UX/UI Design.

I have finished the Google course and started getting into deep learning of Figma.

I have started with a web site for an African NGO that is called KIRC.

I have watched plenty of videos and tried to practice in “auto layout” and figure out how I can create a responsive web page.

I realised that there must be two ways :

Either create frames for different devices or create frames and component with “auto layout”.

Can you help me to clear this in my mind and follow a clear pat?

Here is the link of my web page: 

https://www.figma.com/proto/teuNEmaEHMSHpSNIw03Kfx/KIRC?node-id=254-3350&t=hqI0fZMwJtzfLIc5-1

 

Have a nice day.

Marina

Best answer by Saquib Feroze

If You’ve Designed a Fully Responsive Frame Using Auto Layout:

  • It resizes for desktop, tablet, and mobile.

  • Spacing adjusts with percentage-based or dynamic values.

  • Elements reflow intelligently (like cards stacking, text wrapping).

  • It preserves proportions, shape, and hierarchy across screen sizes.

👉 Then you absolutely do not need to create multiple frames for different devices.

 

Focusing on:

  • Design efficiency

  • Scalability

  • Consistency

  • Saving time

This is what component-based, auto-layout-driven design systems (like Google’s Material Design or Shopify Polaris) rely on.

 

✅ When to Stick to Single Responsive Frame

Scenario Use One Responsive Design
Internal tools ✅ Yes
Dashboards / Web apps ✅ Yes
Email/newsletter templates ✅ Yes
Websites with minor layout changes ✅ Yes
Components and Design Systems ✅ Absolutely

 

You only need multiple sizes when the experience changes — not when the screen size does.

Since you've figured out how to make your layout fluid with auto layout, you're on the right path. There's no reason to duplicate work unless you're solving for a totally different user experience on a smaller screen.

View original

14 replies

sedatcakir
  • New Participant
  • 26 replies
  • May 13, 2025

Hello marina

Can you tell me what you want to do? I didn't quite understand you?


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 13, 2025

Hello, I do not know if I managed with auto layout to create a responsive design.

Is it possible to have a responsive desktop frame?

Shall I concentrate on the templates design and manage the responsiveness when I will move to my  web site in my webserver where I will use WP Elementor?

I hope I was clear enough.

Greetings

Marina


sedatcakir
  • New Participant
  • 26 replies
  • May 14, 2025

Hello again,

There are problems with using auto-layout. At this point, you should organize your components well and assign the auto-layout feature.


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 14, 2025

Thanks for your reply.

In order to understand there is problem with auto layout in my page?

I have watched plenty of videos before creating auto layout components.

Can you suggest me resources for responsive Figma web page?

Also how can I check the responsiveness of my Figma design?

Greetings 

Marina


sedatcakir
  • New Participant
  • 26 replies
  • May 15, 2025

Hi again,

There are many videos on youtube. You can definitely find videos that meet your needs here.

If you need support on a specific topic, I can help.


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 15, 2025

Thank you.

I will read again the resources and watch the video and come back.

Take care.

Marina 


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 16, 2025

Hello again I read the latest news of Figma 2025 and clear more the grid design system that is added to figma with the auto layout.

Having experience in web design tried to use the grid system to create responsive elements.

I tried to resize the frame and the most of the elements follow the size.

If you can also check it I will appreciate it.

Here is the link:

https://www.figma.com/proto/teuNEmaEHMSHpSNIw03Kfx/KIRC?page-id=423%3A4639&node-id=654-2986&viewport=-1602%2C-204%2C0.28&t=GTdBdSce3AG29dov-1&scaling=contain&content-scaling=responsive

 

Thanks

Marina


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 16, 2025

The name of the correct frame is Home-responsive


Saquib Feroze

If You’ve Designed a Fully Responsive Frame Using Auto Layout:

  • It resizes for desktop, tablet, and mobile.

  • Spacing adjusts with percentage-based or dynamic values.

  • Elements reflow intelligently (like cards stacking, text wrapping).

  • It preserves proportions, shape, and hierarchy across screen sizes.

👉 Then you absolutely do not need to create multiple frames for different devices.

 

Focusing on:

  • Design efficiency

  • Scalability

  • Consistency

  • Saving time

This is what component-based, auto-layout-driven design systems (like Google’s Material Design or Shopify Polaris) rely on.

 

✅ When to Stick to Single Responsive Frame

Scenario Use One Responsive Design
Internal tools ✅ Yes
Dashboards / Web apps ✅ Yes
Email/newsletter templates ✅ Yes
Websites with minor layout changes ✅ Yes
Components and Design Systems ✅ Absolutely

 

You only need multiple sizes when the experience changes — not when the screen size does.

Since you've figured out how to make your layout fluid with auto layout, you're on the right path. There's no reason to duplicate work unless you're solving for a totally different user experience on a smaller screen.


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 16, 2025

Thank you ever so much for all this inclusive information.

I will add it to my study guide and do another attempt for a responsive Figma frame.

Greetings

Marina


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 25, 2025

Hello again.

I have studied the latest Figma 2025 Grid system.

Try to refresh my memory on CSS grid and I tried and I made another frame.

Could you have a look and let me know what do you think and if this is responsive.

Greetings

Marina

https://www.figma.com/design/mFOJrxota11cCjahjBk4Gv/Mkli-Portfolio?node-id=73-484&t=3YACUTo11uNMNC1y-1

 


Viji Design

If you're exploring responsive web page design with auto layout, I highly recommend checking out the approach used by Viji Design. As a leading company offering web design in Malta, their team specializes in building clean, fully responsive websites that adapt seamlessly across devices using modern layout systems like Flexbox and CSS Grid.

Their design strategy focuses on mobile-first development, ensuring user experience is optimized from the smallest screen up. Viji Design combines aesthetic appeal with performance by using auto layout techniques that dynamically adjust content spacing, alignment, and component scaling—crucial for today’s diverse device landscape.

If you're aiming for a website that not only looks great but also performs flawlessly across all screen sizes, Viji Design is a solid example of how professional web design in Malta is done right.


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • May 29, 2025

Hello all and thank you for your replies but does not help me a lot.

I am a beginner and I would like to know if I got right the new grid system of Figma and created a responsive web elite.

I could not find something in .Viji Design this is a paid company does not have any resources.

Thanks anyway

Marina


Marina_Klimi
  • Author
  • New Participant
  • 9 replies
  • June 1, 2025
Marina_Klimi wrote:

Hello I would like to clear out that my above answer was not for all of you who replied but mainly for Viji Design.

Sorry if I caused any misunderstanding but the answers of  

sedatcakir and 

Saquib Feroze helped me a lot.

Greetings

Marina

 

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings