피그마(Figma) - 영역 초과하는 텍스트에 말줄임표(...) 넣기(Truncate Text)

영역을 초과하는 텍스트가 발생하면 말줄임표(...)로 더 많은 텍스트가 있음을 사용자에게 알려 주는 것은 일반적인 UX 디자인 패턴 중 하나입니다. CSS에서는 'text-elipsis'와 같은 값을 통해 지정이 가능한데, 피그마에서도 이를 구현할 수 있습니다.

 

텍스트가 영역을 초과한 상황

 

텍스트가 특정 영역을 초과했을 경우에는 해당 텍스트 레이어의 모드를 'Fixed size'로 변경해 주어야 합니다. 텍스트가 컨테이너 안에 배치되는 형식을 취해야 하기 때문입니다. 너비 설정은 고정값으로 해도 되지만, 컴포넌트 안에서 이용되는 경우 'Fill Container'로 설정하여 유동적으로 너비가 설정되게 하는 것이 더 좋을 수 있습니다. 이렇게 값을 설정하면 텍스트가 자동으로 줄바꿈이 되는 상태가 된 것을 확인할 수 있습니다.

Fixed size로 텍스트 레이어 설정

 

이후에는 텍스트의 상세 설정값을 변경해 주어야 합니다. 텍스트 레이어를 선택하면 확인할 수 있는 Type settings라고 불리우는 상세 설정 아이콘을 눌러서 세부 텍스트 값을 조정하는 화면을 활성화합니다. 해당 화면에서 'Truncate Text'라고 하는 세부 항목을 확인하고, 관련 버튼을 눌러 해당 설정을 활성화합니다. Truncate는 끝을 자르다라는 뜻으로 텍스트를 간소화하는 데에 자주 사용되는 IT 용어이기도 합니다. 이 버튼을 누르면 영역 초과되는 항목들이 말줄임표로 처리된 것을 확인할 수 있습니다. 텍스트 레이어가 Fixed size가 아닌 경우에는 몇 번째 줄에서 말줄임표가 발생되게 할 것인지와 같은 추가적인 설정이 가능한 텍스트 인풋이 활성화되기도 하니 참고 바랍니다.

Truncate Text를 눌러서 말줄임표롤 설정