시작하기 전에

이 기능을 사용할 수 있는 사용자

모든 팀 또는 요금제 지원

파일에 대해 편집 가능 권한을 가진 사용자만 레이어의 위치, 치수 또는 정렬 변경 가능

캔버스에 추가하는 모든 도형, 텍스트 개체 또는 이미지는 고유한 레이어를 갖고 있습니다. 복잡한 디자인을 만들 때 각 레이어를 개별적으로 조정해 일관성을 유지할 수 있습니다.

이 문서에서는 레이어의 정렬, 위치, 크기 및 회전을 조정하는 방법을 다룹니다. 이는 개별 레이어뿐만 아니라 프레임, 컴포넌트, 그룹 및 선택 항목에도 적용됩니다.

대부분의 속성은 오른쪽 사이드바의 디자인 패널 상단에서 찾을 수 있습니다. 이러한 속성 중 일부는 캔버스 자체에서 조정할 수도 있습니다.

정렬

정렬 도구를 사용하면 캔버스의 레이어를 다른 레이어를 기준으로 정렬할 수 있습니다. Figma는 특정 선택 항목에 따라 레이어의 정렬을 결정합니다.

• 하나의 개체 또는 레이어 선택: Figma가 해당 레이어를 상위 레이어에 따라 정렬합니다. 그룹, 프레임 또는 컴포넌트를 포함하는 프레임이 될 수 있습니다.
• 여러 레이어 선택: Figma는 서로를 기준으로, 또는 상위 프레임을 기준으로, 또는 인스턴스에서 선택한 레이어를 기준으로 레이어를 정렬합니다.

오른쪽 사이드바의 정렬 컨트롤을 사용하여 개체를 상위 레이어에 따라 정렬하거나 여러 개체를 상대적으로 정렬할 수 있습니다. 

• 왼쪽 정렬
• 수평 중앙 정렬
• 오른쪽 정렬
• 위쪽 정렬
• 수직 중앙 정렬

또는 키보드 단축키를 사용할 수 있습니다.

작업	키보드 단축키
위쪽 정렬	AltW
왼쪽 정렬	AltA
아래쪽 정렬	AltS
오른쪽 정렬	AltD
수직 중앙 정렬	AltV
수평 중앙 정렬	AltH

Shift 키를 누른 채 정렬 컨트롤을 클릭하면 여러 개체를 그룹으로 상위 프레임에 정렬할 수 있습니다. 개체가 서로 다른 프레임에 걸쳐 있는 경우 해당 상위 프레임에 정렬됩니다.

스냅 설정

개체의 크기를 조정하거나, 레이어를 이동하거나, 벡터 포인트를 이동할 때 스냅 설정을 사용하면 캔버스의 다른 요소에 따라 정렬하는 데 도움이 됩니다. 캔버스에 빨간색 가이드가 시각적 표시로 나타납니다.

• 지오메트리에 스냅: 벡터 편집 모드에서만 사용됩니다. 이 설정을 사용하는 경우 벡터 포인트를 클릭하여 드래그하면 다른 벡터 포인트에 정렬됩니다.
• 개체에 스냅: 서로 다른 개체의 중앙과 가장 바깥쪽 지점을 정렬합니다.
• 픽셀 그리드에 스냅: 요소를 내보낼 때 잘못 정렬된 픽셀 오류를 방지하기 위해 개체를 기본 그리드에 정렬합니다. 이 설정을 적용하기 위해 픽셀 그리드를 표시할 필요는 없습니다.

스냅 설정을 켜거나 끄려면 Figma Design 파일을 열고  > 기본 설정으로 이동합니다. 빠른 액션 메뉴에서도 이러한 설정을 찾을 수 있습니다 . 

스냅 설정은 Figma Design 파일 전체에 적용됩니다.

지오메트리에 스냅이나 개체에 스냅이 활성화된 경우 Control 키를 눌러 일시적으로 비활성화할 수 있습니다.

Control 키를 사용하여 픽셀 그리드에 스냅을 일시적으로 비활성화하려면 벡터 편집 모드에 있고 캔버스를 확대해야 합니다. 충분히 확대되었는지 확인하려면 픽셀 그리드 ⇧ Shift '를 누르고 그리드가 보일 때까지 확대하세요. 이 단축키를 사용하기 위해 픽셀 그리드를 켤 필요는 없습니다.

배분

배분을 사용하면 선택 영역 내의 레이어 사이에 균등한 공간을 만들 수 있습니다. 하나 이상의 레이어 또는 개체가 선택되어 있어야 합니다.

배분을 사용할 때 Figma는 가장 바깥쪽 개체 또는 레이어의 위치를 유지합니다.

• 수평 간격 배분: 왼쪽 바깥쪽과 오른쪽 바깥쪽에 있는 개체나 레이어가 모두 원래 위치를 유지합니다.
• 수직 간격 배분: 위쪽과 아래쪽 개체나 레이어가 모두 원래 위치를 유지합니다.
• 균등 간격(스마트 셀렉션) ↓

균등 간격

균등 간격을 사용하면 1차원의 레이어를 행 또는 열로 빠르게 정렬하거나 행과 열을 결합하여 2차원 레이아웃을 만들 수 있습니다.

그런 다음 스마트 셀렉션을 사용하여 선택한 개체 간의 수평 및 수직 간격을 조정할 수 있습니다. 스마트 셀렉션 사용법 알아보기 →

선택에 따라 다음 옵션 중 하나가 표시됩니다.

• 수직 균등 간격 (1차원)
• 수평 균등 간격 (1차원)
• 균등 간격 (2차원)

1차원 선택

수평 또는 수직축(1차원)에서 선택하면 Figma는 개체가 겹치는 축을 기준으로 개체를 정렬합니다.

X축에 있는 개체는 가로 간격만 조정되고 Y축에 있는 개체는 세로 간격만 조정됩니다.

Figma는 선택 영역에서 가장 일반적인 간격을 사용해 간격값을 설정합니다.

2차원 선택

그리드와 같은 2차원 개체에 균등 간격 기능을 사용하는 경우 균등 간격 프로세스가 훨씬 더 엄격해집니다. Figma는 개체 사이의 수직 및 수평 간격을 모두 조정합니다.

수직 및 수평 간격은 시작 위치에 따라 달라지며 동일하거나 고유할 수 있습니다. Figma가 레이어에 균등 간격을 적용한 후 사용자가 수직 및 수평 간격을 조정할 수 있습니다.

원래 선택 영역의 범위 내에서 개체를 재배치하는 배분과 달리 균등 간격에서는 모든 개체를 선택 영역의 왼쪽 위 모서리에 맞춰 그리드에 정렬합니다.

배분 또는 균등 간격

1차원 선택에서 균등 간격을 사용하는 경우 이 기능이 배분 함수와 유사하게 적용되는 것을 알 수 있습니다. 균등 간격은 몇 가지 로직이 추가된 배분이라고 생각하면 됩니다.

균등 간격 기능의 주요 목적은 레이어가 스마트 셀렉션에 대한 두 가지 기준을 모두 충족하도록 배열하는 것입니다. 즉, 동일한 거리만큼 떨어져 있고 어느 한 축에서 겹쳐야 합니다.

• 배분은 레이어 사이의 균일한 거리만 설정하며 레이어가 특정 축에서 겹칠 필요는 없습니다. 균등 간격은 필요한 경우 두 가지를 모두 수행합니다.
• 균등 간격을 사용하면 두 축을 따라 동시에 개체를 정렬할 수 있습니다. 배분은 한 번에 하나의 축을 따라서만 작동하여 수평 간격을 배분하거나, 수직 간격을 배분합니다.

Figma는 배분과 균등 간격 모두에서 또는 필드에 공백을 표시합니다. 이는 값 사이의 가장 일반적인 공간(모드)을 기준으로 합니다.

위치

캔버스에서 레이어의 위치를 2가지 차원 또는 수평(X축)과 수직(Y축)의 축을 따라 조정할 수 있습니다.

Figma는 X와 Y 좌표를 사용해 캔버스에서 레이어의 위치를 나타냅니다. 이는 레이어 경계의 왼쪽 상단 모서리를 나타냅니다.

1. 오른쪽 사이드바에서 디자인 패널을 엽니다.
2. X 및 Y 필드를 사용하여 레이어의 좌표를 조정합니다.
3. 기본적인 수학 방정식(- + * / ^ ())을 사용하여 X 및 Y 좌푯값을 빠르게 조정할 수도 있습니다. 기존값의 앞이나 뒤에 방정식을 추가하거나 완전히 새로운 방정식으로 바꿀 수 있습니다. 방정식에 대해 자세히 알아보기 ↓

넛지 레이어

화살표 키를 사용하여 레이어의 위치를 이동합니다. Figma에서는 작은 넛지와 큰 넛지의 두 가지 기본 넛지값을 설정할 수 있습니다.

기본적으로 작은 넛지는 1로 설정되어 있고 큰 넛지는 10으로 설정되어 있습니다. 이 두 값은 해상도와 무관한 포인트에 있습니다. 작은 넛지값과 큰 넛지값 설정 →

화살표를 사용하여 레이어 넛지

화살표 키를 사용하여 선택 항목을 이동합니다. 화살표 키는 작은 넛지 설정을 사용하고, Shift 키를 누른 채로 화살표를 사용하면 대신 큰 넛지 설정을 사용합니다.

• ← 왼쪽
• ↓ 아래로
• ↑ Up
• → 오른쪽

크기

캔버스의 모든 레이어는 고유한 크기를 갖습니다. 레이어의 크기를 보는 방법은 다음과 같습니다.

1. 캔버스 또는 레이어 패널에서 레이어를 선택합니다.
2. 레이어의 바운딩 박스 아래에 있는 파란색 라벨에서 크기를 확인합니다.
3. 오른쪽 사이드바에 있는 W 및 H 필드를 사용하여 모든 레이어의 크기를 볼 수도 있습니다.

레이어의 크기를 변경하려면 레이어를 선택합니다. 다음과 같은 몇 가지 방법을 사용할 수 있습니다.

• 레이어 너비를 조정하려면 레이어의 왼쪽 또는 오른쪽 경계 위로 마우스를 가져가 가 표시되도록 합니다. 클릭하고 드래그하여 크기를 조정합니다.
• 레이어 높이를 조정하려면 레이어의 상단 또는 하단 경계 위로 마우스를 가져가 가 표시되도록 합니다. 클릭하고 드래그하여 크기를 조정합니다.
• 레이어의 너비와 높이를 모두 조정하려면 레이어 경계의 모서리 위에 마우스를 가져가 가 표시되도록 합니다. 클릭하고 드래그하여 크기를 조정합니다.
• 오른쪽 사이드바에서 W와 H 필드를 모두 조정합니다.

비율 제한

버튼을 사용하면 레이어의 크기를 현재 비율로 제한할 수 있습니다. 이 설정은 오른쪽 사이드바의 크기 설정(W와 H) 옆에서 찾을 수 있습니다.

이 설정을 사용하면 사이드바에서 레이어의 크기를 조정할 때마다 Figma가 원래의 너비:높이 비율을 유지합니다. W와 H 필드 중 하나를 업데이트하면 Figma가 다른 필드도 그에 따라 업데이트합니다.

회전

개체, 프레임, 그룹 또는 레이어 선택과 같은 개별 레이어를 회전합니다. Figma는 선택 항목의 수평 및 수직 중심을 회전 지점으로 사용합니다.

캔버스에 추가하는 모든 레이어의 기본 회전 각도는 0°입니다. 선택 항목을 각 방향으로 180° 회전할 수 있습니다.

• 양의 각도는 시계 반대 방향으로 180° 이동합니다.
• 음의 각도는 시계 방향으로 -180° 이동합니다.

어느 쪽으로든 180을 지나면 Figma는 해당 방향으로 0°를 향해 카운트다운합니다. 예를 들어, 180°를 지나 15°로 이동하면 -165°가 됩니다.

오른쪽 사이드바

오른쪽 사이드바의 디자인 패널 상단에서 회전 필드를 찾습니다.

1. 회전할 레이어 또는 개체를 선택합니다.
2. 오른쪽 사이드바에서 필드를 사용하여 원하는 회전을 입력합니다.

캔버스

1. 아이콘이 나타날 때까지 레이어의 경계 바로 바깥쪽으로 마우스를 가져갑니다.
2. 클릭하고 드래그하여 선택 항목을 회전합니다.
   • 시계 방향으로 드래그하여 음의 각도( -180° 방향)로 회전합니다.
   • 시계 반대 방향으로 드래그하여 양의 각도( 180° 방향)로 회전합니다.
3. Shift 키를 누르고 있으면 회전값이 15씩 증가합니다.

레이어 뒤집기

회전 레이어를 복제하는 또 다른 방법은 수평 뒤집기 및 수직 뒤집기 변환을 사용하는 것입니다.

오른쪽 클릭 메뉴 또는 키보드 단축키를 사용하여 뒤집기 변환을 적용합니다.

• 수평 뒤집기: ⇧ Shift H
• 수직 뒤집기: ⇧ Shift V

캔버스에 추가하는 모든 도형, 텍스트 개체 또는 이미지는 고유한 레이어를 갖고 있습니다. 복잡한 디자인을 만들 때 각 레이어를 개별적으로 조정해 일관성을 유지할 수 있습니다.

캔버스에서 레이어의 위치를 3가지 차원 또는 수평(X축), 수직(Y축), 깊이(Z축)의 축을 따라 조정할 수 있습니다.

X 및 Y축과 달리 Z축에는 조정할 수 있는 특정 필드가 없습니다. 대신 레이어 패널에서 순서를 변경하여 레이어의 깊이(Z축) 또는 계층 구조를 조정합니다.

이를 통해 캔버스의 앞이나 뒤로, 또는 그룹이나 프레임 안팎으로 레이어를 이동할 수 있습니다. 레이어 간의 관계에 대해 자세히 알아보기 →

왼쪽 사이드바에 있는 레이어 패널에는 현재 페이지의 모든 레이어가 표시되며 현재 레이어가 쌓여 있는 순서(맨 위 레이어가 앞쪽, 맨 아래 레이어가 뒤쪽)가 반영됩니다.

레이어 순서 변경

레이어의 순서를 조정하는 방법에는 몇 가지가 있습니다.

• 1

  레이어 패널

  레이어 패널에서 레이어의 위치를 변경하여 레이어 순서를 조정합니다.

  1. 왼쪽 사이드바에서 레이어 패널을 엽니다.
  2. 레이어를 클릭하고 드래그하여 레이어 계층 구조에서 레이어의 위치를 변경합니다.
     • 레이어를 위로 이동하여 레이어를 앞으로 가져오기
     • 레이어를 아래로 이동하여 레이어를 뒤로 보내기
  3. 릴리스를 해제하면 적용됩니다.

  참고: 자동 레이아웃 프레임 내부에서는 레이어 순서가 반대로 작동합니다. 이는 자동 레이아웃이 겹치는 레이어를 지원하도록 설계되지 않았기 때문입니다.

  자동 레이아웃 프레임에서 레이어 순서를 변경하면 프레임 내 레이어의 위치와 순서도 변경됩니다. 자동 레이아웃 프레임 외부에서 레이어 순서를 변경해도 X축이나 Y축의 레이어 위치는 영향을 받지 않습니다.

  자동 레이아웃 사용에 대해 자세히 알아보기 →

• 2

  키보드 단축키

  앞으로 가져오기:

  • Mac: ⌘ Command ]
  • Windows: Ctrl ]

  맨 앞으로 가져오기:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Ctrl Shift ]

  뒤로 보내기:

  • Mac: ⌘ Command [
  • Windows: Ctrl [

  맨 뒤로 보내기:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Ctrl Shift [
• 3

  오른쪽 클릭 메뉴

  1. 캔버스에서 레이어를 선택합니다.
  2. 선택 항목을 마우스 오른쪽 버튼으로 클릭하여 상황에 맞는 메뉴를 엽니다.
  3. 다음 중에서 선택합니다.
     
     • 앞으로 가져오기
     • 맨 앞으로 가져오기
     • 뒤로 보내기
     • 맨 뒤로 보내기

값 조정

방정식

Figma의 일부 필드는 위치, 크기 및 회전 필드를 포함하는 방정식을 허용합니다.

기존값에 더하기+, 빼기-, 곱하기*, 나누기/을 적용해 레이어의 크기를 조정할 수 있습니다. 더 복잡한 방정식의 경우 필드 내에 대괄호 ( ) 사용하거나 지수를 만드는 경우 ^ 사용할 수도 있습니다.

아래에서 몇 가지 예를 확인할 수 있습니다. 숫자는 바꿔도 됩니다.

• + 10 현재 값에 10을 더합니다.
• - 20 현재 값에서 20을 뺍니다.
• *2 현재 값에 2를 곱합니다.
• /4 현재 값을 4로 나눕니다.
• ^2 현재 값의 2제곱 지수를 생성합니다.
• (𝑥/2)+6 현재 값을 2로 나눈 다음 6을 더합니다(𝑥=현재 값).
• Mixed+100 서로 다른 값을 가진 두 개 이상의 선택된 개체에 100을 더합니다.

혼합된 값 선택에도 방정식을 적용할 수 있습니다. 위치, 크기 또는 회전 필드에 방정식을 입력하면 선택한 모든 레이어에 변경 사항이 적용됩니다. 

스크럽 필드

값을 수동으로 입력하는 것 외에도 필드를 '스크럽'할 수도 있습니다. 스크러빙을 사용하면 마우스나 터치패드를 드래그하여 필드 값을 빠르게 조정할 수 있습니다.

위치, 크기, 회전 필드뿐만 아니라 오른쪽 사이드바에 있는 다른 레이어 속성과 설정에도 사용할 수 있습니다.

1. 캔버스에서 레이어 또는 개체를 선택합니다.

2. 입력 필드 옆의 라벨 위에 마우스를 올려 놓으면 스크러빙 커서가 나타납니다. 입력 필드 자체에 마우스를 올려놓고 수식 키를 누를 수도 있습니다.

   • Mac: ⌥ Option
   • Windows: Alt

3. 아이콘을 클릭하고 드래그하여 입력값을 변경합니다. 값을 줄이려면 커서를 왼쪽으로 드래그하고, 늘리려면 오른쪽으로 드래그합니다.

4. 스크러빙 속도를 높이려면 커서를 화면 상단으로 움직이고, 스크러빙 속도를 낮추려면 커서를 화면 하단으로 움직여서 필드를 스크러빙하는 속도를 변경할 수 있습니다.

   화면 하단에 현재 속도에 대한 알림이 표시되고 커서 너비의 차이도 표시됩니다. 스크러빙 속도는 2x, 1x, 1/2, 1/4의 4가지가 있습니다.