피그마(Figma)로 프로토타입 만드는 기초 방법

단계를 눌러 순서대로 확인해보세요.

  1. 프로토타입 탭으로 전환하기

    오른쪽 패널 상단의 "프로토타입" 탭을 클릭하면 화면 간 연결을 만들 수 있는 모드로 바뀝니다.

  2. 프레임끼리 연결하기

    버튼이나 요소를 선택하면 나타나는 파란 커넥터를 드래그해 이동할 다른 프레임에 연결합니다. 이렇게 만든 연결이 클릭했을 때 화면이 전환되는 흐름이 됩니다.

  3. 트리거와 애니메이션 효과 설정하기

    연결선을 클릭하면 클릭, 호버 같은 트리거와 디졸브, 스마트 애니메이트 같은 전환 효과를 선택할 수 있어 실제 앱처럼 자연스러운 화면 전환을 표현할 수 있습니다.

  4. 프레젠테이션 모드로 미리보기

    오른쪽 위 재생 버튼을 누르면 지금까지 만든 프로토타입을 실제 화면처럼 클릭하며 흐름을 확인할 수 있습니다.

  5. 링크 공유해 테스트받기

    공유 버튼으로 프로토타입 링크를 만들어 팀원이나 클라이언트에게 전달하면, 코드 없이도 실제 사용성을 미리 테스트하고 피드백을 받을 수 있습니다.

  6. 왜 유용할까?

    개발자가 코드를 작성하기 전에 실제로 클릭 가능한 목업으로 화면 흐름을 검증할 수 있어, 기획 단계에서 문제를 미리 발견하고 수정 비용을 줄일 수 있습니다.

코드 없이 흐름부터 검증하기

피그마 프로토타입 기능을 사용하면 실제 개발에 들어가기 전에 화면 전환과 사용자 흐름이 자연스러운지 클릭 가능한 목업으로 먼저 확인할 수 있습니다.

캔바 프로 유료 기능도 함께 확인해보세요

디자인 작업을 더 빠르게 만들어주는 다른 도구가 궁금하다면 캔바 프로(Canva Pro) 유료 기능 알아보기도 참고해보세요.

자주 묻는 질문

프로토타입을 만들면 원본 디자인 파일이 바뀌나요?

아니요, 프로토타입은 같은 파일 안의 프레임들을 연결만 하는 것이므로 원본 디자인 요소 자체는 그대로 유지됩니다.

피그마 계정이 없는 사람에게도 링크를 공유할 수 있나요?

네, 공유 링크를 받은 사람은 별도의 피그마 계정 없이도 브라우저에서 바로 프로토타입을 클릭해볼 수 있습니다.