📌 피그마(Figma) 훑어보기
🔺 디자인 시스템
: 체계적인 방법으로 디자인 자산(assets)을 통일성 있게 관리하는 시스템
- 팀 또는 그룹에서 서비스를 디자인, 실현 및 개발할 수 있도록 하는 모든 요소의 그룹화 단일 소스
- 기본 목적: 팀 작업을 보다 쉽고 빠르게 하기 위한 프로세스
🔺 피그마(Figma)
: 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업 디자인 툴
- UIUX 디자인, 디자인 시스템, 기획, PPT, 애니메이션, 짤&이모지 등의 제작에 활용하는 툴
- 웹 링크로 쉽게 공유 가능
- API, 플러그인 제공
- 웹에 자동저장되기 때문에 시스템 충돌(Crash)이 매우 적음
- 자바스크립트 기반
🔺 단축키
하나의 frame 보기: N
뒤로 돌아가기: shift + N
도구창 없애기: ctrl + \
다중 선택: shift + 마우스 선택
이름 일괄 변경: ctrl + R
인덱스 부여: $n/$nn
순서 변경: 대괄호{}
순서 자율 변경: ctrl + 대괄호
그룹화: 범위 선택 + ctrl + G
요소 포커스 잡기: ctrl + 마우스 클릭
복사하기: alt + 드래그
명령어 팔레트(command pallete) : ctrl + P
🔺 component
: 재사용하기 위해 만드는 컨텐츠
- component는 디자인에 사용하면 안된다 ❌
디자인이 아닌 재료로 남겨둬야 한다.
component를 수정하면 모든 instance가 일괄 수정되기 때문
component 페이지(pages)를 따로 만들고 그곳에 component를 저장(복붙)해두는 식으로 관리
🔺 instance
: 컴포넌트를 재사용해서 만든 것
🔺 component 등록하기
1. 대상 선택 + shift + A
2. 마름모 꼴 선택
- component로 등록되면 보라색으로 변함
- 등록 후 Assets 패널에서 끌어서 추가할 수 있음
🔺 component 사용 순서
1. component 등록
2. component 따로 저장
3. instance 사용
🔺 component와 instance 확인하기
🔺 해당 instance의 메인 component로 가기
🔺 아웃라인 확인: ctrl + shift + O
- 재사용된 UI 확인 가능
🔺 파일 전달 시 outline stroke 해야 함
🔺 도형 합치기
1. 합칠 도형 드래그
2. union selection 선택
3. 마지막에 Flatten selection을 해줘야 함
🔺 도형 안에 이미지 넣기 (background-image)
1. 이미지 선택
2. 오른쪽 Design 패널의 Fill에서 이미지 선택(100%와 눈 사이 클릭)
3. 복사
4. 해당 도형에 붙여넣기
🔺 그룹
1. 일반 그룹(Group): ctrl + G
2. 프레임 그룹(Frame): ctrl + alt + G
- 일반 그룹은 거의 사용 X
* 일반 그룹과 프레임 그룹의 차이
3. 섹션 그룹(section): shift + S
- 프레임의 상위 그룹(프레임끼리 나누는 그룹)
4. 오토 레이아웃(Autolayout): shift + A
- 제일 많이 사용됨
🔺 Variants
: 컴포넌트들을 관리하는 것
🔺 component set
: 컴포넌트들을 묶어서 한 번에 관리하는 것
- 개별 component를 만든 후 component set으로 컴바인(combine)
- component 생성 후 component set으로 컴바인(combine)
🔺 상태 관리 가능
🔺 오토 레이아웃 프레임 만들기: shift + A
fram의 상위 버전 => autoLayout
* 해제하는 법: 마우스 오른쪽 👉 Ungroup