[Figma] 피그마 입문

#1 TASK

 ▼ 학습 목표

• 피그마가 어떤 툴인지 알고 피그마를 사용하는 실무 환경을 이해
• 피그마 인터페이스, 주요 메뉴와 기능 파악
• 피그마 핵심 기능인 프레임과 그룹의 차이
• 오토레이아웃과 컨스트레인트를 활용

 

#2 Figma Tool 

 1. 피그마 소개

  ❑ 피그마 특징

• 언제 어디서나 사용이 가능
• 디자인부터 개발, PM(or 기획)까지 올인원 제품
• 강력한 커뮤니티
• 쉬운 학습

  ❑ 피그마의 파일 저장 방식

• 기본적으로 피그마 계정에 파일을 온라인으로 저장하는 클라우드 방식
• 내 컴퓨터에 저장하는 방식 로컬 방식도 지원

 

  ❑ 도형 만들기

• 기본적인 도형 생성 및 라운드 값(곡률) 생성
• 핸들을 이용한 스케일 값 변경 and 각도 조절
• 이미지등을 이용한 도형에 삽입

 

 2. 핵심 테크닉

  ❑ 프레임과 그룹

• 프레임(Frame) : 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인삭하는 개체
  * 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체
   ☞ 프레임은 개발에 필요한 속성을 적용
• 그룹(Group) : 어려 개체를 하나로 묶어 하나로 담는 기능
  * 그룹은 편집이나 조정이 필요할 떄, 또는 편의를 위해 여러 개체를 하나로 담는 기능
   ☞ 그룹은 속성을 적용할 수 없

 

  ❑ 레이어와 정렬

• 레이어는 UI를 포함한 모든 개체 하나하나의 층
• 이 레이어를 화면에 배치하는 규칙이 정렬

 

  ❑ 오토레이아웃과 컨스트레인트

• 컨스트레인트(Constraint) : 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻
• 부모 컨테이너의 크기가 변할 떄, 자식 컨테이너는 어디의 기준으로 삼을지 정할 수 있음 
• UI 설계 외에도, 레이아웃을 조금 더 편하고 빠르게 쌓아 올리도록 도와주는 것도 오로레이아웃
• 컨스트레인트는 오토레이아웃을 사용해서 UI와 레이아웃을 설계하는 정렬과 배치 규칙

 

  ❑ 코드 블록의 구조

• 코드 블록은 피그마에선 프레임으로 만들고, 다른 말로는 컨테이너라고도 부름
• 패딩(Padding) : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border) : 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격