Figma design

인터페이스 둘러보기

살펴보기

• Figma 디자인에 AI 도구 사용
• UI3 탐색하기: Figma의 새로운 UI
• 오른쪽 사이드바에서 레이어 속성 디자인, 프로토타입 제작, 탐색하기

파일 유틸리티

• Figma Design의 작업 메뉴 사용
• Figma의 키보드 바로가기

디자인 만들기

레이어 만들기 및 편집

• Figma Design의 프레임
• 모양 도구

레이어 활용 작업

• 캔버스에서 개체 일괄 편집
• 부모, 자식 및 형제 관계
• 정렬, 회전 및 위치 조정
• 레이어 간 거리 측정

글씨체

• Figma Design에 글꼴 추가
• 글꼴 검색 및 적용
• 중국어, 일본어, 한국어 텍스트 추가

추가 속성

• 모서리 반경 조정 및 다듬기

자동 레이아웃 사용

• 자동 레이아웃 속성 살펴보기
• 디자인에 오토레이아웃 추가

디자인 시스템 구축

구성요소

• Figma 컴포넌트 가이드

변수

• 변수, 컬렉션 및 모드 개요

라이브러리 만들기 및 공유

• Figma 라이브러리 가이드
• 라이브러리 게시

개발 모드

인터페이스 둘러보기

• Dev Mode 가이드
• Dev Mode에서 디자인 탐색
• 관리자용 Dev Mode

디자인 검사

• 검사 가이드
• Dev Mode에서 변경 사항 비교
• Dev Mode에서 측정값을 추가하고 디자인에 어노테이션 달기
• Dev Mode의 변수

디자인을 코드로 전환

• Code Connect
• Dev Mode에서 코드 스니펫 사용
• Dev Mode에서 레이어에 개발 리소스 연결
• Figma for VS Code

오거니제이션 전체의 Dev Mode

• Dev Mode 상태 및 알림
• Dev Mode 포커스 뷰
• Dev Mode 개발 준비 완료 뷰
• 오거니제이션의 Dev Mode 설정 관리

프로토타입 만들기

가이드

• Figma에서 프로토타입 제작 가이드
• 프로토타입에서 동영상 사용

프로토타입 만들기

• 프로토타입 흐름 생성 및 관리
• 프로토타입 스크롤 및 오버플로 동작

고급 프로토타입 제작

• 프로토타입에서 변수 사용

가져오기 및 내보내기

• 파일 브라우저로 파일 가져오기
• Sketch 파일 가져오기
• Figma에서 내보내기
• 내보내기 형식 및 설정

여러 파일에서 공동 작업

댓글

• 파일에 댓글 추가
• 파일 댓글에 대한 이메일 알림 관리

멀티플레이어 도구

• 파일의 뷰어 기록 확인

분기 및 병합

• 브랜치 가이드
• 브랜치 공유
• 브랜치 변경 사항 검토하기
• 브랜치를 메인 파일에 병합하기
• 불완전한 병합 또는 업데이트