Figma, 전체적인 기능을 소개합니다. (Figma 강의 1편)

피그마 세상에 오신 걸 환영합니다.

피그마는 놀라운 디자인 도구다. 포토샵과 일러스트, XD를 섞어 놓은 듯하다. 인터페이스도 직관적이다. 협업하기가 좋다. 피그마는 UI/UX설계와 서비스 디자인을 위해 설계된 툴이지만, 어떻게 활용하는지에 따라 그 활용 범위가 무궁무진하다. 함께 배워보고 실용적인 기능...(비전문가적인 접근)만 쏙쏙 골라 업무에 활용할 수 있도록 기능을 소개할 것이다. 프로젝트를 같이 만들면서 우리가 할 수 있는 최대한의 기능만 알아보자

 

우선 회원가입부터

회원가입은 구글 아이디나 갖고 있는 이메일로 할 수 있다.

이메일로 가입시 이런 화면이 나온다.

이메일로 들어가 Verify email 버튼을 눌러서 가입을 완료한다.

피그마 기능 소개

Constraints 기능

다양한 기기들의 사이즈와 분기를 하나의 그룹으로 유동성 있는 레이아웃을 설정할 수 있도록 하는 도구라고 설명되어있다. 쉽게 말하자면 우리는 이것을 눌러 무언가를 할 수 있는 도화지를 만들 것이다. 

 

Constraints 버튼을 누르면 사이드에 뜨는 것들

버튼을 누르면 프레임의 크기를 지정할 수 있는 도구가 나와서 지정해줄 수 있고, 아니면 사이드 바에 있는 템플릿을 클릭해서 원하는 용도에 맞는 사이즈를 사용할 수 있다. 즉, 버튼을 누르면 도화지의 크기를 설정할 수 있는 커서로 바뀌고, 피그마에서 제공해주는 맞춤 도화지 사이즈를 설정할 수도 있다.

iPhone 11 Pro Max 프레임을 클릭해보니 작업할 수 있는 프레임이 생겼다

 

Vector Networks

Pen tools을 사용할 수 있다. path를 만들어서 도형이나 선을 그릴 수 있다.

Vector Networks 버튼을 누르면 나오는 pen과 pencil

 

Comments 버튼

현재 생성된 파일에 코멘트를 달 수 있다. 협업시에는 다른 팀원들의 피드백을 받거나 요구사항을 받을 수 있고, 업데이트나 변경사항을 메모해 둘 수도 있다.

 

Sharing and Permissions

프로젝트를 공유할 수 있다. 공유하려는 사람에게 읽기만 가능 혹은 읽고 쓰기를 가능하게 할 수 있도록 권한을 설정할 수 있고, 공유 링크를 생성할 수 있다.

이메일을 입력하여 해당 사용자를 초대할 수 있고, 읽고 쓰기의 권한을 줄 수 있다.

 

피그마의 최대장점 : 협업하기에 더할 나위 없이 좋다.

현재 파일을 수정하거나 보고 있는 팀원의 시야가 공유되고, 어떤 작업을 할 수 있는지 실시간으로 확인 가능하다.

 

팀끼리 공유할 수 있는 라이브러리를 만들 수 있다. 반복해서 만들거나, 여러 화면에서 쓰이는 요소는 만든 후 라이브러리에 등록하면 편리하게 재사용이 가능하다.

Export 도구. 프로젝트를 다양한 파일 형식과 크기로 출력할 수 있다.

 

Live device preview. Figma Mirror앱을 다운로드 받으면 제작한 화면이 어떻게 보이는지 알 수 있다.

 

File browser. file browser기능은 개인 파일에 대한 접근, 팀 제작 및 참여, 피그마 커뮤니티 메뉴에 접근할 수 있다. Back to files 버튼을 눌러 메인화면으로 갈 수 있다.

Back to files 버튼을 눌러 메인화면으로 돌아가자.

 

그다음 Wireframing in Figma 파일을 눌러보자

피그마에서 제공하는 예시 프로젝트 파일

Drafts > Wireframing in Figma(프로젝트 파일) > Layers > Sample Wireframe(Frame) > 텍스트, 도형, 사진들과 같은 구조로 되어 있다. 

 

이 파트는 설명이 계속 추가될 것이에요.. 궁금한 기능이 있다면 댓글로 알려주세요 :)