FIGMA 피그마란, ‘디자인 및 협업’을 위한 클라우드 기반의 그래픽 디자인 작업 도구
*클라우드 기반 = 온라인 환경을 통해 사용자에게 서비스를 제공한다는 뜻
장점 Big 3
1️⃣ 협업 (실시간 공동 작업) 2️⃣ 접근성 (웹브라우저 사용, 링크 공유) 3️⃣ 자동백업 (클라우드 자동저장)
👉
Figma Design File 활용
1) 워크스페이스 구조 : (좌) 레이어/에셋 패널 (우) 디자인/프로토타입 패널
2) 링크 공유 Share 파일 공유 Export*권한: view, edit
3) 주요 단축키
- 단축키 설정 확인 ctrl + shift + /- 기본 작업모드 move V , 이동모드 hand H , 댓글달기 comment C*기본 동작의 경우 단축키 동일
- 복사하기 ctrl + C (이미지로 복사 ctrl + shift + C), 붙여넣기 ctrl + V
- 이전으로 ctrl + Z, 찾기 ctrl + F
각 요소들을 묶을 수 있는 종류는 3가지가 있어요.
’ Section > Frame > Group ‘ 순서로 크기를 구분할 수 있으며, 크기와 관계없이 section을 group화할 수도 있습니다.
프레임(Frame)이란, 작업공간 (또는 아트보드)
- 단축키 : F , 각 요소 선택 후 ctrl + alt + G , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 작업할 영역의 공간에서는 다른 요소들을 포함할 수 있습니다.
그룹(Group)이란, 요소를 묶은 상태
- 단축키 : 각 요소 선택 후 ctrl + G , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 각 요소들을 그룹으로 묶어 정리할 수 있습니다.
섹션(Section)이란, 화면을 담은(포함한) 영역
- 단축키 : shfit + S , 각 요소 선택 후 ctrl + S , 해제 시 ctrl + 백스페이스 (또는 shift + ctrl + G)
- 각 요소들을 한 공간에 담아 정리할 수 있으며, 화면 축소 시 눈에 잘 띄는 특징을 가지고 있습니다.
디자인 패널은 선택한 요소를 상세 편집할 수 있는 상태값을 보여주는 곳으로, 크기~색상 등 다양한 편집이 가능합니다.
Frame 디자인 패널
Frame은 공간을 지정하여, 내부에 작업을 하기에 적합합니다. 또는 자동 정렬을 위한 영역으로써 활용이 가능합니다.
Frame 영역을 선택하면 보여지는 우측의 디자인 패널에서 (1) 프레임의 위치 (2) 프레임의 크기 (3) 프레임의 회전값 (4) 프레임의 색상을 확인해 보세요.
Group은 요소를 묶은 상태로, 보통 Frame 내부에 너무 많은 요소가 있는 경우 깔끔히 묶어서 관리합니다.
Frame 내부에 존재하는 경우 ‘상위(frame)-하위(group)’의 관계가 형성되며, 상위 값의 변동에 따라 어떠한 기준에 따라 함께 수정될지 설정할 수 있습니다.
