최근 각광을 받고 있는 디자인 툴인 피그마 Figma 는 클라우드 기반 UI/UX 디자인툴로 실시간 협업 및 다양한 플러그인을 이용하여 생산성을 극대화하는 기능을 제공한다.
특히 상세페이지 자동화 생성에 대해 관심이 있어서 피그마 설치 및 추천 플러그인 10개 를 정리해 보았다.
이 글의 순서
피그마 설치
웹 설치
피그마 홈페이지에 접속하면 위와 같은 화면을 볼 수 있다. 지금 무료 시작하기 로 무료로 시작할 수 있다.
계정을 생성해야 하는 데, 구글 계정으로 만들 수 있고, 이메일로 계정을 생성할 수 있다. 간편하게 구글 계정 가입해 본다.
구글 계정을 선택해서 로그인하면 된다.
로그인 후 바로 사용할 수 있는 클라우드 방식의 제작 화면 페이지를 볼 수 있다.
웹 방식이니 인터넷과 브라우저만 있으면 어디에서든 작업을 할 수 있게 된다.
PC 버전 설치
PC 버전 다운로드 받는 곳은
https://www.figma.com/ko-kr/downloads
에서 다양한 데스크톱 앱을 다운로드 받을 수 있다.
Windows용 데스크톱 앱 을 다운로드 받아서 설치하면 된다.
또는 웹 버전의 화면에서 Get desktop app 을 통해서 다운로드 받을 수 있다.
다운로드 받은 프로그램으로 설치한 후 실행하면 위와 같은 화면이 처음에 나온다.
로그인 하면 된다. 구글 계정으로 하면 된다.
로그인 후 위와 같은 화면이 나온다.
웹 버전보다 빠른 실행 화면이 나온다.
피그마 추천 플러그인 10개
피그마에는 많은 플러그인 들이 있다. 그 중 추천하는 10개를 정리해 보면 다음과 같다.
| 플러그인 이름 | 기능 |
| Remove BG | 이미지 배경을 간단히 제거. |
| Google Sheet Sync | 구글 시트의 내용을 디자인에 연결하는 도구 |
| html to design | 웹페이지의 디자인을 피그마에서 불러들인다. |
| Unsplash | 고해상도 무료 이미지를 검색하고 디자인에 바로 추가. |
| Iconify | 다양한 아이콘 라이브러리에서 아이콘 검색 및 삽입. |
| Figmotion | 피그마 내에서 애니메이션 작업 가능. |
| Content Reel | 텍스트, 이미지, 아이콘 등 더미 데이터를 빠르게 생성. |
| Blobs | 유기적 형태의 SVG 그래픽을 랜덤 생성. |
| Charts | 사용자 지정 가능한 데이터 차트 생성. |
| Autoflow | 아트보드 간 연결선을 자동으로 생성. |
사용해 본 것도 있고, 사용하지 않은 것도 있다.
바로 사용이 가능한 플러그인과 별도의 로그인이 필요한 것도 있다.
플러그인을 설치하려면 하단의 툴바에서 빨간색으로 체크한 아이콘을 클릭하면 나오는 팝업에 Plugins & widgets 탭을 클릭해서 플러그인을 검색한 후 나온 항목에 세부내용을 들어간 후 Save 나 Run 을 클릭하면 된다.
피그마 기타 사항
피그마 Figma의 기본 설명은 다음과 같다.
| 항목 | 설명 |
| 툴 소개 | 클라우드 기반 UI/UX 디자인 툴로, 실시간 협업 및 디자인 파일 관리에 최적화됨. |
| 주요기능 | 실시간 협업 벡터 기반 디자인 다양한 플러그인 지원 디자인 프로토타입 제작 |
| 장점 | 클라우드 저장으로 버전 관리 편리 모든 운영 체제에서 접근 가능 여러 사용자가 동시에 편집 가능 |
| 플랜 | 무료: 기본 협업 및 디자인 기능 제공 유료: 팀 기반 고급 기능(권한 관리, 프로젝트 분석 등) 제공 |
| 사용 사례 | 팀 프로젝트에서 UI/UX 디자인 제작 스타트업 및 대기업의 제품 디자인 협업 클라이언트와의 실시간 피드백 작업 |
| 활용 팁 | 플러그인을 활용해 작업 효율성을 높임 컴포넌트와 스타일 가이드를 만들어 팀 내 일관성 유지 |
| 추천사용자 | UI/UX 디자이너, 개발자, 스타트업 팀, 제품 디자이너 |
무료로도 사용이 가능하지만 제한이 없이 사용하려면 유료로 사용할 수 있다.
구독제로 월 12불인 데, 한화로 16,000원이고 연간 192,000원이다.
일단 무료를 사용해보면서 기능을 익혀 봐야겠다.
언어는 영어와 일본어만 지원을 한다.
포토샵과 비교
포토샵과 비교를 하면 이미지 편집 기능이 없어서 상세페이지를 제작할 때 이미지를 편집할 다른 툴이 필요하다.
그리고 탬플릿과 구글 시트를 이용한 상세페이지 자동화도 포토샵도 지원한다. 다만 Chat GPT 와 메이커를 통한 자동화에서는 피그마가 적합하기에 피그마를 더 알아보고 판단을 내리겠다.
추가정보
피그마 홈페이지 : https://www.figma.com
