Figma란?
피그마(Figma)는 macOS 및 윈도우용 데스크톱 애플리케이션들에 의해 활성화되는 추가 오프라인 기능들을 갖춘 인터페이스 디자인을 위한 협업 웹 애플리케이션이다. 피그마의 기능 집합은 사용자 인터페이스와 사용자 경험 디자인에 초점을 두며 실시간 협업, 다양한 벡터 그래픽스 편집기 및 프로토타이핑 도구들을 활용한다. 안드로이드와 iOS용 피그마 모바일 앱을 사용하면 모바일과 태블릿 기기에서 실시간으로 피그마 프로토타입과 상호작용하고 보기가 가능하다.
Draft [임시 파일]
피그마에서 새로운 파일을 Draft라고 한다.
프로젝트 팀이 구성이 안되어도 파일을 무한 생성 가능하다.
여러명이서 협업의 경우 팀 프로젝트 채널에 Draft 파일을 생성해야 한다.
Editor & Viewer & Comment
피그마의 권한은 Editor/Viewer 두가지 유저 타입이 있다.
Editor : 피그만 내에서 디자인 및 컴퍼넌트 수정이 자유롭게 가능
Viewer : 수정은 불가 코드나 에셋 추출, 컴포넌트 복사가 가능
Comment : 외부 클라이언트나 작업자들도 의견을 남길 수 있는 피그마의 기능
디자인/기획에서 수정되거나 보안될 내용을 남기고 기록이 가능
Frame과 Pages의 차이점
Frame : Frame안에Frame을 넣을 수 있다. 이 형태의 장점은 디자인시스템을 구성하며
컴포넌트 단위를 구축하고 관리하기가 쉽다.
Pages : 피그마 파일에 Page 형태로 IA나 플로우차트 같은 기획 서류를 포함하기 용이하다.
PC & Mobile 와이어 프레임 예시
Figma 단축키
레이어탭 alt + 1
assets탭 alt + 2
design탭 alt + 8
prototype탭 alt + 9
양쪽 사이드 바 숨기기: ctrl +/(역슬래쉬:)
방향키: 도형이나 프레임등을 1px씩 이동
shift + 방향키 : 도형을 8px(big nudge설정 만큼)이동
(정렬 단축키는 프레임을 기준으로 함)
alt + W: 위쪽 정렬
alt + D: 오른쪽 정렬
alt + A: 왼쪽 정렬
alt + S: 아래쪽 정렬
alt + V: 세로 가운데 정렬
alt + H: 가로 가운데 정렬
Figma 사용 도구
Outline stroke: 외곽선 추출하기(Ctrl+Alt+O)
주로 선으로 그려진 아이콘을 면으로 변경하거나 텍스트 형태대로 오브젝트로 변경할 떄 사용한다.
corner radius가 설정되어 있는 경우 둥근 모양을 패스와 커브로 변경한다.
Flatten: 레이어 병합하기(Ctrl + E)
여러 레이어를 하나의 레이어로 통합시키며, 동시에 벡터 정보를 초기화 하는 역할을 한다.
pathfinder가 적용된 레이어를 정리하거나 다른 레이어에 있는 패스를 연결 할 때 사용한다.
Figma 용어
text field: 로그인 창
Alert: 경고창,알림창
Auto layout
auto layout 중요!! = 반응형 UI를 만들기 위해서
Ex)pc: hug or fill select/tablet: fill/mobile: hug
Hug: 밖에 영역이 안에 컨텐츠를 맞춰준다
Fill: 안에 컨텐츠가 밖에 영역을 맞춰준다
이미지 넣는 법: 프레임 생성 > 도형 안에 이미지 > 프레임 안으로 > 이미지 scale로 변경
Auto layout 예제
예제들 사용법은 정리후 작성
