< Return to Video

Figma Design for beginners: Constraints fundamentals

  • 0:01 - 0:04
    [Music]
  • 0:04 - 0:07
    Constraints are used on child layers
  • 0:07 - 0:12
    to determine how they respond when their parent frame is resized
  • 0:12 - 0:16
    This is especially useful when designing across different devices
  • 0:16 - 0:21
    to make sure designs respond and adapt to different screens
  • 0:21 - 0:23
    You can use it to make sure
  • 0:23 - 0:25
    a sidebar always spans the height of an interface
  • 0:25 - 0:31
    or a button always stays anchored to the bottom right of the screen
  • 0:31 - 0:35
    Constraints can be applied to any child layer
  • 0:35 - 0:39
    as long as its parent frame doesn't have auto layout applied
  • 0:39 - 0:41
    When you select a child layer
  • 0:41 - 0:43
    you can find its constraint settings
  • 0:43 - 0:47
    in the position section of the right sidebar
  • 0:47 - 0:49
    Here you'll find
  • 0:49 - 0:53
    horizontal and vertical constraints
  • 0:53 - 0:58
    by default constraints are set to top and left
  • 0:58 - 1:01
    which means the layer will stay in the same position
  • 1:01 - 1:04
    relative to the top left corner of its parent frame
  • 1:04 - 1:08
    When we resize the parent
  • 1:08 - 1:09
    you'll see this reflected
  • 1:09 - 1:13
    by the blue dotted lines on the canvas
  • 1:13 - 1:15
    As an example say
  • 1:15 - 1:17
    we have a card asset
  • 1:17 - 1:18
    with a label at the bottom
  • 1:18 - 1:21
    that uses the default constraint settings
  • 1:21 - 1:23
    This means when we resize the card
  • 1:23 - 1:25
    the label will anchor to the top
  • 1:25 - 1:28
    and remain the same size
  • 1:28 - 1:30
    However we want it to anchor to the bottom
  • 1:30 - 1:33
    and stretch to fit the width of the card
  • 1:33 - 1:36
    So let's change the labels horizontal constraints
  • 1:36 - 1:38
    to left and right
  • 1:38 - 1:44
    and vertical constraints to bottom
  • 1:44 - 1:45
    Now when we resize the card
  • 1:45 - 1:51
    the label responds the way we want
  • 1:51 - 1:53
    If you can't see the constraint settings
  • 1:53 - 1:56
    make sure you've selected a child layer
  • 1:56 - 2:00
    Top level frames and layers sitting directly on the canvas
  • 2:00 - 2:02
    cannot have constraint settings
  • 2:02 - 2:03
    since they do not have a parent frame
  • 2:03 - 2:07
    to anchor constraints to
  • 2:07 - 2:10
    Also make sure the child layer isn't in a frame
  • 2:10 - 2:12
    with auto layout applied
Title:
Figma Design for beginners: Constraints fundamentals
Description:

more » « less
Video Language:
English
Duration:
02:19

English subtitles

Revisions Compare revisions