Framer X를 사용하여 대화 형 프로토 타입을 구축

Sep 13, 2025

어떻게

(이미지 크레디트 : 프레임)

디자이너로서 프로젝트에 사용해야하는 프로토 타입 도구에 대한 질문이 항상 있습니다. 와이어 프레임과 같은 작업을 위해 많은 소프트웨어가 많이 있습니다 (우리 톱보기 와이어 프레임 도구 그리고 우수한 웹 사이트 빌더 ), 프로토 타이핑 및 복잡한 상호 작용을 구축하는 단계; 그러나이 모든 도구가 이들을 처리 할 수 있습니다. Framer는 이러한 모든 기능을 갖춘 하나의 도구로 작은 애니메이션 및 상호 작용을 만드는 프로세스를 크게 향상시킵니다.

최신 반복, 프레임 X. 이제는 마이크로 상호 작용 및 애니메이션을 개발하기 위해 CoffeEScript를 사용하는 대신 반응 및 자바 스크립트를 사용합니다. 이렇게하면 더 빠른로드 시간과 성능이 향상됩니다. 또한 반응 구성 요소의 사용은 사용자가 미디어 플레이어 포함, 실시간 데이터 포함을 포함하여 프로토 타입 내부의 실시간 데이터를 포함하여 더 많은 범위를 가지고 있음을 의미합니다.

테스트는 프로토 타입 건물 프로세스의 핵심 부분이며 Framer X는 양방향 프로토 타입을 만드는 데 도움이되는 동안 창조물이 얼마나 좋은지를 볼 수있는 도움이 필요합니다. 우리를 확인하십시오 사용자 테스트 프레이머를 보완하고 실제 프로토 타입을 구축하는 데 도움이되는 가장 좋은 도구의 일부를위한 게시물을 사용하고 최상의 것을 사용하는지 확인하십시오. 웹 호스팅 당신을위한 서비스.

Framer X가있는 앱을 만드는 방법

프레이머의 힘을 완전히 감사하기 위해 우리는 실제 프로젝트를 만들 것입니다 : 일부 콘텐츠와 미디어가있는 간단한 요리법 응용 프로그램 (신뢰할 수있는 자산 클라우드 스토리지 짐마자 빌드해야 할 첫 번째 일은 홈페이지입니다. 우리는 다음 요소로 일을 간단하게 유지할 것입니다.

표준 검색 막대는 조리법을 찾습니다
최신 요리법을 보여주는 최근 활동
가장 인기있는 조리법과 같은 것을 보여주는 조리법 카드
비디오 및 공유 옵션으로 레시피의 자세한보기 만들기

시작하려면 왼쪽 navbar의 + 아이콘을 클릭하여 새 프레임 (대지)을 만들어야합니다. 오른쪽 바에서 표준 iPhone / Android 템플릿 목록에서 아트 보드 스타일을 선택하십시오. 이제 당신은 갈 준비가되었습니다.

01. 검색 창을 빌드하십시오

검색 막대를 구축하여 시작합시다. 정상적으로 사각형을 만들고 검색 아이콘을 추가하는 대신 실제로 Framer X에서 빠른 재사용 가능한 구성 요소를 사용하면 패키지라고합니다. 저장소 왼쪽 탐색 바에서 찾을 수있는 수천 개의 패키지가 있습니다. 상점을 클릭하고 Android 키트 및 예제 키트를 검색 한 다음 설치하십시오.

이러한 패키지에는 카드, 버튼, 키보드, 슬라이더, 입력 및 탐색 메뉴 항목과 같은 요소가 포함되어 있습니다. 이러한 패키지를 설치하면 왼쪽의 구성 요소 메뉴에서 요소를 사용할 수 있습니다.

필터에서 검색하여 원하는 요소를 찾으십시오.이 경우 예제 키트의 검색 표시 줄에서 찾습니다. 프레임에 끌어서 놓기 만하면됩니다. 이제 오른쪽 바를 사용하여 자리 표시 자 텍스트, 글꼴 크기 및 색상과 같은 속성을 수정할 수 있습니다.

02. 콘텐츠 스택을 만듭니다

이 최근 활동 블록의 경우 먼저 '최근 활동'텍스트를 추가하여 꽤 간단합니다. 이제 우리는 스택이라는 Framer X의 새로운 기능을 사용할 수 있습니다. + 아이콘을 클릭하고 메뉴에서 스택을 선택하여 수행 할 수 있습니다. 스택을 선택한 후 작업 프레임에서 600 x 300의 영역을 끌어서 놓아 스택을 만듭니다. 이 스택은 파란색으로 표시됩니다.

이제 구성 요소 섹션과 Android 키트로 돌아가서 Card-5 요소를 검색하여 방금 만든 스택으로 드래그하십시오. 이 카드를 두 번 복제하고 세 개의 카드가 모든 카드가 스택에 있는지 확인하십시오.

스택에있는 한이 세 카드는 간격에 대해 걱정할 필요없이 쉽게 재 배열 할 수 있습니다. 카드 간격을 늘리려면 전체 스택의 너비를 늘릴 수 있습니다. 그것은만큼 간단합니다. 원하는대로 제목과 배경의 이름을 변경 하여이 카드를 개인화 할 수도 있습니다.

이제 우리가 스택을 만들었으므로 스크롤 할 수있게 해 봅시다. 프레임 / 아트 보드에서 꺼내십시오. 왼쪽 탐색에서 + 아이콘을 클릭하고 스크롤 옵션을 클릭하십시오. 스택이있는 영역을 만든 것처럼 스택과 동일한 크기의 프레임 / 아트 보드에 스크롤 가능한 영역을 만듭니다.

이제 방향 화살표를 변경하여 수평 스크롤로 방향 화살표를 변경하여 스크롤 속성을 변경하십시오. 스크롤 컨테이너가 생성 된 후에 우리는 이전에 생성 한 스택에 의해 제공되는 컨텐츠가 필요합니다. 스크롤 컨테이너의 화살표 프롬프트를 사용하여 스크롤 컨테이너를 스택에 연결하기 만하면됩니다. 마우스 포인터를 스택으로 드래그하여 작동합니다.

03. 수직 스택을 만듭니다

Interactive Framer X - 01 — Framer X을 사용하면 수평 및 수직 스크롤 가능 스택을 소개 할 수 있습니다. (이미지 크레디트 : Vamsi Batchu)

래서 피 카드의 경우 2 단계와 비슷한 방법을 따라야하지만 카드의 가로 스크롤을 만드는 대신 본질적으로 미리보기 이미지가있는 가장 인기있는 조리법 목록 인 비슷한 수직을 만듭니다. 이 연습에서는 레시피의 각 카드에는 이미지 축소판, 등급, 레시피의 이름과 준비가 필요한 시간이 있습니다.

각 카드의 세부 사항에 대해 걱정하지 마십시오. 그들은 디자인 맛을 기반으로 개인화 될 수 있습니다. 구성 요소에서 카드를 사용하여 동일한 방법을 수행하여 복제하고 세로 스크롤이있는 스택에 모두 추가하십시오.

04. 새 페이지를 만듭니다

이제 특정 레시피의 세부 사항에 들어가기 위해 새 페이지를 만들어 보겠습니다. 예를 들어, 여기에 두 번째 카드의 경우를 가져 가자. 프랑스 파스타. 이 새 페이지를 만들려면 새 프레임 / 아트 보드를 만들고 프렌치 파스타 레시피에 대한 자세한 내용을 보여주기 위해 필요한 요소를 소개하십시오. 이 새 페이지는 비디오, 제목, 등급, 목록에 저장 및 소셜 미디어에 공유하는 것과 같은 몇 가지 조치 버튼으로 나눌 수 있습니다.

비디오를 추가하려면 저장소로 이동하여 YouTube 패키지를 설치하면 프로토 타입에 비디오를 쉽게 추가 할 수 있습니다. 이제 구성 요소 패널로 이동하여 YouTube 구성 요소에서 프레임에 YouTube 요소를 끌어서 놓습니다.

썸네일의 너비를 조정하여 프레임의 너비에 맞게 조정하십시오. 오른쪽 속성 창에서 프로토 타입에서 재생할 비디오의 URL을 삽입 할 수 있습니다. 원한다면 속성 패널의 확인란을 통해 비디오를 자동 재생하는 방법이 있습니다.

이 비디오 아래에서 제목, 등급 및 다양한 아이콘을 추가 할 수 있습니다. 이 예제에 대한 아이콘을 추가하려면 아이콘 생성기 저장소에서 구성 요소를 사용했습니다. 쉬운 프로세스입니다. 기본 아이콘을 프레임에 드래그 앤 드롭하고 오른쪽 패널의 아이콘이라는 속성을 '심장'및 'Share'로 변경하십시오. 이렇게하면 기본 아이콘이 각각 저장 및 공유 아이콘으로 변경됩니다. 그들의 색상은 오른쪽 패널을 사용하여 쉽게 변경할 수도 있습니다.

방문자에게 물건을 쉽게 만들려면 재료라는 섹션을 추가 할 수 있습니다.이 경우 요리법에 필요한 모든 재료를 나열합니다.이 경우 프랑스 파스타.

05. 상호 작용을 소개합니다

Interactive Framer X - 02 — 버튼과 요소에 상호 작용을 추가하여 더 많은 종류로 만듭니다. (이미지 크레디트 : Vamsi Batchu)

이제 버튼에 대한 상호 작용을 추가하여 디자인을 더욱 매력하게 해 봅시다. 이상적으로는 공유 아이콘을 클릭하면 화면을 사용하여 다양한 소셜 미디어 채널을 통해 레시피를 공유 할 수 있습니다. 새 프레임을 사용하여 그걸 만들어 봅시다.

이 프레임의 너비와 높이가 우리가 만든 다른 두 프레임과 동일한 너비와 높이인지 확인하십시오. 아이디어는 공유 아이콘을 클릭 할 때이 새 공유 화면을 미끄러지고 현재 화면을 교체하는 것입니다.

화면을 뚜렷하게 만드는 데 도움이되도록 Facebook, Instagram, WhatsApp 및 이메일과 같은 소셜 미디어 아이콘으로 채우십시오. 이 공유 화면에는 클릭 한 X 아이콘이 있어야합니다.이 항목은 클릭하면 원래 상태로 되돌아갑니다.

모든 아이콘이 스택 안에 배열되어 있는지 확인하십시오. X 아이콘이 포함 되 자마자 다음 단계는 공유 아이콘을 클릭하면이 프레임을 연결할 수 있도록이 프레임을 연결하는 것입니다.

이렇게하려면 공유 아이콘이 포함 된 프레임을 선택하십시오. 오른쪽 패널에는 링크라는 속성이 있습니다. 이를 클릭하면 응용 프로그램 인터페이스에서 우리가 만든 새 공유 프레임으로 드래그 할 수있는 화살표를 제공합니다. 이렇게하면 백그라운드에서 링크가 생성됩니다.

이제 공유 아이콘을 선택하면 대상, 전환 및 방향 인 링크의 오른쪽 패널의 새 속성을 관찰합니다. 이러한 각 속성을 사용하면 전환 유형 및 화면이 팝업되어야하는 방향 등의 요소를 변경할 수 있습니다.

프로토 타입이 작동 중이거나 인터페이스의 오른쪽 상단 구석에있는 재생 아이콘을 클릭하면 작업이 작동하는지 여부를 테스트 할 수 있습니다. 마찬가지로 사용자가 X 아이콘을 클릭하면 사용자가 X 아이콘을 클릭하면 이전 화면으로 돌아와야합니다.

이는 유사한 링크 속성을 사용하여 대상을 비디오 화면으로 추가 할 수 있습니다. 비트의 변형을 추가 할 때 이동하려면 상단 대신 방향을 남겨두고 재생 명령을 사용하여 상호 작용이 작동하는지 테스트 할 수 있습니다.

06. 저장 버튼을 추가합니다

이제 저장 아이콘에 오버레이 상호 작용을 추가 해 봅시다. 여기서 우리의 목표는 방문자가 심장 모양의 아이콘을 클릭 할 때마다 레시피를 사용자 정의 만든 목록에 저장하고자하는지 묻는 팝업 창이 있어야합니다.

저장된 목록이라는 새 프레임을 작성하여 시작합시다. 이전과 마찬가지로이 프레임이 동일한 너비가 있는지 확인하십시오. 그러나이 시간은 클릭하면 오버레이로 표시되므로 높이를 줄여야합니다. 저장된 목록 프레임의 스타일의 경우 헤더를 추가하고, 텍스트 입력을 추가하여 목록의 이름과 저장을위한 CTA의 버튼을 입력하십시오.

링크하려면 비디오 프레임에서 심장 모양의 아이콘을 선택하고 저장된 목록 프레임에 링크를 추가하십시오. 이제 전환 속성 대신 푸시가되면 오버레이를 만듭니다. 80 %로 조정 한 다음 재생 버튼을 사용하여 테스트하십시오. 오버레이에 만족할 때까지 수정하십시오. 저장된 목록 아이콘의 X 아이콘을 비디오 페이지로 연결하십시오.

이것은 Framer X를 사용하여 실행 가능한 대화 형 프로토 타입을 쉽게 만들 수있는 방법입니다. 또한 사용할 수있는 고급 도구가 있고 프레임 요소에 반응 코딩 스 니펫을 추가하는 것도 있습니다. 또한 Framer X의 가장 중요한 부분은 일부 프로토 타입을 사용하여 누구나 그것을 시도함으로써 그것을 마스터 할 수 있다는 것입니다.

이 기사는 웹 디자이너 및 개발자를위한 세계에서 가장 잘 판매하는 잡지 인 NET 325에 출판되었습니다. 구매 문제 325. 또는 구독 그물에.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — GenerateJS에서 더 나은 JavaScript를 구축하는 방법을 배우십시오 (이미지 크레디트 : 미래 / 레미 샤프 / 필 Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

PenerateJS에서 JavaScript SuperStars의 라인업으로 4 월 2020 일에 가입하십시오. 지금 예약하십시오 generateConf.com.

자세히보기 :

돋보이고 UX 디자이너로 고용되는 방법
당신이 알아야 할 20 개의 UX 팁
22 베스트 UI 디자인 도구

Framer X를 사용하여 대화 형 프로토 타입을 구축

Framer X가있는 앱을 만드는 방법

01. 검색 창을 빌드하십시오

02. 콘텐츠 스택을 만듭니다

03. 수직 스택을 만듭니다

04. 새 페이지를 만듭니다

05. 상호 작용을 소개합니다

06. 저장 버튼을 추가합니다

어떻게 - 가장 인기있는 기사

CSS로 SVG에 애니메이션을 추가하는 방법

보기 소스에서 JavaScript 코드를 숨기는 방법

돔 라이트로 3D 작업을 비추십시오

아이들을 위해 애니메이션을 배우기

금속 반사를 그리는 방법

전통적인 영국 마을 장면을 칠하는 방법

스크래치로부터 전자 상거래 사이트를 만드십시오

야생 서쪽 트위스트로 만화를 만드는 방법

카테고리