Figma 입문

Figma 입문

Figma 장점

• 웹 기반 클라우드 소프트웨어(운영체제 상관없음)
• URL전달로 공유가능
• 파일 자동 동기화
• 실시간 협업
• 버전 히스토리관리
• 벡터 네트워크 : 이미지 손상 x

단축키

space : 화면 이동
shift + 도형 : 정방
도형선택 + 숫자 : 투명도 조절

---

실습

글꼴 : Pretendard

Glassmorphism

반투명 재질을 통해 개체간 시각적 계층을 표현하는 그래픽 스타일

• Effects : Background blur
  

• scale과 shift 차이
  
  shift + 선택 : 선택 개체 크기만 조절
  scale : 전체 비율 조절 (픽셀 유지)
  

Frame

도형

원형

원형 도형 내부 점을 통해 파이차트 생성

다각형

Flatten 설정 : 도형 점 조절 불가

스타일

• command + option + c/v : 스타일 복붙

크기

8배수 사이즈 사용
48px, 40, 32, 24,,,

selection

• Union selection
• Subtract selection
• Intersect selection
• Exclude selection
  

아이콘

[터치영역]

24dp 아이콘은 48dp의 터치 영역 사용 (가독성, 상호작용)

• option + 드래그 : 복사
• command + d : 이전복사 호출

[화살표 버튼]

팬툴 & shift 45 도 활용

[x 버튼]

shift + H : 180 회전

[도형채우기]

shift + X: 면-선 전환

NudgeAmount

• 8배수 설정

Auto layout

• 텍스트 길이에따라 도형 크기 자동 설정
  shift + G : 그리드 on off
  shift + A : auto layout 들어간 프레임 씌우기

• align text basline 설정

• 도형 앞뒤 순서 설정
  

프레임 + 컨테이너 활용

프레임 > 프레임 + 프레임 ( 텍스트 : Fill countainer)

Resizing

• Hug / Fill

Components

컴포넌트 생성

• 상단바 중간 네모 아이콘 : 컴포넌트 만들기(하위 컴포넌트 생성)
  

• 마스터 컴포넌트 : 마스터 변경시 하위 동기화 변경됨

그룹화 이름변경

command + R : rename

우측 디자인바에서 로컬에 존재하는 컴포넌트들 사용 가능