피그마에는 작업을 도와주는 다양하고 강력한 플러그인들이 있다. 꿀 플러그인 몇가지를 소개해볼까 한다 05. 플러그인 플러그인은 네모와 마름모 등으로 된 저 아이콘을 선택하고 플러그인탭을 선택한 뒤 필요한 플러그인을 검색해 Run버튼을 누르면 실행된다. 1. Open Iconic Icon Set by Iconduck 다양한 아이콘을 제공 이외에도 플러그인에 icon이라고 검색하면 다양한 플러그인이 있으니 필요한 svg파일을 제공하는 아이콘 플러그인을 찾아보는 것을 권장한다. 2. unsplash 더미데이터에 넣을 다양한 사진을 제공 이렇게 사진이 들어갈 요소를 전부 선택한 뒤 프리셋 탭에서 선택해주면 랜덤으로 선택된 카테고리의 이미지가 들어간다 3. Content Reel 카테고리에 따른 더미 텍스트와 다..

이번엔 Figma를 쓰는 가장 큰 이유인 스마트 셀렉션과 오토 레이아웃을 알아보자. 03. 스마트 셀렉션(Smart selection) 생각해보니까 메인 옆에 바로 가성비 카테고리가 있는 것보다 최신 카테고리가 먼저 있는 게 좋을 것 같다. 그럼 어떻게 수정해줘야 할까? 피그마에서는 요소들 간의 간격이 같다면 위 그림처럼 하나 빼서 공간 만들어 주고 그 공간에 다시 넣어주고 할 필요가 없다. 아래를 보자 그냥 드래그해서 전체를 잡아주고 가운데 생긴 분홍색 원을 잡고 드래그해서 위치만 바꿔주면 된다. 이게 피그마에서 지원하는 스마트 셀렉션 기능이다. 드래그한 요소들 사이에 간격이 전부 동일하다면 피그마에서 자동적으로 요소들 간의 관계를 파악해준다. 가운데 |를 드래그하면 요소들 사이의 간격도 조절할 수 있..

네이버를 리뉴얼하기 위해 메인 컬러와 서브 컬러를 이용해 열심히 와이어프레임을 만들었다고 생각해보자. 각 UI요소마다 색상도 열심히 넣어서 완성했는데 알고보니 색상코드가 #0ECC62가 아니라 #03C75A였다. 다시 하나씩 클릭해가며 전부 색상을 바꿔야할까? 아니다. 피그마는 색상을 전체적으로 관리하기 위한 Color Style 기능을 지원한다. 02. 컬러 스타일(Color styles) 간단하게 샘플 사이트 Travlr의 와이어프레임을 만들었다. 사이트 제목과 버튼, 그리고 카테고리 메뉴, 별에 메인 컬러를 주고 싶다. 근데 아직 메인 컬러를 못 정해서 색을 바꿔가면서 느낌을 보고 싶다. 그럴 땐 컬러 스타일을 지정하면 된다. 바꾸고자 하는 요소 하나의 색을 적당히 지정해 준 뒤 Fill탭에서 점 ..

프로젝트를 시작할 때 꼭 해야 하는 게 있다. 구상한 아이디어를 시각적으로 보여주는 와이어프레임 짜기. 처음 팀 프로젝트를 진행했을 때는 그냥 그림판으로 그리던가해서 허접하게 만들어서 썼다. 하지만 Figma를 알고 난 뒤 이걸 어떻게 하면 제대로 써볼까 하는 생각이 들어 이 글을 정리한다. 01. 컴포넌트와 인스턴스 피그마에도 컴포넌트와 인스턴스가 있다. 컴포넌트 : 디자인 전체에서 재사용할 수 있는 구성 단위 인스턴스 : 컴포넌트의 복사본. 컴포넌트의 모든 속성을 물려받는다 간단한 예제를 통해 컴포넌트와 인스턴스에 대해 알아보고 얼마나 유용한지도 알아보자. 그림과 텍스트로 이루어진 위와 같은 요소들이 있다고 하자. 우리는 저 포맷을 그대로 써서 옆과 아래에도 복사 붙여넣기를 열심히 해서 위의 사진처럼..