brunch

You can make anything
by writing

C.S.Lewis

by 기획자 첼라 Aug 02. 2021

Figma Plugin - Translator

기획자의 피그마 ::: 자동 번역 플러그인 Translator

Figma 기본 기능에 대한 코스를 끝냈으니, 올만에 홀가분한 마음으로 플러그인 하나 소개해봅니다.


오늘의 플러그인은 Translator 말 그대로 번역 기능을 갖춘 Plugin 입니다.

다국어를 지원하는 서비스를 만들다보면 문장의 길이나 폰트의 무게감 등 여러가지 방향에서 체크가 필요할때가 있죠?

그럴 때 사용하기 딱 좋은 플러그인입니다.


실무 활용도

★ ★ ★ 


다국어 제작이 아니면 쓸 일은 별로 없어요.

선택한 텍스트가 너무 길면 번역이 안될때도 있어요.


*** 오늘의 포스팅을 동영상으로도 볼 수 있어요.


Figma Plugin - Translator



상단 메뉴에서 Plugins 를 클릭합니다.  여기서 하위에 있는 Browse plugins in Community 를 클릭하면 바로 커뮤니티 화면으로 이동합니다.


여기서 Translator 를 검색해주세요.



Figma Community



색을 한 후에는 반드시 Plugin 탭을 클릭해주셔야 해요.

자, 그렇게 검색하시면 제일 처음에 나오는 플러그인 Translator 를 클릭해주시고, install 을 해주세요.


설치가 완료되었다면 우리가 지금까지 실습용으로 만들었던 Toss 화면으로 이동해서 번역을 해볼게요.

우선 언어를 변경할 Text 레이어를 클릭해주세요.  그리고 Plugin 메뉴에서 Translator 를 클릭합니다.






그럼 위의 화면처럼 오른쪽으로 선택할 수 있는 언어 목록이 제공됩니다.  언어 목록에서 번역할 언어를 선택하시면 바로 변경이 됩니다.  


이 플러그인으로 Toss 화면을 모두 영어로 바꿔볼게요.






아주 쉽고 간단하게 화면의 텍스트가 영어로 변경되었습니다.


이 플러그인은 Google Translation 을 기반으로 번역 데이터를 제공합니다.  따라서 완벽한 번역문이 나오는 것을 기대하시면 안되구요. ㅋㅋㅋ

다국어를 위한 UI 작업에 참고하시는 정도가 가장 적당합니다.


그리고... 혹시 눈치채셨나요? ㅋ



한글 버전 UI 와 영문 버전 UI




영문으로 변경하면서 텍스트의 길이, 버튼의 사이즈도 모두 변경이 되었습니다. 

지금은 영문으로 변경해서 기존의 텍스트보다 길어졌지만, 중국어로 적용하면 한글보다 훨씬 길이가 짧아지기도 합니다.  모든 언어에 대해 최적화를 하는 것은 어렵지만 UI 작업을 하실 때 다국어가 제공되는 서비스라면 이런 점을 꼭 고려를 해야합니다.


그리고 또 한가지!

이렇게 컨텐츠로 인해 사이즈가 늘어나고 줄어들어도 고정된 간격과 정렬을 유지할 수 있게 해주는 것이 바로  Auto layout 의 장점입니다. :)

잘 만든 Auto layout 하나면, 열 PA가 부럽지 않답니다. ㅎㅎㅎ


그럼 다음 시간에 만나요.






#figma #figmaplugin #피그마 #피그마플러그인 #자동번역 #번역플러그인 #translator #다국어 #웹기획 #웹디자인 #앱기획 


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari