서비스 기획자의 피그마 플러그인
화면설계서 작성에 유용한 플러그인
지난 서비스 기획자의 피그마#2 에서 언급했던 플러그인에 관한 글을 써볼까 한다.
피그마에는 UI 디자인에 유용한 플러그인도 많지만
나는 화면설계서 작성에 유용한 플러그인만 공유해보려 한다.
플러그인 소개에 앞서서 피그마 사용에 서툰 이들을 위해
플러그인 다운로드 방법을 안내해보겠다.
플러그인을 다운로드 방법은 2가지가 있다.
첫 번째로 Community에 들어가서 검색하는 방법이 있다.
피그마 메인페이지 좌측 하단의[Explore Community]를 클릭하거나
좌측 상단의 지구본 모양 아이콘을 클릭하면 Community 페이지에 진입할 수 있다.
상단의 [Search everything in Community] 인풋박스에 플러그인을 검색하면 된다.
두 번째는 파일 내에서 검색하는 방법도 있다.
보통 이 방법을 많이 사용하는 거 같다.
해당 아이콘을 클릭하면 Components / Plugins / Widgets 탭을 확인할 수 있는데
이 중에서 [Plugin] 탭을 클릭하면 된다.
[Search all resources] 인풋 박스에 플러그인을 검색하면 된다.
이제 내가 자주 사용하는 플러그인을 소개해 보겠다.
1. Flow Chart
플로우차트를 손 쉽게 그리게 해주는 플러그인이다.
Diagram 플로우를 그리려면 알맞은 도형을 찾고, 도형 사이에 화살표를 잇고 텍스트를 작성하는 등의 공수가 들어간다.
사실 조금 번거로운 작업이라고 볼 수 있다.
하지만 해당 플러그인을 사용하면 아주 간편하게 플로우차트를 그릴 수 있다.
1. 도형 리스트
플러그인을 실행하면 해당 도형 리스트가 열리는데 이 중에서 원하는 도형을 클릭하면 손 쉽게 도형을 그릴 수 있다.
2. 도형 클릭
그려진 도형을 클릭하면 양옆과 위아래로 화살표가 표시되는 것을 확인할 수 있다.
원하는 진행 방향의 화살표를 클릭하면
3. 다음 플로우 도형 선택
해당 방향으로 어떤 도형을 추가할 것인지를 선택할 수 있다.
리스트에 원하는 도형이 없다면
[1. 도형 리스트]에서 선택해도 된다.
이 경우는 [5. 화살표] 방법을 사용해서 따로 화살표를 추가해줘야 한다.
4. 도형 연결
추가할 도형을 선택하면 도형이 그려짐과 동시에
연결하는 화살표도 함께 그려진다.
5. 화살표
따로 그린 도형에 화살표를 추가하고 싶다면
화살표가 시작될 도형을 클릭하고 [shift] 키를 누른채로 화살표가 이어질 도형을 클릭하면 된다.
6. 텍스트 수정
도형 안의 [Enter] 부위를 2번 더블클릭하거나
[ctrl] 키를 누른채로 [Enter] 부위를 1번 더블클릭하면 텍스트를 수정할 수 있다.
2. Auto Flow
화살표를 쉽게 그릴 수 있게 도와주는 플러그인이다.
기본적으로 무료 플러그인이지만 한 파일에 40개의 화살표만 그릴 수 있다.
나는 한 파일에 여러 페이지를 작업하다 보니 40개로는 부족해서 유료 버전을 결제했다.
굳이 결제를 하지 않고 다른 페이지에서 화살표를 그리고 복사 붙여넣기 해도 된다!
가격은 29.00 USD이며, 한 번 결제하면 결제한 계정으로 영원히 추가 결제 없이 사용 가능하다.
주로 와이어프레임을 그린 후,
버튼이 동작하는 과정을 표현하기 위해 화살표를 그릴 때 사용한다.
화살표를 컬러와 투명도
화살표 꺾인 부분의 형태와 곡률
화살표 라인의 형태 두께
화살표의 시작점과 종료점의 모양까지 마음대로 조절이 가능하다.
조금 불편한 점을 꼽자면
컬러 파레트를 열어서 조정하는 것은 불가능하고
컬러값을 복사 붙여넣기 해야 한다.
나는 컬러값 앞의 두 글자를 [FF]로 수정해서
[FF0000] 으로 만들어 붉은색 화살표를 그리곤 한다.
화살표가 시작될 도형을 클릭하고 [shift] 키를 누른채로 화살표가 이어질 도형을 클릭하면 자동으로 화살표가 그려진다.
3. 한글더미텍스트
자동으로 더미 텍스트를 생성해주는 플러그인이다.
정말 다양한 유형의 더미 텍스트를 지원한다.
프로필 정보
이름
닉네임
짧은 주소
긴 주소
이메일
나이
회사명
콘텐츠 정보
날짜
댓글 & 좋아요
뉴스 제목
블로그 제목
댓글
상품
가격 (원)
가격 ($)
전자제품
평정
채팅
대화글
읽은 시간
음식
음식 카테고리
요리 이름
과일 이름
생물
동물
식물
날씨
날씨 정보
온도
사용 방법은 간단하다.
더미 텍스트를 생성하고자 하는 영역에
아무 텍스트나 입력한 뒤,
클릭한 상태로
원하는 유형을 선택하면 된다.
[이름] 유형을 클릭했더니
"이서준"이라는 이름 더미 텍스트가 생성되는 것을 확인해볼 수 있다.
4. Content Reel
영문 더미데이터, 더미 이미지, 아이콘을 제공하는 플러그인이다.
[text] 탭에서는 영문 더미 텍스트를
[image] 탭에서는 더미 이미지를
[icon] 탭에서는 다양한 아이콘을 확인 가능하다.
더미 텍스트를 생성하고자 하는 영역에 아무 텍스트나 입력 한 후,
생성하고자 하는 유형을 클릭하면 더미 텍스트가 생성된다.
이미지는 더미 이미지를 생성하고자 하는 영역에 원하는 모양의 도형을 그린 후,
생성하고자 하는 유형을 클릭하면 더미 이미지가 생성된다.
중복 선택해서
한 번에 여러개의 더미 텍스트나 이미지를 생성할 수도 있다.
이렇게 4가지의 플러그인을 가장 많이 사용하는 것 같은데
더 좋은 플러그인을 발견하면 추가로 가져와보도록 하겠다!
오늘은 여기까지!
