FIGMA (2) 썸네일형 리스트형 피그마로 SVG export했는데 리소스가 이상하다고? "컴포넌트의 상태별 SVG 소스를 뽑았는데 사이즈가 다 달라요." 어느 날, 개발자에게 이런 이야기를 들었다. 헐레벌떡 리소스를 확인해보았지만 컴포넌트는 모두 같은 사이즈였고, 그걸 상태 별로 variant 해둔 것 뿐이기 때문에 다르게 추출될 이유가 없었다. 대강 저 동그란 라디오 컴포넌트를 export한 상황이었는데 직접 해보니 정말 사이즈가 다르게 뽑혔다. 여러 테스트를 해보다 보니 두 가지 난감한 상황을 마주할 수 있었다. - SVG의 사이즈가 1px씩 틀어지는 현상 (개발자가 문의한 것) - 보더가 틀어지는 현상 SVG 사이즈가 틀어지는 케이스 내 경우에는 SVG의 height가 1px씩 틀어지는 현상이었다. 16x16 컴포넌트라면 16x17로 뽑히는 거다. 사건 현장(?)을 좀 더 명확히 보자.. Figma에서 Data 사용하기 (Google Sheet Sync) Google Sheets Sync 작업을 하다 보면 실데이터를 넣어서 확인해야 할 때가 있다. 스케치에서는 Data 기능을 사용하면 되고, 피그마에서는 Google Sheet Sync라는 플러그인을 사용해서 작업물에 데이터를 끼얹어볼 수 있다. 사용법을 알아보기에 앞서 설치할 수 있는 링크를 공유한다. 아래 링크 말고도 Figma - Plugin 메뉴에서도 검색해서 다운로드할 수 있다. Plugin Download https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync 어떤 Data를 넣을까 컴포넌트에 어떤 데이터가 필요한 지 체크해보자. 예제로 내가 좋아하는 웹툰으로! 파란 박스 영역에는 웹툰의 썸네일을, 그리고 각 텍스.. 이전 1 다음
