피그마(Figma)는 웹 브라우저와 데스크톱 앱에서 함께 디자인하고 검토하는 도구를 제공한다. 그중 피그마 디자인(Figma Design)은 화면을 구성하고 컴포넌트를 만들며 프로토타입으로 흐름을 살펴보는 도구다.

## 화면을 구성하는 단위

- **파일과 페이지:** 파일 안의 페이지를 나누어 작업을 정리한다. 여기서 페이지는 설계 자료의 구획으로, 발행된 [[웹 페이지]]를 뜻하지 않는다.
- **프레임:** 화면이나 부분 영역을 담는 틀이다. 한 웹사이트의 전체 화면과 그 안의 카드 영역을 각각 프레임으로 구성할 수 있다.
- **컴포넌트와 인스턴스:** 반복해서 쓸 원본을 컴포넌트로 만들고, 그 원본을 사용하는 개별 항목을 인스턴스로 둔다. 공통 속성과 항목마다 바꿀 내용을 구분하면 [[디자인 시스템]]을 관리하기 쉽다. ([피그마의 컴포넌트, 라이브러리 안내](https://www.figma.com/best-practices/components-styles-and-shared-libraries/))
- **[[오토 레이아웃]]:** 요소의 배열, 간격과 크기 조절 규칙을 정한다. 버튼의 문장을 길게 바꾸었을 때 내용에 맞춰 커질지, 정해진 크기를 유지할지 살핀다. 내용에 맞춤, 컨테이너 채움, 고정은 서로 다른 크기 조절 방식이다. ([오토 레이아웃 안내](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma))
- **프로토타입:** 화면 사이의 이동과 반응을 연결해 동작을 살펴본다. 예매 버튼을 눌러 다음 화면으로 넘어가는 시연과 실제 예매 처리, 결제는 서로 다른 구현이다. 색과 이미지가 갖춰진 정지 화면은 [[모크업]]으로 모습을 검토하는 데 쓸 수 있다.

## 디자인한 화면과 발행한 웹사이트

피그마 디자인의 공유 주소는 설계와 검토를 위한 주소다. 별도 제품인 피그마 사이트(Figma Sites)에는 반응형 웹사이트를 만들고 발행하는 기능이 있다. 따라서 피그마로 만들었다는 말만으로 어떤 파일과 기능을 사용했는지 알 수는 없다. ([피그마 사이트 소개](https://www.figma.com/blog/introducing-figma-sites/))

[[포트폴리오 웹사이트]]를 만들 때도 설계 파일과 공개 웹사이트의 주소를 구분한다. 디자인을 구현할 사람에게는 [[디자인 인수인계]]와 함께 실제 이미지, 폰트 사용 조건, 작은 화면에서의 동작을 전할 수 있다.

## 참고

- [피그마](https://www.figma.com/)
- [피그마 공식 도움말](https://help.figma.com/)

#도구 #웹사이트 #디자인 #웹