2022. 6. 8. 17:41ㆍProduct 디자인
Flutter를 사용하는 개발자와 협업할 일이 생겼다.
빠른시간내에 완성해야 하는 플젝이라 주요 아이콘 외에 시스템 아이콘은 머티리얼 아이콘을 사용하기로 결정해서 피그마 플러그인을 열심히 찾아보았다. 분명 머티리얼 아이콘 플러그인이 있을거야~~
Material Design Icons | Figma Community
Figma Community plugin - Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through the entire list. Filter by category, change style, size, and color. Avail
www.figma.com
역시 있었음
설치 한 후 플러그인 탭에서 [material design icons]를 선택하면 이렇게 아이콘을 적용 할 수 있는 창이 뜬다. 그리고 개발자에게 Flutter에서 머티리얼 아이콘 클래스 네임을 볼 수 있는 링크를 받는다.
위 링크에 들어가서 디자인에 넣은 머티리얼 아이콘을 찾아 이름을 확인해야 한다. (커맨드+F 또는 컨트롤+F)
위 예시 이미지의 아이콘은 face retouching natural 이라는 아이콘인데, 피그마에서 아이콘 이름을 플루터 아이콘 클래스에 나온것 처럼 맞춰줘야 한다.face retouching natural
face_retouching_natural_outlined
플러그인 아이콘 이름을 띄어쓰기 있는채로 그대로 쓰면 언더바가 나오지 않기 때문에 머티리얼 아이콘 전부 위 링크에서 찾아서 수정해준다. 외부에서 머리티얼 아이콘을 가져오는 경우에도 이렇게 적용해주면 된다.
이렇게 하는 이유?
띄어쓰기된 아이콘 이름이 수백개라면 나중에 아트보드 하나하나 다 뜯어서 고쳐야하는데.. 빠른 작업을 위해서라도 처음부터 짚고 넘어가자!
'Product 디자인' 카테고리의 다른 글
| 탈중앙화 블록체인 지갑 디자인, 니모닉 더블체크 인터페이스에 대한 정성적 조사 (1) | 2022.08.23 |
|---|---|
| 데이터 드리븐 디자인? 정량적 데이터로 디자인 개선하기 (0) | 2022.08.22 |
| 새로운 Material Design 3의 웹 접근성 기준으로 색상대비(가독성) 찾는 방법 (0) | 2022.05.17 |
| 데이터 테이블을 앱에서 어떻게 디자인해야하지? Material design Data tables (0) | 2022.03.01 |
| 2023 런처 아이콘(앱 아이콘)에 대한 최소한의 가이드 - iOS와 안드로이드 (0) | 2021.07.24 |