[ 피그마 ] 초간단! 피그마 프로토타입 만들기
# 1.프로토타입의 개념과 필요성
프로토타입은 사용자가 실제 제품처럼 느끼도록 하는 인터랙티브 목업입니다. 피그마에서는 디자인과 프로토타입을 한곳에서 관리할 수 있어, 반복 작업 없이 즉시 인터랙션을 연결하고 실시간으로 피드백을 받을 수 있습니다.
특히 협업 중 실시간 코멘트 기능과 브라우저 기반 공유 링크 덕분에 개발자·디자이너 간 의사소통 속도가 크게 향상됩니다.
이번 포스팅에서는 프로토타입을 만들어보도록 하겠습니다.
✅ 도움될만한 포스팅
[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기
[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기
이번 포스팅에서는 피그마에서 자주쓰는 단축키를 종류별로 모아보도록 하겠습니다. 단축키를 잘 사용하면 작업시간이 단축되므로 자주쓰이는 단축키는 외워두시는 것을 추천드립니다.피그
it-ability.tistory.com
[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기
[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기
필자는 피그마 무료버전을 사용중입니다. 팀원이 피그마 에서 작업 하는데, 동시작업은 유료버전이 필요합니다.내 로컬 Drafts 로 옮겨도 request access 가 뜨는데, 로컬로 옮긴 후 작업 할 수 있는
it-ability.tistory.com
[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기
[ AI 툴 ] Figma 대체 툴 Creatie 알아보기
Figma 라는 툴을 아시나요? Figma 는 UI/UX 프로토타이핑 작업에 용이한 툴 입니다.요즈음 디자인은 Figma 로 거의 다 대체되어가는 추세입니다. 그런 Figma 에 대항하는 툴이 나와서 소개
it-ability.tistory.com
[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)
[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)
[ 피그마 ] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용) 피그마 작업중 이미지를 도형모양으로 넣는 프로필 UI 가 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법
it-ability.tistory.com
[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 이미지 누끼 따기
[ 피그마 ] 초간단! 이미지 누끼 따기
[ 피그마 ] 초간단! 이미지 누끼 따기 피그마 작업중 이미지 의 누끼를 따는 작업이 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 해당 내용은 펜을 이용
it-ability.tistory.com
[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 아이콘(ICON) 만들기
[ 피그마 ] 초간단! 아이콘(ICON) 만들기
[ 피그마 ] 초간단! 아이콘(ICON) 만들기 디자인 시스템에서 빠질 수 없는 것이 바로 ‘아이콘’입니다. 오늘은 피그마(Figma)를 사용해 누구나 따라 할 수 있는 초간단 아이콘 제작 과정을 단계별로
it-ability.tistory.com
[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기
[ 피그마 ] 초간단! 표 (테이블 table) 만들기
[ 피그마 ] 초간단! 표 (테이블 table) 만들기 피그마 작업중 테이블 UI 가 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 해당내용은 오토레이아웃을
it-ability.tistory.com
# 2.준비 단계 – 프레임과 리소스 정리
1) 프레임 설정
기본적으론, Frame 툴(F 단축키)로 기기별 해상도에 맞는 프레임을 생성합니다. iOS / Android 프리셋을 사용하면 스크롤 영역까지 자동으로 포함되어 편리합니다.
왼쪽 패널에 Assets 탭을 누르신 후, iOS 18 and iPadOS 18 을 클릭합니다.
Examples 를 누릅니다.
홈스크린과 퀵액션을 추가할겁니다.
여기서 Insert instance 를 누릅니다.
추가적으로, 퀵액션에 있는 Home 아이콘을 홈 스크린 화면에 복사합니다.
# 3.인터랙션 연결하기 – Prototype 탭
1) 노드 드래그로 화면 전환 설정
프레임 또는 오브젝트를 선택한 뒤 오른쪽 Prototype 탭에서 파란색 노드를 다음 프레임으로 드래그합니다. Navigate To · Open Overlay · Swap With 등 전환 유형을 지정할 수 있습니다.
2) 트리거와 애니메이션 세부 조정
클릭, 드래그, 스와이프, 키 입력 등 Trigger를 지정하고, Smart Animate를 활용해 자연스러운 레이어 간 모핑 효과를 넣어보세요. Easing과 Duration을 조절하면 완성도가 한층 높아집니다.
3) 인터랙션 확인 – Play 모드
상단 ▶︎ 아이콘을 클릭하면 새 탭에서 프로토타입이 실행됩니다. 실제 기기 사이즈별 Fit 옵션을 조정해 가로·세로 방향 모두 테스트해 보세요.
# 4.공유 & 피드백 사이클
1) 공유 링크 만들기
우측 상단 Share 버튼 → Prototype 탭에서 Anyone with the link 또는 View only 권한을 설정해 URL을 복사합니다. 무설치·브라우저 기반 미리보기가 핵심입니다.
완성
2) 코멘트 기능 활용
리뷰어에게 링크를 전달하면 실시간으로 C 키를 눌러 원하는 위치에 댓글을 남길 수 있습니다. 개발자는 Inspect 탭에서 CSS 속성을 확인하며 즉시 개발에 반영할 수 있어 협업 효율이 극대화됩니다.
3) 버전 관리 팁
피그마는 자동으로 버전 히스토리를 기록합니다. 중요한 피드백 반영 후 Save as version을 눌러 명시적으로 저장해두면, 팀원 모두 변경 이력을 한눈에 파악할 수 있어 롤백이 쉽습니다.
