hello designers and welcome back to another
affinity designer tutorial today i'm going to show you how to use the constraints panel
to help you create ui elements and a mock-up website the constraints panel will allow you
to selectively control object scaling and anchoring across different sized artboards
step by step let's begin with the first one we are in affinity designer and to kick things
off i want to talk about the constraints panel now this is a tool we'll be using throughout this
tutorial to achieve our goals such as ui mockups elements for websites things like that before we
go any further let's find where that tool is in affinity designer so i'll press tab on my keyboard
and i'll go up to view studio and down here you see it says constraints click on that and it pops
up there it is you can drag it and dock it down here if you like so there it is let's continue
okay so the constraints panel this is taken from affinity designer's website so there's no beating
around the bush straight to the point i'm going to read a bit of it the constraints panel lets you
control how objects are positioned and scaled when presented on different artboards and different
size layouts okay that's simple enough a child object can be prevented from being scaled when
resizing its parent and be anchored to its parent in different ways so at this point you're probably
thinking like if you're not used to any of this what is a parent any child what are they talking
about i'll get to that in a second it says this ensures that designs can be presented in different
layouts quickly and easily the feature is perfect for designing ui mockups that's user interface by
the way for example to envisage how dialogues can be resized without affecting the position of every
dialogue control using constraints gives you the freedom to design without worrying that the design
rework will be adversely affected by unwanted object rescaling by controlling selectively which
object will and won't be scaled and anchored your design will always respond correctly to scaling
okay some of that's probably quite confusing if you've never done any of this before so let's
break it down visually what are they talking about let's have a look at the tool so it's saying
this is the parent this one here this outside line that's the parent also known as a container and
inside of that there is another box and that is the child object uh also known as the like
the nested content because it's within that square and then you've got other things here so
this is saying these broken lines are anchors and in the center here you've got these arrows going
up and down they're scaling and down here you've got min and max fit which locks aspect ratio
we'll cover all of that so parent child object what does that mean in terms of like design well
let's break it down way easier so if we think of this little button here let me double tap
that little button there the little pill shape that's going to be the parent and then inside of
that we have the word play that is going to be the child object so the pill is the parent
here and the child object will be this box inside easy enough so that's one way of doing it
this way here so if just designing a play button that's what that would refer to but you can also
have this button inside of a box it might be like that on a game a website etc so let's
think of the button now as the child layer the child object the nested content and
this box around it is now the parent object so you see you can keep nesting things within
other things and then it goes on and on and can get really confusing let's just have a look at how
all of this works on the next artboard so i have a couple of different artboards here there's one
of them in this section i've prepared a selection of buttons and using the constraints panel i've
applied different settings to each and we will be playing around with each of these buttons to
see how they perform when we start manipulating the shape so if we zoom in horizontal and vertical
scaling is first and you can see from the screen grab on the left that on this particular
one vertical and horizontal scaling is on and that's applied to our child layer in here not
our parent layer let's grab our constraints panel these are the standard settings on the constraints
panel so i've not really done anything here so let's see how it performs
so i'll grab the group and i will stretch it out to see what happens as
you can see it's being stretched out including the word play let's grab it down here and you can
still see that the word is being stretched out if i drag out from the corner you can see the play
is scaling up with the pill shape okay moving on to the next one we only have horizontal scaling on
and in my constraints panel i will just double tap on play and you can see it's been applied like
so so let's see what happens with this one so if i drag out stretch it out you can see
play is still being stretched out but if i drag down you can see the pill shape is getting bigger
but the play word is not being stretched out so vertical scaling is off on this one
moving on vertical is on you can see it will just be the opposite of what we've just
done so if i drag out play is in proportion and not changing but if i drag down it will
stretch out okay looking at the next one on this one vertical and horizontal scaling
are turned off so let's see how it performs so when i drag it out play is in
proportion and when i drag that up play is still in proportion and i drag
from the corner it still remains in the middle okay let's try using an anchor so let's
zoom in and on this word here that says search if i go on the child layer you can see in our
constraints that the anchor has been applied to the left hand side of the child layer
just like it is in the screenshot over there so let me grab the shape and i will just drag
out to see what happens okay as you can see the search word is not being stretched out if i grab
it from the bottom and drag down the search word is still in proportion and if i drag out from the
corner like this you can see it's being anchored to the left hand side when i go down it's kind of
still in the middle here so let's see what happens when we apply two anchors so on this one here
you can see it's anchored on the top and left so now if i click and drag out drag out the same
thing happens drag it down it's staying at the top now so if i drag from the corner you can see that
it's remaining at the top left if i drag from the other corner you can see it is just staying up
there top left so it's been anchored in place in this example we're going to be looking at
anchor and scale but a slightly different way so before our pill shape that was the parent layer
and the word was the child layer in this example the whole play button will be the child layer and
this big box around it will be the parent layer so you can see when i click on the child layer the
button i've anchored it to the top and the left and you can see that down here these are the ones
that have been applied and on the parent layer i'm not going to be playing around with that it
will just be on the default so let's see how this performs so if i drag that out nothing's really
happening nothing's being stretched everything's staying in proportion and this one same you can't
really tell but if i grab it from the top corner here you can see that the play button is being
anchored to the top left and it's all staying in proportion okay that's enough of these examples
let's go ahead and do it ourselves from scratch so here's a mock-up of a tablet and it's got one
of my tutorials on there we're going to make a play button and a search bar using everything
we've learned just now so first things first let's grab the rectangular tool and i'll kind of
make a square button so i'll just click and drag out maybe somewhere like that just press v the
move tool and i'll move it to the center somewhere i'll just chuck it there and next thing we're
going to create the word play so artistic text tool click and we'll type in play okay now i'll
grab the move tool and i'll just center it in that box you see my snapping is turned on up there
so now i'll grab both of them and just center them to the document let's make this box a little bit
smaller so i'll just press command and drag from one side to make it go like that okay so now what
we're going to have to do is go to layers you see players there and a rectangle just hold down shift
and select the other one so they're both selected press command g that's to group them and now that
they're grouped let's go ahead and double tap so we can select play this will be our child layer
and with this one we're going to take off vertical scaling and horizontal scaling and we want it to
kind of remain in the middle here should it be manipulated slightly so if i grab the group it
says constraints group the one we've just made and if i pull it out you'll see that play is not
being distorted and it's remaining in the center excellent so that play button is
done let's create the next one so again grab the rectangular
tool and just click and drag out let's make a pretty long one here and let's
change the color of it to some kind of green color and this one i'm going to have rounded edges
so i'm going to go up here and click on the corner tool click on that and i'm just going
to click and drag over all of these nodes now i'm going to click one of the nodes and
drag in so the corners are slightly rounded well totally rounded and let go now let's
make the next word so this one will be search that is a pretty big search there so let's make it
slightly smaller and i want this to kind of remain over here in the left hand side and maybe i'll
make that black okay so let's select both of them you can either do this from the layers panel or
from here so i'm just going to keep my finger on shift and select the green shape so both of them
selected press command g they're now grouped you can see here it's now grouped and again we're
going to double tap to go into search and i want this one to be anchored to the left hand side so
whether this is put on a big computer screen or a mobile phone i always want the search to be on the
left hand side so i've anchored it to the left i also want to take off scaling on this word because
i don't want it to be distorted and that's it let's have a look at what happens so i'll grab
the group and let's say if i move it around it will always be anchored to the left and if i do
this it's not going to distort the search word so we have two buttons now okay let's take it
up a notch so i've created an artboard which is 16 by 9 aspect ratio the kind of normal for a
monitor and i've also got a couple other artboards this one is just one of the defaults it says
iphone xs and this one says ipad 11 inch so i've got a couple of different artboards here ready to
go so what we're going to do we're going to create a search bar in this one and then we're going to
set up the constraints on it and then from there we'll be able to copy and paste to each of these
without making any changes it will automatically fit this document or this artboard so let's
go ahead and do that so here i've got a strip this will be our kind of background so let's
just drag that up to where we want it to be and the next thing this is our search bar so i'll
drag that up as well kind of center it and here's our search word i'll drag that in to where i
kind of want it to be on the left hand side now that we have them all let's select all of them
so hold down shift search is already selected so let's select light green bar and let's select the
dark green background so they're all selected now you can see in the layers panel there they
are let's press command g to group them and now they're all grouped so from this point i'm
going to double tap so i can get into the search and we're going to set up the constraints for this
so like we did before i don't want this to stretch or squash or anything so i'm going to take both
scalings off vertical and horizontal and i want this search to be anchored to the left-hand side
so i'm going to click the left anchor okay that bit is done next the search bar so with the search
bar selected what i want to do with this one is i want it to be anchored to the left top and the
right so whether this page is being squeezed into like an iphone size or ipad size i want it to
retain its shape and i don't want it to be skewed in any way so i will turn off the vertical and
horizontal constraints so it keeps its proportions okay moving on to the background here just
make sure that when you select the background this is like the main shape when you group things
together it will generally take the biggest shape and you see down here we have our
search word we have our search bar then we have the background here you don't want to
change this one you want to change the constraints group because this is the biggest shape here
so with that selected we also want to take off the constraints vertical horizontal and we want to
anchor left top and right so let's see how that's worked out grab the side and i'll just push
it in like that okay that seems to be working and the next thing we're going to do is play
around with the actual art board so the 16 by nine so i've got that selected in the layers
panel and i'll just click and drag it like this and it just seems to be working whether i drag
from that side or that side so the next thing we want to do now that we've created it this is
our group we want to be able to paste that into the iphone and the ipad artboards so as it's
selected i'll just press command c to copy i'll click on the iphone artboard and i'll
press command v and you can see it's pasted in and it's kind of fit the iphone artboard and
we'll do the same for the ipad command v again and you can see it's automatically
resized to the shape of that artboard so that's really cool you could do that
with lots of elements that you're creating here's some examples of the search bar we made
using different settings on the constraints panel okay let's move it up another notch okay in this
example we're going to make a mock-up website i've prepared all the elements on the side
here i haven't added any constraints to them yet and on the left is our artboard where
we'll be putting them so it's all a bit of drag and drop at this point but it's just
to show you how to set it up and let's begin so we've got our header here as you see in the
layers panel i'm just going to drag and drop that over there i have snapping turned on
which is why it's snapping in so nicely and the next thing we're going to do is
grab our logo and also we're going to grab our home about projects and contact so i'm just
going to drag that over and it snapped into place yeah it looks about right and the next thing we're
going to do is drag in our photo so click and drag that in like that and that's i've already cropped
it so that's all good and i'll grab this quote and chuck it in the middle also
and then we will add in our footer and also the company name i'll chuck that in
the middle so it snaps so it's all in place now so the first thing we're going to do is
we're going to start grouping them together so this top section here so it's already
selected i'll keep my finger on shift and select the logo home about project and contact
they're all selected now as you can see in the layers panel i'll press command g to group them
so that's our first group so now i will start playing around with the constraints so like we
did before go in this will be our child layer so for this i don't want it to scale i don't
want it to squash or anything like that so i'll just take off vertical and horizontal scaling
and i want it to stay on the left hand side just i'll keep it on the left hand side like
that so it's anchored to the left go over to the right hand side and i'll select all of these
i'm keeping hold of shift right now by the way and i'll also take off scaling and i'll anchor
it to the right hand side okay for the next one i will select the group which is the big square
here and for this one i will take off scaling and i will select anchor left anchor top anchor
right okay that is done let's go and have a look at what it will do when we start manipulating the
artboard so i'll click and drag around so you can see how the other ones haven't been affected yet
because we haven't applied anything so that's working pretty well okay so the next thing
i will do is the footer so with the footer selected i'll also select the company logo and
i'll press command g again we've made a new group again double tap get into the company logo and we
don't want this to squash either so i'll click off of the scaling options and i won't bother clicking
anything else it will just kind of stay in the middle and for the big box the parent layer i'm
going to take off scaling also and i'm going to anchor it to the left bottom and right so
now let's have a look at how it performs okay that's doing everything we want it to
do excellent moving on to this text here you can see that there's this blue box around
it and i actually created this using the frame text tool so if you long press on that you can
either use artistic text tool or frame text tool that frame basically allows me to create this
frame around it so if i ever wanted to resize after typing in there see it will resize like that
so i've got that one selected and before we start playing around with the constraints let me just go
up and show you about minimum fit and maximum fit do you remember that uh keep proportions so let's
read about what affinity has to say about this one locking aspect ratio to prevent a child losing
its aspect ratio when its parent is scaled disproportionately you can set it min fit max
fit so minimum fit when the parent object is resized disproportionately the child object may
scale so it always fits within its parent object if unanchored use on text to
ensure it always fully displays so we're going to do that so here it is i'm
not going to change the constraints scaling vertical or horizontal but i am
going to click minimum fit here so there we go that's selected so now let's
grab our artboard and see how that performs so you can see now it is let's say if it
was a phone or something smaller it is scaling nicely i potentially i
could bring it up a little bit more and let's try that yeah that works a little
bit better now and moving on to the photo here so the photo will be using max fit and
we'll just read what affinity says about that max fit when the parent object is resized
disproportionately the child object may scale the child object can become bigger than its
parent object potentially clipping content from view using a and then blah blah so let's go ahead
and try that uh i've got it selected let's leave that scaling on and i'll click on max fit and now
let's grab the artboard and see what happens okay that when i drag down there's like a white line
up there and i don't really want that so but it is it is um zooming in and kind of clipping some of
the picture away so i'm gonna anchor that picture to the top so this picture will be anchored
to whatever's above it so i'm going to click on that and now we'll have a look again so i'm
on the artboard moving around yeah when i drag down now it's showing this white section down
here potentially if you're scrolling let's say on a website more content will be shown underneath
there maybe a paragraph etc but we're just doing the home page very simple web page today so that
works well obviously you don't have to have it like that for the photo if you didn't want that we
go to the photo again and let's take off scaling and just take everything off and just anchor it
to the top let's see what happens when we do that as we had it that's that's 16×9 like a normal
monitor if it was going to be let's say on a tablet maybe it'd be a bit less than that
and on a phone it'd be a bit more like that obviously we could sort out this
paragraph here a little bit better reshape that or maybe anchor it to the top but
remember it said don't anchor it so let's uh go ahead and anchor it anyway so i'm going to click
on i'm going to keep it in the middle actually and i'll anchor it to the top
let's see what happens now oh there we go that's much better there
we go we've got our fake website thanks a lot for watching if you found that tutorial
useful leave me a comment and if you haven't already subscribed go and do that also i have
many other tutorials for you to check out so go ahead and click on my channel and
browse okay see you on the next one
