Non responsive Frame

[radiant relic]

I just got into Figma yesterday and I was designing a UI. While trying to make it responsive, I ran through an issue in which the logo (which i converted into frame) overlapped with the header texts. How can this be fixed?

[spice jungle]

Hey @radiant relic , could you show what you did ? Were you sizing it down so much that there was no space between the two left?

[radiant relic]

I dont have the perms to send ss for some reason. And no, i dont think that was the case

[spice jungle]

please get verified in #verification to send images

or files

[radiant relic]

Oh i got it verified but im off my workplace rn. Ill send it tmrw if u dont mind

[radiant relic]

hi @spice jungle this is what it looks like

and if i try to stretch it down, this is what happens

[spice jungle]

is the second one longer than?

you probably have a bottom constrain on the text in that case

[radiant relic]

longer than wha?

[radiant relic]

lemme check rq

[spice jungle]

like the second image has abigger height than the frame on the first one

since you said stretching it down -- wanted to check i thats what you meant

[radiant relic]

the second image i sent is of lower resolution

[spice jungle]

oh or are you stretching the text down what you meant

[radiant relic]

the "Skip for now" has a constraint of "scale" on both x and y axis

[radiant relic]

i meant i stretched down the whole frame

[spice jungle]

would it be possible for you to send a video of stretching down?

[radiant relic]

sure just gimme few mins

here

@spice jungle

[spice jungle]

And what exactly do you want for it to happen? everything to get smaller with it or keeping the same size but moving?

[radiant relic]

i want it to be responsive. yes, everything to get smaller as i resize down the frame

[spice jungle]

then technically you would probably want all things to have scale on

oh but yeah with texts that doesnt work that way

[radiant relic]

u mean the constraints?

[spice jungle]

yeah

technically speaking, i dont think it works like that when coding it

i guess one question is why are you doing this in a way

[radiant relic]

so the frame resolution which im working on is for iphone 13 mini. i want the whole ui to be responsive to all iphones. and i just assumed thats how ur supposed to do it?

sorry im just really new to it and the articles and youtube videos on the internet are too vast for me to understand everything precisely

[spice jungle]

so one thing i would look at is what is the smallest iphone you would wanna support for

and what is the size of that

[radiant relic]

so lets say iphone 13 mini for now

[spice jungle]

then second, you likely dont wanna / need to change the size of things but just make sure they keep their space correctly

and for that you just need to use eg autolayout and constrains right

[radiant relic]

mhm

[spice jungle]

i personally wouldnt try to resize things

[radiant relic]

i mean yeah

[radiant relic]

i used autolayout for "LATECH World's fastest VPN" text and then constraints on all remaining texts and images

[spice jungle]

or for illustrations, you can resize if you wanna, but most of the things should come from constrains and autolayout most probably

i would use autolayout on most things like the whole frame itself

but constrains could work too

i guess it depends on how you wanna position these things

[radiant relic]

sorry for late reply, my boss was here

[radiant relic]

thats what im tryna do

but i guess i got the answer that i needed

[spice jungle]

https://www.figma.com/design/hDGJf6dMPUZC8vF8cm13S7/Untitled?node-id=0-1&t=sht5bvvVleYkrfC8-1

here are some examples

[radiant relic]

oh wow wtf

thats exactly what i needed

thank you sm

[spice jungle]

i would suggest just trying to learn auto layout and how that works!

[radiant relic]

is there any article about autolayout and constraints which could be super helpful for someone like me?

[spice jungle]

its good for responsiveness 🙂

[radiant relic]

mhm thats my next step i guess

[spice jungle]

if you learn from more hands on tutorial kind of things, you can try figma's official playground https://www.figma.com/community/file/784448220678228461/figma-auto-layout-playground

for what i sent you i only used auto layout, and no constrains involved

[radiant relic]

woah

[spice jungle]

but you probably wanna try learning constrains also and just see how that can help you, sometimes that is more apprpriate to do but not always

[radiant relic]

mhm

alright sure

@spice jungle so in ur draft, u basically convereted every texts and vectors into frames and used autolayout right?

[spice jungle]

well texts are still just texts

[radiant relic]

oh wait i got it

a frame which contains text and ellipse

[spice jungle]

basically with nested auto layouts you are just grouping things together that should be equal space from each other

from smallest to bigger

so eg you title and subtext are a smaller piece, so thats one auto layout

they are maybe 4px way from each other

but you want the image to be idk 24 px from them but the button is maybe is on the bottom

so then the 2 text autolayout is combined with the image

because thats one distance

and then the button and the text is also another smalller distance so thats another auto layout

but for the second example, i just put the frame with the texts and the image and the frame with the buttons all equal distanced

so i didnt have to put the texts and the image together in a separate auto layout

[radiant relic]

Wait what?

So according to u

[spice jungle]

2 text in one auto layouted frame

and that is combined with the image in another

[radiant relic]

Oh this

Oh yeah i got it

[spice jungle]

yeah i know you knew it was like that, im just explaining why 😄

[radiant relic]

mhmhm i see

so like

i feel like i understood what ur trying to say

so according to u

i can also just make one autolayout for the header and subtext and second autolayout for the ellipse. then the third autolayout for button and text

right?

will that space out the header and subtext and ellipse equally?

[spice jungle]

okay, so i think you kinda need to just understand what auto layout means, so im gonna try to give an quick explanation

there is a parent frame

and the parent frame has auto layout on it. It has child elements in it that can be anything

text, image, vector, another frame, anything

but whatever you put in the parent frame, those immediate children will be all equally spaced

[radiant relic]

oh

[spice jungle]

so, in the first one that you see here

it is

big frame has:

• frame that contains another frame and an image. and the inside frame has 2 texts. I did this because I did not want the header and the subtext and the image to be equally spaced (I put less space between the header and the subtext)

• and another frame that contains a button and the other text

for this one, the big frame has 3 things in it:

• a frame that has the header and subheader in it

• the circle

• and the frame that contains a button and the other text

because I just put equal space between all 3 of these, but wanted smaller space between the header and the text, and the button and the other text

Now, if you want qual space between the header, subheader, and image, you just don't need to put the header and the subheader in a separate frame

There are also other reasons why you might want nested auto layouted frames

but in your particular case here, it is mostly for spacing

[radiant relic]

i removed the frame and resized it and the output is same as when u put frame for the title and subtext

" I did this because I did not want the header and the subtext and the image to be equally spaced" i quite dont get this. isnt it exactly opposite i.e. u made a frame so that title and subtext could be equally spaced

[spice jungle]

the left one is where they are not in a frame

you can see that the spacing is different

[radiant relic]

oh right

dam that was hard to notice

[spice jungle]

i added the headr and the subtext in one frame because i wanted it to have smaller space than the subtext and the circle

[radiant relic]

ehh? 😭

[spice jungle]

sorry missed on word from it

[radiant relic]

nono i understood that u meant frame there but i didnt get the reason

[spice jungle]

you have 3 things:

header, subtext, circle

I personally wanted the header and the subtext to have eg 4px

and the subtext and circle to have 24px

if I just had all of them in one frame together, then i couldnt have 2 different space

so i put the header and subtext in one frame also, so i could have the gap there to be less

[radiant relic]

ohhh

[spice jungle]

now you could ask, why not grouping the subtext and the circle together?

and thats because i see the header and the subtext to be one thing to go together

[radiant relic]

mhm right

i think i got the hang of it now

does the constraint also get the job done for me for this particular work (given that i wont add or remove any characters in the texts)

[spice jungle]

for me it feels a bit less convenient to do

you would have to figure out based on what you want things to move

eg everything should shift based on the center point of the overall frame

or the bottom or top distance

[radiant relic]

oh

[spice jungle]

and tbh just moving things manually to be in the right spot and right space away is a bit more work than just having auto layout to position things immediately imo

and for it to make sure all your spacings are more correct

[radiant relic]

so auto layout should be my go to instead of constraints

then whats the use of constraints if auto layout can do what is needed from constraints?

[spice jungle]

i use it if something should grow in different ways, mostly if growing based on the top and bottom points of a frame

or if you think about pricing containers

sometmes they have like a 30% off little sign

that is justkind of randomly there so for that you would need to make it absolute positioned within an auto layout and probably use constrains

[radiant relic]

"you would need to make it absolute positioned within an auto layout " whats that?

[spice jungle]

hhere is one example (same file)

this frame has auto layout on it

but as you can see the red thing is not following it

but it is still in it

you can do that by clicking that thing on the top right

that makes it absolute positioned, basically overriding what auto layout tells it to do

[radiant relic]

oh ohh

got it

so if im about to make a hero page for tablet iphone and desktop

my first thing to do would be to think of what frames id need in it right?

and then use autolayout in those frames accordingly as per the spacing i need in each components

(and use constraints if i want an absolute position)

[spice jungle]

or here you can see it is also absolute positioned and has a right constrain

yeah you kinda just wanan figure out the layout structure and spacing stuff

what are the smallest units

and keep going from there

you can find all of these in the file i shared with you if you need to look at any of it

theres also much more to auto layout and reasons why you need to combine things into smaller frames

so i would suggest trying to learn all its features

spacing is just one thing as i mentioned before

[radiant relic]

alright

[radiant relic]

and what abt the size? the position stays absolute but what abt the size? does it also remain absolute?

[radiant relic]

why is it that we prefer from small to larger ones

[spice jungle]

size depends on your constrains

eg if you do scale, some things might scale

but eg font size wont but the text box itself could

[radiant relic]

and u mentioned before too to first consider for which smallest device id want the website to run on

[radiant relic]

ahh

i see

[spice jungle]

so eg auto layout also influences the directions of things inside

lets say you wanna make something like this

and you dont have any auto layout on it yet

and then you put the auto layout on the out most one

it might end up putting everything in a column

all equally spaced

[radiant relic]

in a column?!

[spice jungle]

or wrapped, still all equally spaced

because it can either be row, column, or wrap

either way you would need to then select the avatar and the name and then put it in another auto layout and the make it into a row

[radiant relic]

oh ohh

[spice jungle]

if it did wrap, then you would have to do that and also change the overall one into a column

[radiant relic]

and then another autolayout for captions if im correct

[spice jungle]

no for the caption you dont need a separate one

[radiant relic]

why not?

[spice jungle]

this is all

because the overall one already combines the row and the caption together

anyway, if this was even more complex and figma made all of them as wrap or a column or a row when you dont want that

it will be a bit harder to remember to where to fix and how

another thing is that you also probably want to use components often which are smaller units of things

so just in general working from smaller units to bigger is common

[radiant relic]

i guess i first need to learn more abt the wrap column row hug fill content and all of that

[spice jungle]

yeah and i mean most of this as you will use, you will see what work best for you

maybe you will wanna start by the outmost one and maybe you will find it annoying too

maybe you wont and find it easier

there is not necessarily a good or bad way to do and you can figure out how to work with it best for you

[radiant relic]

right.. sure

alright ill work on that then

is there any other advice u could give?

[spice jungle]

and i would also just suggest looking into components

and component sets probably

which also could show you why going from smaller to bigger makes more sense in some ways

[radiant relic]

component sets.. u mean frames or am i missing smthg

[spice jungle]

no those are different things

[radiant relic]

oh

so like

a group?

[spice jungle]

no

component set is a set of components

a component is a type of frame i guess

eg think of a button. In your app you probably want the buttons to look the same

you dont wanna design it every single time

so you wanna define it as a component so you could just "call" that

and if you change the main component, all its instances would be updated

[radiant relic]

oh ohhh

[spice jungle]

because eg lets say you want rounded corners right now, but maybe tomorrow you wont. so without components you would have to change the buttons everywhere one by one

whereas if you defined it in one place, then you could update it immediately

a component set is a bunch of component together where you would wanna switch between them easily or that are kinda similar

[radiant relic]

right

[spice jungle]

eg you might have a filled button, but might also have an outlined version

[radiant relic]

got it

[spice jungle]

you usually dont wanna use rectangles and groups in ui design

and just wanna do frames

[radiant relic]

sure ill keep that in mind

@spice jungle so currently im thinking of making a hero page for desktop.
what ive done is made several frames on a parent frame and id add components on each frame accordingly. am i doing it the right way or no?

[spice jungle]

i cant really tell without seeing what you actually try to make

i wouldnt just make frames and components with no reason

[radiant relic]

oh

what i thought was
top frame for navigation bar
mid frame for main content
bottom frame for footer maybe

[spice jungle]

and if i were you i would look into more on what components are exactly

not sure if you understand it exactly yet

[radiant relic]

i probably dont

[spice jungle]

sure then

again, just try to work with auto layout and the other things and learning them and see how it works best for you

i might wouldnt do in the same order as you are doing it, but there is no correct way and i think learning by doing it is the best

[radiant relic]

alright got it

thank you

[radiant relic]

@spice jungle hi, could u possibly suggest what could be done here to enhance the website

[spice jungle]

as i said before i would not use groups and rectangles for ui design

[radiant relic]

what could be done then? im like clueless

[spice jungle]

just using frames

[radiant relic]

i looked at some videos which used just rectangle

[radiant relic]

oh

i was thinking of

[spice jungle]

you should read up on the difference between frames and groups

[radiant relic]

converting them into frame at the end

[spice jungle]

rectangle is a vector shape

[spice jungle]

there are many videos online that are not doing best practices

just because someone is doing it doesnt mean they necessarily using the tool right

[radiant relic]

fair enough

[spice jungle]

you can also use autolayout on it etc

again, i would try to read on frames vs groups / rectangles

components

auto layout

and then try using them

[radiant relic]

okay this might sound dumb but

how about i just convert the rectangle into frame

and then add other elements inside of it

like this

[spice jungle]

that is still just groups

you just put two groups into a frame

[radiant relic]

technically that makes it a frame and i can treat it like a frame??

[spice jungle]

so what does that mean to you that you can treat it like a frame

why are you putting it in like that, why framing those two together

the things inside a group will still be working as something in a group

again, i would suggest reading about the difference between frames and groups and rectangles

[radiant relic]

alright then, my bad

[radiant relic]

ill just go thru these articles first

[radiant relic]

@spice jungle is there any way i can reposition this image without changing the frame size? (i filled the frame with an image)

[spice jungle]

if you set the fill bg to crop, you can move it

usually though i would just put that in as an image and move it within a frame. I guess it depends on if on the code side you wanna do more of a background fill or more like a positioned image inside.

[radiant relic]

wait whaa i didnt get the first sentence

[spice jungle]

sorry meant within a frame

[spice jungle]

but again, depends on how it is meant to be coded in a way probably also.

[radiant relic]

ah got it

[radiant relic]

yeah ill work on that coding side later on

[spice jungle]

i dont mean that you need to code it, but lots of ways you use figma and design things correlates with code

so when you design, its not just about the visual, but when you put something in certain ways, or if something has multiple ways to do things, one way might be more appropriate than the rest

eg here, you could add in the image 2 ways and move them 2 ways, but one might be more appropriate way of doing it than another depending on use case.

[radiant relic]

uh huh, i got what u meant. ill try to use the optimal way to do things the best i can 😁

@spice jungle sorry to keep bothering u but do the layers look good now?

[spice jungle]

more things could be framed together tbh

& auto layouted

[radiant relic]

yeah i also felt so

hmm actually ill try to frame and auto layout them tmrw

[radiant relic]

hey @spice jungle quick question. say i want a website that is responsive for all of these devices. does that mean i would have to start designing from the lowest resolution device and work accordingly?