[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치
💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
isaac-christian.tistory.com
Figma를 설치하기 전이라면 위 글을 참고하여 계정을 생성하고, Figma를 설치하도록 한다.
💡페이지 알아보기
프로젝트 팀 권한
| Owner (Admin) | Editor | Viewer | |
| 담당 | 디자이너 직군 | 디자이너 실무자, 기획자 |
실무자 외 검토자, 게스트 |
| 업무 | 파일 생성 및 관리 | 파일 속성 관리 | 권한이 있는 파일 열람 |
| 팀 멤버 관리 | O | O | X |
| 팀 설정 관리 | O | X | X |
| 팀 소유권 이전 및 삭제 | O | X | X |
Figma에서는 위와 같이 Owner, Editor, Viewer 3가지 역할이 있다.
Viewer 권한에서는 asset tab이 노출되지 않는다.
각 업무에 맞게 역할을 분배하여 프로젝트를 생성하고, 역할을 부여하면 된다.
Recents에서 파일 확인하기
좌측 메뉴에서 🔎검색을 통해 프로젝트와 파일을 검색할 수 있다.
Draft는 임시 파일이 들어 있는 목록이다. Draft에서 작업을 하다가 다량의 파일이 누적되면 프로젝트로 파일을 이동시켜 저장해 주는 것이 좋다.
어떤 팀에서 프로젝트를 확인할 건지, 어떤 파일만 확인할 건지, 기간을 선택해서 볼 건지 view 형식을 조정하여 확인할 수 있다.
파일 속성 확인 및 수정하기
파일을 마우스 오른쪽 클릭하여 이름을 바꾸거나 삭제하는 등의 작업을 할 수 있다.
이와 같이 홈 화면 중앙 메뉴에서 프로젝트와 파일을 관리할 수 있다.
💡프로젝트 생성하기
Figma 계정을 생성하면 기본적으로 본인의 이름으로 생성된 team 안에 Team project가 하나 생성된다.
만약 새로운 프로젝트를 생성하고 싶다면 우측 상단 '+ Project' 버튼을 클릭하면 된다.
프로젝트 초대하기
Invite 버튼을 눌러 초대 링크를 복사하여 초대하거나 email로 초대할 수 있다.
can view로 초대받은 사람은 Viewer로서 파일을 확인만 할 수 있으며, can edit으로 초대받은 사람은 Editor로서 팀에 합류하여 파일을 추가하고 수정하는 게 가능하다.
Owner는 Admin Console에서 프로젝트의 멤버를 확인하고, Design role을 수정할 수 있다.
파일 생성하기
'+ Design file' 버튼을 클릭하면 디자인 파일을 만들 수 있다. 또한, '+ FigJam board' 버튼을 클릭하면 피그잼 버튼을 만들 수 있다. 그리고 'Import' 버튼을 클릭하면 피그마 클라우드 외부의 파일을 불러올 수 있다.
Drafts에서 파일 생성
'+ Design file' 버튼을 클릭하여 들어간 상태이다.
프로젝트를 선택하고 파일을 생성하지 않으면 Drafts에서 파일을 생성한다.
💡Figma 커뮤니티
Figma 커뮤니티 특징
- 전 세계의 Figma 유저들과 소통할 수 있다.
- icon, asset 등의 방대한 리소스를 공유하고 있다.
- CC BY 4.0 라이선스와 연결되어 있다.
CC BY 4.0 라이선스이기 때문에 asset을 상업적으로도 이용이 가능할 뿐만 아니라, 수정도 가능하다.
Figma 커뮤니티 접속하기
https://www.figma.com/community
Figma Community: Explore templates, plugins, and widgets published by the community
Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers
www.figma.com
링크로 웹으로 커뮤니티에 접속하거나 프로그램 좌측 하단의 'Explore Community' 버튼을 통해 커뮤니티에 접속할 수 있다.
우측 상단 'Publish' 버튼은 작업한 파일을 커뮤니티에 공유하는 기능이다.
category 또는 tag 선택하기
category와 tag를 선택하여 전 세계 사람들이 올려놓은 리소스를 검색하여 사용하면 된다. 이때 Filter 기능을 사용하여 Paid와 free를 구분해 리소스를 확인할 수 있다.
리소스를 작업 환경으로 이동하기
리소스를 클릭하면 About을 통해 상세한 설명과 preview를 확인할 수 있다.
Drafts로 리소스 가져오기
'Open in Figma' 버튼을 클릭하여 임시 폴더 Drafts로 리소스를 가져왔다.
Community에서 가져왔다는 뜻으로 '(Community)' 표시가 파일명에 붙어 있는 상태이다. 이 파일을 정식적으로 사용할 예정이라면 Drafts가 아니라 프로젝트로 파일을 이동하여 가져오면 된다.
Photoshop, Illustrator와 같은 디자인 환경에 익숙한 사람이라면 금방 적응할 것이라고 생각한다.
참고자료
피그마 입문 A to Z 부트캠프, Rena, MetaCode, 2024.01.27.
