Figma(피그마) 기본사용 방법 frame(프레임)

Figma(피그마) 기초 튜토리얼 중 Frame 및 constraints를 설명하고자 합니다.

처음 사용하시는 분들에게는 조금 생소 할수 있어요. 하지만 워낙에 툴 자체가 가볍고 활용도가 많기 때문에

IT디자인 업무 외 IT UI/UX 관련된 업무를 하시는 분들에게 많은 도움이 될거 같습니다. 🤗

1. Frame

    - Frame(프레임) 이란 포토샵이나 스케치에서의 아트보드랑 동일한 기능이라고 보면됩니다.

      그런데 다른 차이점이 정적이 이미지만 만들기만 하는것이 아니라  Figma(피그마)는 하나의

      화면 자체를  동적인 화면을 구현하기 때문에  Frame(프레임)이라고 표현합니다.

- 좌측 상단 "+"버튼을 클릭 하여 새 파일을 생성 합니다.

- 새 파일 생성이후 중앙에 해당 영역을 클릭 하여 파일명을 지정합니다.

- 상단 좌측 상단 툴바 영역에서 Frame을 선택한 다음 화면에 드래그 하여 생성

   (좌측 영역  Design(4번) 패널에서 기기별 Size가 존재 하기에 선택 해도 됩니다.)

- Frame(프레임) 선택하고 나면 좌측에 Frame(프레임)속성 변경이 가능 합니다.

좌표를 설정한 이후에 Frame(프레임) 선택하고 단축키 Shift + 2 를 눌러

Frame(프레임)을 화면 중앙에 표시 해주세요.

- Frame(프레임) 선택하고 단축키 Command(Ctrl) + R 을 눌러 Frame(프레임)의 이름을 변경 해주세요.  

  (Frame명은 작업 페이지의 고유 이름이기에 Frame이 많아지면 복잡하기에 초반에 잘 정의 해야합니다.)

피그마 기본 인터페이스를 아래에서 확인 해보세요~😁