[Figma]컴포넌트에 적용된 값들이 사라지지 않게 대체하기
마스터 컴포넌트를 대체할 때 주의해야할 것 하나는 Text에 입력된 정보값이 이전되지 않는 다는 것입니다.
새로운 컴포넌트를 만들어 옮기는 것이기 때문입니다.
*과 에러메시지가 나뉘어 있지 않는 것을 예시로 보겠습니다. 이 경우에는 타이핑마다 *을 치고 없애야하며 *과 Label의 간격을 조정하기 어렵습니다. Space를 쳐서 조절하는게 다입니다. 이것은 마스터로 만들어져있지 않은 Text 였습니다.
이렇게 *와 에러메세지 출력 란을 나누어 관리합니다. 마스터를 사용하여 텍스트 스타일 변경, 간격 값을 한번에 관리하고자 합니다.
Auto layout 설정되어있는 마스터 파일 컴포넌트에 error-message를 넣었습니다.
보시다시피 기존에 적용된 케이스 하단에 새로 적용된 error-message가 있습니다.
이렇게 기존 컴포넌트와 신규 컴포넌트를 두 줄 모두 둡니다.
그리고 각 페이지별로 텍스트를 찾아 변경해줍니다. 기존 내용을 복사 붙여넣습니다.
피그마에 UI 화면에 있는 모든 텍스트 입력란을 확인합니다.
두 줄씩 표기되고 있는지, 텍스트가 대체되었는지를 파악합니다.
내용이 모두 복사되었으면 master components로 돌아와 이전 버전을 삭제해줍니다.
삭제를 진행하고 적용된 화면을 다시 한번 확인합니다.
글자가 이상하게 출력되고 있습니다. 이런 오류는 어떻게 생기는 것일까요? 컴포넌트를 클릭하여 텍스트 박스 크기를 확인합니다. 이 경우 Master Component의 Resizing이 Fixed width로 고정되어있기 때문에 발생했습니다.
마스터 컴포넌트의 Fill container로 바꿔주니 모든 파일의 오류가 해결되었습니다.
컴포넌트를 교체할 때는 텍스트 내용이 소실되지 않게끔
기존 컴포넌트를 두고
신규 컴포넌트를 얹어
내용을 이관한 뒤에
기존 컴포넌트를 삭제합니다!
작성자 :
박상은 Sang-eun Park (Sanni)
반복작업을 무척 싫어하는 디자이너. 단순 반복작업할 시간에 아이디에이션을 할 수 있도록! AI가 나타나는 그날까지 모든 좋은 기능이란 기능은 다 써서 시간을 단축합시다.
