Figma, 텍스트 줄바꿈 'Balance·Pretty' 옵션 추가…CSS 방식에 한발 더

요약

Figma가 8월 14일 텍스트에 적용할 수 있는 새 줄바꿈(text wrap) 옵션 Balance와 Pretty를 추가했다.
Balance는 여러 줄의 길이를 고르게 맞추고, Pretty는 마지막 줄에 단어 하나만 남는 현상을 피한다.
앞서 7월 24일에는 오토 레이아웃 동작을 CSS 플렉스박스에 맞춘 새 버전을 새 프레임의 기본값으로 적용했다.
디자인 캔버스와 실제 웹 구현 사이의 차이를 줄이는 업데이트가 이어지고 있다.

주요 내용

• 줄바꿈 옵션은 텍스트 레이어, 텍스트 스타일, 개별 문단 단위로 설정할 수 있다.
• Balance는 줄마다 글자 양을 고르게 나누고, Pretty는 마지막 줄에 한 단어만 떨어져 남는 것을 막는다. CSS text-wrap 속성의 balance·pretty 값과 이름이 같다.
• 릴리스 노트에서 이 기능은 Figma Design뿐 아니라 Figma Slides·Buzz·Sites에도 해당하는 업데이트로 분류됐다.
• 7월에 바뀐 오토 레이아웃은 패딩을 항상 지키고, 안쪽(inside) 선만 레이아웃 계산에 넣으며, Fill로 늘어나는 자식 요소에 border-box 모델을 적용하는 등 CSS 플렉스박스와 같은 방식으로 동작한다.
• 자동 간격(auto gap)이 음수가 되지 않도록 바뀌어, 공간이 모자랄 때 자식 요소가 겹치지 않고 시작점 쪽으로 모인다.
• 새 프레임에는 새 버전이 자동 적용되고, 기존 프레임은 설정이나 Actions 메뉴에서 선택해 전환할 수 있다. 이전(legacy) 버전으로 되돌리는 선택지는 2027년 1월까지 유지된다.

왜 중요한가

제목 줄바꿈이나 레이아웃 간격처럼 작은 차이는 핸드오프 과정에서 개발자가 보정 코드를 따로 넣어야 하는 원인이 돼 왔다. 캔버스 동작이 CSS와 같아질수록 시안과 실제 화면이 어긋날 여지가 줄어든다. 다만 기존 파일을 새 오토 레이아웃 버전으로 바꾸면 배치나 크기가 달라질 수 있어, 전환 전에 변경 사항을 검토하는 것이 좋다.

https://www.figma.com/release-notes/get-responsive-text-across-screens-with-text-wrap/