Skip to main content
Marina_Klimi
Marina_Klimi
New Participant
May 13, 2025
Solved

Responsive web page with autolayout

  • May 13, 2025
  • 15 replies
  • 895 views

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: 

 

Have a nice day.

Marina

    This topic has been closed for replies.
    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.

    15 replies

    Show previous replies
    Marina_Klimi
    Marina_KlimiAuthor
    New Participant
    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

     

    Viji Design
    Viji Design
    New Member
    May 26, 2025

    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
    Marina_KlimiAuthor
    New Participant
    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
    Marina_KlimiAuthor
    New Participant
    June 1, 2025

    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

     

     

    Shobhit Aggarwal
    Shobhit Aggarwal
    New Member
    July 9, 2025

    If you're working on a responsive web page with autolayout, it's essential to have a solid development foundation that ensures your layout adapts smoothly across different screen sizes and devices. For those who may not want to build everything from scratch or need professional help, you might want to explore companies that specialize in responsive website development in Chicago.

    One such company is Blackbull Technosoft. They offer responsive web solutions that use modern layout techniques like Flexbox, CSS Grid, and component-based design to ensure fluidity and performance across all platforms. Their experience in mobile-first development and performance optimization could be particularly helpful if your project requires a strong, scalable layout system.

    Responsive autolayout isn’t just about making things fit—it’s about making sure the experience is seamless, and teams like theirs seem to prioritize that well.

    Terms & ConditionsAccessibility statement