안녕하세요!
최근 디자인을 운영하면서, 예전에 가장 질문을 많이 받던게 ‘일러스트, 포토샵’이었다면
어느순간부터 엄청 비중이 커지는 게 바로 ‘피그마’더라구요!
실제로 주변 디자이너분들도 요즘 피그마를 압도적으로 많이 사용하셔서,
피그마 사용법과 피그마에 대한 간단한 설명 공유드리려고 합니다!
이번 글에서는 맛보기로 간단하게 소개해드리고, 이후에 내용을 계속 업데이트 해서 공유드릴게요 🙂
많은 도움 받으셨으면 좋겠습니다!
피그마(Figma)란?
Figma는 협업과 프로토타이핑이 강점인 디자인 툴로, 웹기반 인터페이스를 통해 어디에서나 디자인 작업이 가능합니다.
피그마 장점
1. 웹 기반 협업 도구
Figma는 클라우드 기반으로 운영되어 여러 사용자가 실시간으로 같은 파일을 보고, 편집할 수 있는 강력한 협업 기능을 제공합니다.
사실 이게 제일 큰 장점인 것 같아요. 예전에 작업하던 프로세스를 보면
기획은 PPT 등에 잡고, 디자이너에게 넘기면, 디자이너는 그걸 보고 포토샵, 일러스트 등으로 작업을 하고
다시 이미지화 시켜서 전달하면, 피드백하고, 이후에 또 수정하고…
이런 번거로운 작업을 그냥 실시간으로 보면서 의견달며 한큐에 끝낼 수 있는 툴이 바로 피그마입니다! 팀원들과의 실시간 피드백과 수정이 가능하게 하여 작업 효율을 대폭 향상시킵니다.
2. 사용자 친화적 인터페이스
Figma를 처음 사용할때 감동 받은건, 사용이 너무 쉬웠다는겁니다!
인터페이스는 직관적이며 사용하기 쉬워, 디자인에 익숙하지 않은 사람들도 비교적 쉽게 접근할 수 있습니다. 툴셋, 레이어 패널, 프로퍼티 패널 등이 잘 정리되어 있어 필요한 기능을 빠르게 찾을 수 있습니다.
3. 다양한 플러그인과 통합
다양한 플러그인을 지원하는 Figma는 사용자의 필요에 맞춘 기능 확장이 가능합니다. 예를 들어, 아이콘, 색상 팔레트, UI 키트 등을 손쉽게 추가하여 사용할 수 있습니다.
확장성이 진짜 무한이라서, 디자인뿐만이 아니라 여러가지 범위로 확장이 가능합니다! 이건 진짜 큰 강점이에요!!
피그마 사용 사례
이해를 조금 쉽게 돕기 위해서 사용 사례도 함께 공유드리겠습니당!
1. 웹사이트 및 앱 디자인
웹사이트나 모바일 앱의 사용자 인터페이스(UI)와 사용자 경험(UX) 디자인 작업에 Figma를 사용할 수 있습니다.
프로토타이핑 기능을 활용하여 인터랙티브한 디자인을 실시간으로 테스트하고 개선할 수 있습니다.
2. 브랜드 아이덴티티 개발
로고, 색상 스키마, 타이포그래피 등 브랜드 아이덴티티를 개발할 때 Figma의 협업 기능을 활용하면 다양한 이해관계자와의 의사소통과 승인 과정이 간소화됩니다.
3. 마케팅 자료 제작
프레젠테이션, 포스터, 뉴스레터 등 다양한 마케팅 자료를 제작할 때도 Figma는 유용합니다.
템플릿을 사용하여 일관된 브랜드 이미지를 유지하면서도 필요에 따라 쉽게 커스텀할 수 있습니다.
정말 무한확장이 가능해요!!
피그마 사용법
1. 피그마 계정 만들기 및 시작하기
– 계정 생성 : 먼저 Figma.com에 접속하여 계정을 생성합니다. Google 계정이나 이메일을 통해 가입할 수 있습니다. (구글이 편해서 추천드려요~)
추가로 왠만하면 크롭에서 사용하시는 걸 추천드립니다!
– 프로젝트 시작 : 계정을 생성한 후, ‘New File’을 클릭하여 새 프로젝트를 시작합니다.
2. 인터페이스 이해하기
– 캔버스 : 디자인 작업을 하는 주 화면입니다.
– 레이어 패널 : 화면의 왼쪽에 위치하며, 모든 객체의 계층과 그룹을 보여줍니다.
– 속성 패널 : 오른쪽에 위치하며, 선택된 객체의 세부 속성을 수정할 수 있습니다.
3. 기본 도구 사용법
– 객체 추가 : 상단의 툴바에서 사각형, 원, 라인 등의 도형을 선택하여 캔버스에 추가할 수 있습니다.
– 선택 도구 : 객체를 선택하고 크기를 조정하거나 이동할 수 있습니다.
– 펜 도구 : 벡터 기반의 커스텀 경로를 생성할 수 있습니다.
4. 컴포넌트 및 스타일
– 컴포넌트 생성 : 재사용 가능한 디자인 요소를 만들기 위해 컴포넌트를 생성할 수 있습니다. 객체를 선택하고 ‘Create Component’를 클릭합니다.
– 스타일 적용 : 텍스트 스타일, 색상 스타일 등을 정의하여 일관된 디자인을 유지할 수 있습니다.
5. 협업 기능
– 코멘트 추가 : 디자인에 대한 피드백을 주고받기 위해 코멘트를 추가할 수 있습니다.
– 실시간 협업 : 다른 사용자와 동시에 같은 파일을 편집할 수 있습니다.
6. 프로토타이핑
– 인터랙션 연결 : 다양한 화면 간에 인터랙션을 추가하여 클릭 시 다른 화면으로 넘어갈 수 있게 설정합니다.
– 프로토타입 시뮬레이션 : ‘Present’ 모드를 사용하여 실제 앱처럼 프로토타입을 실행할 수 있습니다.
7. 파일 및 버전 관리
– 파일 저장 및 공유 : 클라우드 기반 저장으로 파일을 자동으로 저장하고, 링크를 통해 다른 사용자와 공유할 수 있습니다.
– 버전 이력 : 변경사항을 자동으로 기록하며, 이전 버전으로 돌아갈 수 있습니다.
8. 단축키 활용
– 자주 사용하는 단축키 : 복사 (Ctrl+C), 붙여넣기 (Ctrl+V), 삭제 (Delete), 그룹화 (Ctrl+G) 등이 있습니다. 이를 통해 작업 속도를 향상시킬 수 있습니다.
( 단축키를 더 자세히 보고 싶다면?, 단축키 글 보러가기 )
이런 기본적인 기능 외에도 피그마는 플러그인, 통합 코드 패널 등 다양한 고급 기능을 제공하여 디자인 작업을 더욱 효율적으로 만들어 줍니다.
플러그인은 각각 하나씩 디테일하게 이후에 설명으로 풀어보겠습니다 🙂
협업 기능의 활용
1. 팀원 초대 및 협업
– 팀 초대 : 대시보드에서 프로젝트 파일을 선택 후, ‘Share’ 버튼을 통해 팀원을 초대할 수 있습니다. 이메일로 초대하거나 링크를 공유할 수 있습니다.
– 실시간 편집 : 초대된 팀원들과 동시에 파일을 편집할 수 있으며, 각자의 커서는 다른 색상으로 표시됩니다.
2. 피드백과 리뷰
– 댓글 달기 : 특정 객체나 화면에 댓글을 추가하여 피드백을 주고받을 수 있습니다. 이는 리뷰 과정을 효과적으로 만듭니다.
3. 버전 관리
– 파일 버전 관리 : 작업 중인 파일의 상단 메뉴에서 ‘Show Version History’를 선택하면 이전 버전으로 돌아갈 수 있습니다.
이 기능을 통해 변경 사항을 추적하고 필요한 경우 이전 버전을 복구할 수 있습니다.
결론
Figma는 강력한 웹 기반 디자인 툴로, 사용자 친화적인 인터페이스와 다양한 협업 기능을 제공합니다. 디자인 초보자부터 전문가까지 다양한 사용자가 효과적으로 사용할 수 있는 도구입니다. 디자인 작업의 진행 과정에서 Figma의 이러한 기능들을 적극 활용한다면 효율성과 결과물의 질을 높일 수 있습니다.
함께보면 좋은글