디자이너가 실무에서 피그마 쓰는 법 — 프레임, 컴포넌트, 링크 공유까지

피그마를 처음 쓸 때는 포토샵이나 일러스트레이터랑 비슷한 툴이라고 생각했다. 쓰다 보니 달랐다. 화면 설계와 프로토타입, 공유까지 한 곳에서 할 수 있어서 실무에서 점점 더 많이 쓰게 됐다.

특히 웹앱 기획할 때 와이어프레임부터 실제 디자인까지 피그마 하나로 진행했다. 실무에서 자주 쓰는 기능들을 정리했다.

프레임 — 페이지의 기준이 되는 영역

피그마에서 작업을 시작할 때는 먼저 프레임(Frame)을 만든다. 프레임은 작업할 화면의 크기를 정의하는 영역이다. 모바일이면 375×812, 데스크탑이면 1440×900 같은 식으로 기기 크기에 맞게 설정한다.

프레임 안에서 작업하면 나중에 프로토타입 연결이나 공유할 때 화면 단위로 깔끔하게 관리할 수 있다.

💡 단축키 F를 누르면 바로 프레임 툴로 전환된다 오른쪽 패널에서 기기별 프리셋을 선택하면 iPhone, Android, 데스크탑 등 자주 쓰는 크기를 바로 적용할 수 있다.

컴포넌트 — 반복되는 요소는 한 번만 만든다

버튼, 카드, 헤더처럼 여러 화면에서 반복되는 요소는 컴포넌트(Component)로 만들어두면 편하다. 원본을 수정하면 모든 화면에 자동으로 반영된다. 디자인 일관성을 유지하면서 수정 시간을 크게 줄일 수 있다.

• 1
  반복 사용할 요소 선택
• 2
  우클릭 → Create Component (또는 Ctrl + Alt + K)
• 3
  다른 화면에서 쓸 때는 Assets 패널에서 드래그해서 사용

프로토타입 — 클릭하면 화면이 넘어가게

피그마에서 Prototype 탭으로 전환하면 프레임 간 연결을 설정할 수 있다. 버튼을 클릭했을 때 다음 화면으로 넘어가는 것처럼 실제 앱처럼 동작하는 프로토타입을 만들 수 있다. 개발 전에 흐름을 확인하거나 공유할 때 유용하다.

링크 공유 — 파일 없이 바로 공유

피그마의 가장 편한 기능 중 하나가 링크 공유다. 우측 상단 Share 버튼으로 링크를 생성하면 상대방이 피그마 계정 없이도 브라우저에서 바로 디자인을 확인할 수 있다. 클라이언트에게 시안을 보여주거나 개발자에게 디자인 스펙을 전달할 때 파일을 따로 보낼 필요가 없어서 편하다.

💡 개발자 모드(Dev Mode)로 CSS 스펙을 바로 확인할 수 있다 피그마 링크를 받은 개발자는 Dev Mode에서 각 요소의 크기, 색상, 폰트, 간격 등 CSS 스펙을 바로 확인할 수 있다. 디자이너가 별도로 스펙 문서를 만들지 않아도 된다.

피그마는 화면 설계, 컴포넌트 관리, 프로토타입, 공유까지 하나의 툴에서 할 수 있다.
프레임으로 화면 크기를 잡고, 반복 요소는 컴포넌트로 만들고, 링크로 바로 공유하는 흐름이 실무에서 가장 많이 쓰는 방식이다.