프로덕트 / 협업
피그마(Figma)
피그마(Figma)는 화면 디자인, 프로토타입, 디자인 시스템을 협업으로 만드는 디자인 도구입니다.
쉬운 설명
화면 디자인, 프로토타입, 디자인 시스템을 협업으로 만드는 디자인 도구.
배경과 쓰임까지 이해하기
조금 더 자세히
피그마(Figma)는 웹사이트나 앱 화면을 미리 디자인하고 팀과 함께 확인하는 디자인 도구입니다. 보통 개발 전에 화면 구조, 버튼 위치, 사용자 흐름, 디자인 시스템을 눈으로 맞춰보고 싶을 때 사용합니다. 예를 들어 랜딩 페이지 시안, 앱 화면 설계, 프로토타입 클릭 흐름, 컴포넌트 라이브러리, 디자인 토큰 정리, 개발자 핸드오프 등에 쓰입니다.
실제 코드는 아니지만 개발자가 무엇을 만들어야 하는지 이해하는 기준이 됩니다. PRD가 글로 된 기준이라면, 피그마(Figma)는 화면으로 된 기준에 가깝습니다. 한마디로, 피그마(Figma)는 제품 화면을 만들기 전에 함께 보고 조율하는 디자인 작업 공간입니다.
실제로는 이렇게 만나요
PRD에 있는 요구사항을 화면 흐름으로 만들고, 버튼/카드/폼 컴포넌트를 정리해 개발자에게 전달합니다.
- 이런 거 할 때 나와요 개발자가 AI로 UI를 만들 때도 기준 디자인과 컴포넌트 구조가 있으면 결과물 품질이 훨씬 안정됩니다.
- 이렇게 생겼어요 피그마(Figma)은(는) UI/UX, Frontend, PRD 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 프로덕트 / 협업 작업을 하다가 UI/UX, Frontend, PRD를 확인하는 화면
헷갈리기 쉬운 점
피그마(Figma) 화면이 곧 구현 가능한 코드는 아닙니다. 반응형, 데이터 상태, 접근성을 개발 단계에서 함께 봐야 합니다.
왜 알아두면 좋을까요?
개발자가 AI로 UI를 만들 때도 기준 디자인과 컴포넌트 구조가 있으면 결과물 품질이 훨씬 안정됩니다.
Checklist
실제로 볼 때 확인할 것
- 01
디자인 시스템 컴포넌트를 확인한다
- 02
상태별 화면을 준비한다
- 03
개발 가능한 간격과 레이아웃인지 본다