[Framer] 프레이머 스터디 : 디자인 불러오기

스케치에서 디자인 한 화면을 프레이머로 불러오기

 

프레이머에서 화면을 구성하는 방법은 세 가지가 있다. 
방법1. 프레이머 내부의 디자인 탭을 이용해 직접 디자인하는 방법
방법2. 코드 탭을 사용하여 레이어를 추가하는 방법
방법3. 외부 그래픽 도구에서 화면을 가져오는 방법

 

프레이머 공식 홈페이지에서는 최적의 프레이머 Work Flow를 위해 디자인 탭에서 직접 디자인을 하는 것을 권장한다. 하지만 실제 업무에서 모든 디자인을 프레이머로 하기에는 다소 무리가 있다. 그래서 오늘은 외부 그래픽 툴로 디자인한 화면을 프레이머로 불러와 인터렉션을 적용하는 방법에 대해 정리해보려고 한다.

 

 

방법01 

어렵지 않다. 

 

스케치에서 불러오고 싶은 레이어나 아트보드를 선택하고 cmd + c, 프레이머의 디자인 탭에서 cmd + v 그룹핑을 포함한 대부분의 계층구조가 동일하게 복사되었음을 확인 할 수 있다. 

 

그 다음, 디자인된 화면을 코드 탭으로 불러오기 위해서는 Targeting 타겟팅이라는 것이 필요하다.

 

Targeting 타겟팅 
디자인 탭에서 만든 화면을 코드 탭에서 사용하기 위해서는 타겟팅이 꼭 필요하다. 타겟팅을 사용하려면 목록의 레이어 오른쪽에 있는 타겟 아이콘을 클릭하거나 마우스 오른쪽 버튼의 ‘Rename to Target’을 클릭하자. 레이어에서 타겟팅을 사용하면 입력 필드가 활성화되는데, 이때 지정한 이름이 코드 탭에서 쓰이는 식별자가 된다. 타겟을 삭제하려면 타겟 아이콘을 누른 후 입력 필드를 지워주거나, 해당 레이어를 마우스 오른쪽 버튼으로 클릭하고 ‘Delete Target'를 선택하면 된다.

 

정확한 명령을 위해서는 먼저, 정확한 이름을 불러주는 것이 중요하다. 이것이 모든 개발의 핵심이다. 인터렉션을 적용하고자 하는 레이어에 타겟팅을 한 후 코드 탭으로 넘어가보자. 

 

아직 캔버스에 따라서 디자인한 화면이 보이지않거나 잘려서 일부만 보인다. 

어떻게 노출될 지 전혀 알려주지 않았기 때문. 

 

자, x: 와 y: 를 사용하여 레이어의 위치를 지정해주자.

 

내가 지정한 위치에 디자인이 이쁘게 안착되었다. 

 

 

방법02 

불러오고자 하는 .sketch, Figma 또는 .psd 파일을 연다. 그런다음, 프레이머를 실행하고 코드 탭으로 이동하여 왼쪽 아래 사이드 바에서 Import(가져오기) 아이콘을 클릭하자. (프레이머를 먼저 열든 순서는 크게 상관없는 듯 하다. 중요한 건 프레이머로 불러올 때 해당 디자인 프로그램이 켜져있어야한다.)

 

 

위와 같은 팝업이 뜬다. 가져오기 설정으로 @1x, @1.5x, @2x, @3x, @4x 이런식으로 크기를 선택할 수 있다. 불러올 크기를 선택한 후 Import 버튼을 클릭.

 

 

파일을 성공적으로 가져오면 다음과 같이 코드 행이 삽입된다. 기본적으로 파일 이름은 가져오기에 사용한 앱의 이름을 따서 지정된다. 

 

Import로 불러온 화면은 디자인 탭에서 확인 할 수 없다. 그렇다면 타겟팅은 어떻게 하지? 

기본적으로 디자인 프로그램에서 사용한 이름을 그대로 사용하는 듯 하다. 테스트 해 본 결과. 아트보드와 그룹은 타겟팅이 되어 인터렉션을 지정 할 수 있었으나, 심볼이나 텍스트, Rectangle 등의 개별 레이어는 타겟팅이 불가능 했다. 

 

아래 예제를 보자.

sketch.layerA.opacity = 0.5

 

프레이머로 불러온 스케치 파일에 있는 그룹 layerA에 투명도를 준다는 뜻. 그룹에 배치된 레이어 그룹을 자식 레이어 라고하는데, 그룹 내에 두 개의 자식 레이어가 있다고 해도 각각을 직접 선택할 수 있으므로 코드 작성시 레이어 계층 구조를 고려할 필요가 없다.