영상 튜토리얼: 레이어 자동으로 정리하고 이름 바꾸기(영어)
Tidy 탭을 사용하면 어수선한 Figma 레이어 묶음을 정돈된 캔버스와 레이어 목록으로 바꿀 수 있어요. Tidy는 선택 항목의 시각적 흐름을 감지하고, 레이어를 간격 그리드에 맞춰 정렬하고, 레이어 순서를 캔버스 위치에 맞추고, 프레임 이름에 순차 번호를 붙이고, 프레젠테이션 페이지 번호 텍스트를 갱신할 수 있어요.
선택 항목 준비
- Figma Design 파일에서 정리할 레이어를 선택하세요.
- 선택한 레이어가 같은 부모를 가진 형제 레이어인지 확인하세요.
- TinyImage를 열고 Tidy 탭을 선택하세요.
선택 상태에는 준비된 레이어 수와 그 레이어가 들어 있는 부모가 표시돼요. Tidy는 Auto Layout 부모 안의 레이어는 옮기거나 순서를 바꾸지 않아요. 대신 캔버스나 일반 프레임 안의 레이어를 선택하세요.
Tidy 작업 선택
Actions를 열고 다음 옵션을 원하는 대로 조합해 켜세요.
그리드 정렬
가장 뚜렷한 행 또는 열 레이아웃을 감지하고, Preferences의 가로·세로 간격으로 선택한 레이어를 정렬해요. 레이어 위치가 조금 어긋나 있거나 크기가 달라도 시각적으로 가장자리나 중심을 공유하면 Tidy가 허용해요. 기본으로 켜져 있는 작업은 이것뿐이에요.
이름 변경
각 레이어의 캔버스 위치에 따라 순차 번호를 붙여요. 기본 시작 번호가 000이면 레이어 이름은 000, 001, 002 순으로 붙어요.
레이어 순서
Figma 레이어 패널에서 선택한 레이어의 순서를 캔버스의 시각적 순서에 맞게 바꿔요. 선택한 레이어는 부모 레이어 스택의 맨 위에 함께 모여 있어요.
프레젠테이션 페이지 번호
선택한 레이어마다 안에서 일치하는 텍스트 레이어를 찾아, 그 텍스트를 1부터 시작하는 캔버스 순서 번호(1, 2, 3 등)로 바꿔요. Preferences에서 Leading zero를 켜면 01, 02, 03 형식을 사용해요.
Tidy 환경설정
Preferences를 열어 켜 둔 작업이 실행되는 방식을 설정하세요.
| 환경설정 | 설정 내용 |
|---|---|
| Grid spacing | 정렬된 레이어 사이의 가로·세로 간격이에요. 둘 다 기본값은 100 px예요. |
| Layout | Auto는 시각적 흐름을 감지해요. 직접 지정하려면 Rows나 Columns를 고르세요. |
| Wrap component instances | 그리드 정렬을 실행할 때 선택한 인스턴스를 같은 크기의 프레임 안에 넣어요. |
| Pager variable | 갱신할 페이지 번호 텍스트 레이어의 정확한 이름이에요. 기본값은 {current}예요. |
| Pager number | 페이지 번호 값 앞에 0을 붙여 01, 02, 03 형식으로 만들어요. |
| Starting frame number | 첫 {n} 값이자 {n}과 {total}에 쓰이는 번호 자릿수예요. 기본값은 000이에요. |
| Rename strategy | 기존 이름을 대체하거나, 번호를 각 이름과 합치거나, 사용자 지정 패턴을 적용해요. |
Auto Layout 감지
기본 Auto 레이아웃은 선택 항목에 있는 가로 및 세로 시각적 띠를 비교해요. 가로 목록이나 넓은 그리드는 행으로, 세로 목록이나 긴 그리드는 열로 배치돼요. Tidy는 위쪽, 가운데, 아래쪽 정렬을 공유하는 레이어를 알아보므로, 약간 어긋나 있거나 프레임 크기가 섞여 있어도 자연스럽게 같은 그룹으로 묶여요.
감지된 흐름 대신 특정 읽기 순서를 강제하려면 Rows나 Columns를 고르세요.
이름 변경 방식
- Replace는 순차 번호를 레이어 이름 전체로 사용해요(예:
000). - Merge는 번호와 기존 이름을 합쳐요(예:
000_Home). - Custom pattern은 직접 입력한 텍스트와 선택적인 이름 변수를 섞어 써요. 번호와 기존 레이어 이름이 들어갈 위치를 정확히 정하고 싶을 때 사용하세요.
이름 변수
Name pattern에 원하는 텍스트를 입력하고, 값이 들어갈 자리에 변수를 넣으세요. 변수는 선택 사항이라 선택한 모든 레이어에 같은 고정 이름을 붙일 수도 있어요.
| 변수 | 추가되는 값 |
|---|---|
{n} | 캔버스 순서에 따른 순차 번호로, Starting frame number의 자릿수에 맞춰 0이 채워져요. |
{total} | 선택한 레이어 수로, {n}과 같은 자릿수로 0이 채워져요. |
{name} | 레이어의 기존 이름이에요. |
{parent} | 공통 부모 레이어의 이름이에요. 최상위 레이어라면 Figma 페이지 이름이에요. |
{type} | Frame, Instance, Component Set 같은 레이어 유형이에요. |
{page} | 현재 Figma 페이지 이름이에요. |
{row} | 1부터 시작하는 레이어의 시각적 행 번호예요. |
{column} | 1부터 시작하는 레이어의 시각적 열 번호예요. |
예를 들어 Starting frame number를 001로 설정하면 다음과 같아요.
| 이름 패턴 | 결과 예시 |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 레이어 24개를 선택한 경우 001 of 024 Home |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | 선택한 모든 레이어에 Client Name |
Tidy 실행
Actions와 Preferences를 확인한 다음 Tidy n Layers를 선택하세요. TinyImage가 켜 둔 작업을 현재 선택 항목에 모두 적용하고, 정리한 레이어 수를 알려 줘요.
이전 위치, 이름, 레이어 순서, 감싼 프레임, 페이지 번호 값으로 되돌리려면 Figma의 일반 Undo 명령을 사용하세요.
Auto는 선택 항목에 이미 시각적 흐름이 어느 정도 드러나 있을 때 가장 잘 작동해요. 일부러 불규칙하게 배치한 레이아웃이 예상과 다르게 감지되면 Preferences에서 Rows나 Columns를 고르세요.
TinyImage가 글자를 갱신할 수 있도록, 일치하는 페이지 번호 텍스트 레이어에 쓰인 폰트를 Figma에서 사용할 수 있어야 해요.