[피그마] 텍스트 말줄임(...)기능 Truncate text

말줄임표가 필요한 텍스트에 대해서 직접 ... 을 작성하는 것보다는 훨씬 편리한 기능을 피그마에서 제공해주고있습니다. 물론, 몇 개 안 되는 곳에 작성해야 한다면 직접 작성하는 게 더 편할수도 있습니다 :)

 

피그마의 텍스트 속성 중 Text truncate라는 속성이 있습니다. Text truncate는 텍스트의 경계(레이어)를 벗어나는 텍스트에 대해서 숨김처리를 하고, 숨김 처리된 텍스트가 있다는 것을 사용자에게 알리기 위해 Text ellipsis=말줄임표(...)를  추가합니다.

 

Truncate text를 적용하기 위한 방법은 무엇일까요?

오른쪽 side bar의 text 영역에서 더 보기(···) 버튼을 누르면 Type settings 패널에 접근할 수 있습니다. 여기서 Basics 탭 최하단에 Truncate text를 클릭하면 적용됩니다.

더미 텍스트로 유명만 Lorem ipsum... 을 대상으로 실제로 적용한 동영상을 참고해 주세요.

이전에 작성했던 텍스트 리사이징 속성과 함께 읽으시면 좋습니다. 오토 레이아웃과 함께 쓰면 좋은 Max lines에 대해서는 오토 레이아웃에 대해서 작성해 본 후에 또 공부해 보겠습니다.

 

[피그마] 텍스트 리사이징 속성 3가지 이해하기

[피그마] 텍스트 리사이징 속성 3가지 이해하기