혼자, 때론 다같이 작업할 수 있는 피그마 시작하기🎪

 

소개글

대학생분들 혹은 공모전 준비, 회의 등 여러 사람들과 함께 작업을 해야될 경우 어떤 프로그램에서 함께 작업을 할 수 있는 지 많이들 찾아보곤 하십니다. 오늘은 이러한 분들을 위해 함께 작업할 수 있고 또, 개인 작업 까지 가능한 프로그램을 알려드릴려고 합니다. 

 

 

피그마란?

피그마

피그마는 인터넷을 통해 자유롭게 사용할 수 있는 디자인 툴 프로그램입니다. 보통 UI/UX 분야에서 사용되지만 기획, PPT, 애니메이션, 이모지 등을 만드는 용도로도 활용되고 있습니다. 피그마는 다른 디자인 프로그램과 비교했을 때, 가장 특별한 점은 바로 협업 기능이 강화되어 있어 많은 사용자들의 관심을 받고 있습니다.

 

디자인 작업물을 공유하며 기획자와 개발자의 피드백을 바로바로 반영하여 수정할 수 있습니다.. 그 이유는, 웹 기반의 툴이기 때문에 엣지, 크롬, 사파리 등 브라우저에서 설치 없이 바로 실행할 수 있기 때문입니다. 

 

단순히 온라인으로 연결되어 실시간 작업을 진행하는 것 이외에도, 커멘트, 음성 통화 회의, 라이브 채팅 등이 가능합니다. 디자인된 산출물을 유저 플로우에 맞추어 동작하는 프로토타입을 만들 수도 있으며, 1개 프로젝트 내에도 다양한 플로우에 따른 프로토타입을 만들어 테스트해볼 수도 있습니다.

 

또한 커뮤니티를 통해 전 세계의 다른 피그마 사용자들과 커뮤니케이션을 하며 피그마, 피그잼 파일을 주고 받을 수도 있습니다. 디자인 시스템에 대해 잘 모르는 사람도 다른 사용자가 공유해준 디자인 시스템 파일을 참조할 수 있으며, 내가 공유하고자 하는 파일도 쉽게 커뮤니티에 올려서 다른 사람들과도 공유가 가능합니다. 안드로이드 머티리얼 디자인 3 버전의 템플릿이 필요하다면, 커뮤니티에 올려진 공식 머티리얼 계정에서 공유해준 템플릿을 사용할 수도 있습니다.

 

 

 

피그마 기능

 

드로잉

드로잉

백터/비트맵/웹 툴 기반

백터 드로잉 기능을 통해 자유롭게 그림을 그릴 수 있습니다. 또한 많은 이미지와 파일을 열어도 빠르게 작동합니다. 웹에 자동 저장되기 때문에 따로 저장 버튼을 누르지 않아도 되고 시스템 크래시가 발생할 일이 드뭅니다. 

 

고품질 UI 컴포넌트

UI의 상태값을 고차원적으로 표현할 수 있습니다. 스마트 애니메이트 기능을 통해 작업한 어트랙션을 라이브러리화할 수 있으며 프로토타이핑 및 애니메이션을 체계적으로 활용할 수 있습니다. 

 

응용 가능

비주얼 요소를 빠르게 정의 및 결합할 수 있기 때문에 다양하게 활용이 가능합니다. 프리젠테이션, 애니메이션, 일러스트레이션, 브레이스토밍, 대스크매니징, 이모지, 간단한 게임 제작 등의 목적으로 사용할 수 있습니다. 

 

다양한 플러그인

UI 사이에 화살표를 그려 플로우 차트를 만들 수 있으며 스프레트시트 데이터와 UI 연결, 에셋을 3D로 제작, 무료 이미지 활용까지 가능합니다. 

 

무료

모든 드로잉 관련 기능이 무료이기 때문에 무료 플랜으로도 다양한 작업을 할 수 잇습니다. 

 

 

공유

공유

웹 링크 공유

피그마는 멀티 플랫폼을 지원합니다. 동시에 여러 사용자가 협업하여 디자인 작업을 할 수 있습니다. 디자이너와 클라이언트, 또는 디자이너와 개발자가 함께 작업할 때 유용하며, 실시간 채팅과 주석 기능을 통해 실시간 피드백을 주고받을 수 있습니다.

 

 

체계적인 저장

컴퓨터, 노트북만 있으면 디자인이 가능하고 전자기기로 작업을 팔로잉할 수 있습니다. 또한 클라이언트가 아닌 웹에 저장하기 때문에 버전관리 및 롤백이 쉽습니다. 

 

 

시스템

시스템

디자인 시스템 구축

피그마는 디자인 시스템을 쉽게 구축할 수 있게 도와줍니다. 디자인 시스템을 구축하면, 일관된 디자인 및 브랜드 이미지를 유지할 수 있으며, 재사용 가능한 디자인 요소와 UI 컴포넌트를 제작할 수 있습니다.

 

라이브러리 관리

자주 쓰는 디자인 요소를 쉽게 관리할 수 있습니다. 팀 라이브러리에 다른 멤버가 새로운 디자인 요소를 업데이트하면 자동으로 동기화하여 사용할 수 있기 때문에 팀 라이브러리 관리도 쉽고 빠르게 가능합니다.

 

 

피그마 사용방법

 

피그마 사이트

1. 피그마를 사용하기 위해서는 공식 사이트에서 계정을 만들고 로그인을 해야합니다. 

 

2. 로그인 후, 새로운 파일을 만들거나 기존 파일을 열어 작업할 수 있습니다. 

 

 

 

 

 

피그마 사용 단축키

V 선택도구	객체를 선택하거나 이동할 때 사용
A 직선도구	선, 화살표, 사각형 등 직선을 그릴 때 사용
T 텍스트 도구	텍스트를 입력하거나 수정할 때 사용
Space + 드래그 화면이동	마우스 커서에 따라 원하는 영역으로 이동
Ctrl + R 레이어 이름 변경	선택한 걕체의 레이어 이름을 변경
Ctrl + G 그룹화	여러 객체를 그룹화하여 관리하기 쉽게 만들기
Ctrl + Shift + G 그룹해제	그룹화된 객체를 해제
Ctrl + D 객체 복제	선택한 객체를 복제
Ctrl + [ 뒤로 보내기	선택한 객체를 뒤로 보내기
Ctrl + ] 앞으로 가져오기	선택한 객체를 앞으로 가져오기

 

 

파일 생성하기

파일 생성

피그마에서 새로운 프로젝트를 위한 파일을 만들기 위해서는 'New design file' 버튼을 클릭합니다. 파일생성 후, # 모양의 아이콘을 누르면 디바이스 옵션을 선택할 수 있으며 원하는 디바이스의 해상도를 선택하면 작업할 수 있는 프레임이 생성됩니다. 

 

 

파일 내보내기

파일 내보내기

작업을 완료하면 저장할 레이어를 선택하고 Export를 클릭합니다. 이후 원하는 파일 형식을 지정하고 Export 버튼을 눌러 파일을 저장할 수 있습니다. 

 

 

팀 설정 방법

팀 설정 방법

1. 팀이름 입력하기

팀 이름 입력 후, 팀에 대한 설정 화면을 오른쪽에서 확인할 수 있습니다. 

 

2. 권한 설정하기

멤버 탭에서 구성원에 대한 권한 설정이 가능하고 세팅에서도 팀에 대한 설정도 할 수 있습니다. 

 

3. 멤버 초대하기

이메일 주소로 다른 구성원을 초대할 수 있습니다.

 

4. 신규 프로젝트 생성

신규 프로젝트 생성 시, New Prooject를 클릭합니다. 

 

 

 

피그마 이용 시, 주의사항

피그마 플랜

 

피그마 무료 플랜

• 3개의 프로젝트 생성이 가능합니다.
• Version history 기능에 대해 30일 한정으로 사용이 가능합니다. 
• Editor 권한에 대해 본인을 포함한 2명까지 가능합니다. 
• View 모드에 대한 파일 공유는 무제한 초대 가능합니다. 
• 팀 라이브러리 기능은 사용이 불가합니다. 

 

피그마 유료 플랜

• 제한 없이 프로젝트 개수 생성이 가능합니다. 
• Version history 기능은 무제한 사용 가능합니다. 
• 사용자 권한은 한 명 이상의 멤버에게 편집 권한을 설정할 수 있습니다. 단, 첫 구매일을 기준으로 30일 단위로 편집 인원수에 대해 추가 정산이 발생할 수 있습니다. 
• Private Project 사용이 가능합니다. 
• 팀 라이브러리 기능을 사용할 수 있습니다. 

 

피그마 유료 플랜 결제 시, 주의사항

연 단위로 할지, 월 단위로 할지 고려해야합니다. 월 단위로 결제 시, 편집자 당 월 $15가 결제 됩니다. 또한 유료계정에 대한 테스트를 원하면 첫달은 월 단위로 결제해 체험 후 연 단위로 결제하는 것을 추천합니다. 

 

피그마 사용 편집자가 4명인 경우는 4인에 대한 결제가 필요합니다. 편집자가 월 단위로 변경 시, 고정인원에 대해서만 연단위로 결제하고 비 고정인원에 대해서는 월 단위 결제하는 것을 추천합니다.