[피그마 사용법] 추천 기초 플러그인 및 설치, 사용방법

플러그인과 파일은 다르다.

파일은 파일이고, 플러그인은 소프트웨어다.

소프트웨어를 이용하면 훨씬 쉽게 피그마를 이용할 수 있다.

먼저 플러그인을 설치하는 방법을 알아보고,

플러그인을 불러오는 방법과 플러그인 사용법에 대해 글을 작성해보겠다.

(더불어 기초 플로그인에 대해서도 안내할 것이다)

---

0. 플러그인 설치하기

피크마 - 커뮤니티 - 플러그인 선택 - 검색어 입력 - 인스톨

 

+아이콘

기초적으로 사용해야할 목록은 (이미지에는 없지만 아이콘도 필요하다)

-Unsplash : 무료 이미지 사이트

-Arrow Auto : 화살표

-Lorem Ipusum : 텍스트

-Similayer : 비슷한 유형의 요소를 선택하는 기능. 포토샵의 마술봉 기능과 비슷한듯?

+ Material Design Icons : 아이콘

이다.

반드시 저 플러그인만 사용해야하는 것은 아니고, 같은 종류의 다른 플러그인을 사용해도 무방하다.

---

1. 플러그인 불러오기

피그마 홈 F버튼 -> 플러그인-> 원하는 플러그인

 

---

2. 플러그인 사용하기

2.1 arrow auto 사용해보기

먼저, arrow auto 팝업이 열리는 것을 확인하고,

a. 연결하고자 하는 프레임이나 요소를 선택한 후

b. arrow auto 팝업의 setting에서 원하는 모양을 선택한 후 link 클릭

c. 요소끼리 화살표로 연결 된 것을 확인 할 수 있다.

요소를 클릭했을때 새 화면이 나온다.

 

2.2. lorem ipsum 사용해보기

로렘입숨은 무작위의 텍스트다. 실제 사용되는 텍스트는 아니지만, 실제 서비스가 운영될 때 어떤식으로 텍스트가 표현 될 지 보기 위해 사용하는 플러그인이다.

한글 로렘입숨도 있으나, 피그마 플러그인으로 지원되는 것은 없다.

http://hangul.thefron.me/

한글입숨 - 무의미한 한글 텍스트 생성기

한글입숨을 이용하고 싶으면 위의 사이트를 이용하면 된다. 다만 직접 생성해서 복사 붙여 넣기 해야하는 단점이 있다. 피그마에서 플러그인으로 사용할 경우 텍스트가 필요한 텍스트 박스를 선택하고 선택만 하면 저절로 텍스트가 생성된다.

2.3. 언스플래시 사용해보기

언스플래시는 저작권동의 없이 사용할 수 있는 무료 이미지 사이트여서 정말 유용하게 사용할 수 있다. 플러그인 불러오는 방법은 1. 플러그인 불러오기를 사용할 수도 있고, 아래의 방법을 이용할 수도 있다.

도형 선택 - 오른쪽 마우스 - 플러그인 - 언스플래시 

언스플래시를 불러와준다.

이미지를 선택하면, 선택했던 도형에 이미지가 뿌려진다. 

2.4. similayer 사용해보기

시밀레이어는 위에서 언급했듯이 포토샵의 마술봉 같은 역할을 한다. 일러스트에서는 거의 같은 역할. 비슷한 요소를 선택해준다. 이 기능은 파일이 복잡하면 복잡해질 수록. 수정이 많으면 많아질 수록 필요해진다.

컴포넌트화 하지 않았을때 특히 유용하다.

컴포넌트화 하지 않은 여러가지의 비슷한 유형의 개체들을 많이 만들었을때, 원하는 개체를 콕! 찝어 사용할 수 있기 때문.

요소를 선택하면 시밀레이어 팝업 왼쪽 패널에 여러가지 선택할 수 있는 항목이 열린다.

내가 원하는 요소를 선택하고, 선택된 항목에 마우스 커서를 갖다대면 어떤 특성이 선택되었는지 확인할 수 있다. 예: 회색의 도형만 선택하고 싶다! 라면 회색이 선택되었는지 확인하면 된다.

모두 선택했다면 select layers를 선택해준다.

그러면 내가 찾던 개체들이 선택된 것을 확인할 수 있다.

2.5 아이콘 사용하기

아이콘은 아이콘이다. 설명이 필요하면 하겠지만, 여기까지 따라왔다면 굳이 사용법을 안내해줄 필요가 없다는 생각이 들어 생략하겠다.