Figma Plugin - Iconfy
기획자의 피그마 Figma Plugin - Iconfy
필수 중에 필수!! Iconfy 는 꼭 설치하세요 :)
또 하나의 필수 플러그인 Iconfy 입니다.
화면설계나 디자인을 할 때 아이콘은 필수이죠?
피그마에서 찾을 수 있는 아이콘 관련 플러그인은 아주 다양한데요. 그 중 제가 가장 즐겨 사용하고 있는 플러그인은 바로 이 Iconfy 입니다.
*** 동영상으로도 이 플러그인의 설치/사용 방법을 볼 수 있어요 :)
사실 아이콘을 제공하는 플러그인은 매우 많습니다.
지난 시간에 제가 소개했던 Content reel 에서도 아이콘을 제공하고 있지요. 여러 아이콘 플러그인을 사용해보았지만, 개인적으로는 이 플러그인이 가장 만족도가 높았습니다.
https://www.figma.com/community/plugin/735098390272716381/IconifyIconfy 사용하기
아이콘파이의 가장 큰 장점이라면 여러 스타일의 아이콘을 한번에 찾을 수 있다는 것입니다.
설치 후 실행을 해보시면 첫 화면에서부터 뭔가 굉장히 많은 스타일의 아이콘 리스트가 보이죠?
검색 기능을 통해서 간단하게 원하는 아이콘을 찾으면서도, 디자인에 어울리는 아이콘을 찾을 수 있다는 것이 이 플러그인의 최고 장점이라고 할 수 있습니다.
한번 우리가 지금 실습하고 있는 토스 앱에 필요한 아이콘을 찾아서 적용해볼까요?
토스 앱 상단에는 알림을 표시하는 종 모양의 아이콘이 있습니다.
Iconfy 플러그인을 사용해서 우리의 실습 화면에도 동일한 아이콘을 적용해보도록 하겠습니다.
우선 Iconfy 플러그인을 실행하고, 종 모양의 아이콘을 검색해볼게요.
저는 bell 이라는 키워드로 검색을 실행했습니다.
검색어는 영어로 입력하셔야 합니다.
bell, notice, user 등 우리가 서비스를 구성할때 흔하게 사용하는 명칭으로 검색하시면 해당 키워드를 포함한 아이콘 검색 결과를 확인할 수 있답니다.
자, 그럼 가장 비슷해보이는 아이콘을 선택해서 작업 화면으로 가져올게요.
가져오는 방법도 매우 간단합니다. 원하는 아이콘을 선택한 후, 작업 화면 영역으로 끌어주세요.
Iconfy 에서 제공하는 아이콘은 frame 형태로 작업화면에 적용되며, 이미지 원형은 대부분 vector 형태로 제공이 됩니다.
따라서 필요하다면 어느 정도의 변형도 가능해서 원하는 디자인으로 적용도 가능하답니다.
우리는 디자인은 변형할 필요는 없을 듯 하니, 크기만 줄여서 실습화면에 적용해보도록 하겠습니다.
우측의 디자인 패널에서 가로/세로 길이를 조정하는 영역 옆의 Constrain proportoins 버튼을 클릭해주세요.
이 부분을 클릭하면 현재 이미지 영역의 가로/세로 비율을 그대로 리사이징할 수 있습니다.
저는 22px 사이즈로 줄여서 화면에 적용했습니다.
그리고 색상을 바꿔줄게요.
이 아이콘 영역의 Selection colors 를 보니 색상으로 잡혀있는 색이 블랙(#000000) 으로 되어있네요.
하나의 색상만 변경시켜주면 되니까 이 영역에서 우리가 지난 시간에 등록한 Gray 색상 중의 첫번째 색상으로 변경시켜주겠습니다.
자, 이렇게 간단하게 알림 아이콘 제작이 끝났습니다. :)
아주 간단하게 끝났죠?
앞으로 실습을 진행하면서 이렇게 유용한 플러그인에 대해서 소개하도록 하겠습니다.
오늘도 감사합니다~!!
#피그마 #figma #plugin #피그마플러그인 #아이콘 #iconfy #웹디자인 #웹기획 #앱기획 #화면설계
