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

    sedatcakir
    sedatcakir
    Active Member
    May 13, 2025

    Hello marina

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

    Marina_Klimi
    Marina_KlimiAuthor
    New Participant
    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
    sedatcakir
    Active Member
    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
      Marina_KlimiAuthor
      New Participant
      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
      sedatcakir
      Active Member
      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
        Marina_KlimiAuthor
        New Participant
        May 15, 2025

        Thank you.

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

        Take care.

        Marina 

        Marina_Klimi
        Marina_KlimiAuthor
        New Participant
        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:

         

        Thanks

        Marina

        Marina_Klimi
        Marina_KlimiAuthor
        New Participant
        May 16, 2025

        The name of the correct frame is Home-responsive

        Saquib Feroze
        Saquib FerozeSolution
        New Member
        May 16, 2025

        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
          Marina_KlimiAuthor
          New Participant
          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

          Show more replies
          Terms & ConditionsAccessibility statement