Principle은 디지털 디자인과 프로토타입을 생생하게 표현하도록 지원하는 상호 작용 디자인 도구입니다.

스크롤 또는 스와이프에서 여러 상태 관리, 맞춤형 애니메이션 제작 및 매우 매끄러운 전환까지 매우 다양한 상호 작용을 사용할 수 있습니다. 여기에서 Principle에 대해 자세히 알아보세요.

Figma를 Principle 계정에 연결하면 Figma에서 디자인을 쉽게 가져와서 고급 애니메이션 제작을 시작할 수 있습니다.

Figma와 Principle을 함께 사용하면 디자인의 모양과 느낌이 진짜 같습니다.

이 문서에서는 다음 방법에 대해 살펴봅니다.

Figma와 Principle 연결

Figma와 Principle을 연결하려면 Figma와 Principle에서 생성한 계정이 있어야 합니다. Principle은 현재 macOS에서만 사용할 수 있습니다.

Figma에서 처음 디자인을 가져오려고 하면 연결 승인을 위해 Figma 계정 세부 정보를 입력하라는 메시지가 표시됩니다. 이러한 메시지는 Figma에서 가져오기 옵션을 처음 사용할 때만 표시됩니다.

Principle을 엽니다.
메인 메뉴에서 파일로 이동하여 Figma에서 가져오기를 선택합니다.
또는 가져오기 버튼을 클릭합니다.
옵션에서 Figma를 선택합니다.
Figma에 연결 버튼을 클릭합니다.
그러면 브라우저 창이 열립니다. 로그인하지 않은 경우 Figma 계정에 로그인하라는 메시지가 표시됩니다.
액세스 허용을 클릭하여 확인합니다.
Principle로 돌아갈지 묻는 대화 상자가 표시됩니다.

참고: Principle로 직접 리디렉션되지 않으면 승인 창을 닫고 Principle로 돌아갈 수 있습니다. 겉보기에는 그렇지 않을 수도 있지만, 이제 연결이 성공적으로 설정된 것입니다.

Figma에서 디자인 가져오기

두 애플리케이션이 연결되었으므로 이제 디자인을 Principle로 직접 가져올 수 있습니다. 참고: Figma 내에서 파일을 Principle로 내보낼 수는 없습니다.

파일의 페이지에서 모든 프레임을 가져오거나 선택한 프레임을 가져올 수 있습니다.

Principle을 엽니다.
메인 메뉴에서 파일로 이동하여 Figma에서 가져오기를 선택합니다.
또는 가져오기 버튼을 클릭합니다.
옵션에서 Figma를 선택합니다.
그런 다음, 제공된 필드에서 문서를 선택할 수 있습니다. 그러면 최근에 편집된 파일

이 표시됩니다.

참고: 멀티플레이어를 사용한 파일(예: 여러 편집자가 협업하는 파일)은 최근에 편집된 파일 제안에서 우선순위를 갖습니다.
페이지 가져오기를 클릭하여 페이지의 모든 프레임을 가져옵니다.
또는 선택한 프레임 가져오기를 클릭하여 Figma에서 현재 선택한 프레임을 가져옵니다.

참고: 이 시점에서 Figma로 넘어가서 가져오려는 특정 프레임을 선택할 수도 있습니다. 그러면 Principle의 선택 항목이 업데이트됩니다.
Figma가 현재 레이어를 렌더링하고 있음을 나타내는 상태 메시지가 표시됩니다.
그런 다음, 프레임이 Principle의 아트보드에 추가됩니다.
각 개체는 Figma에서와 마찬가지로 개별 레이어로 렌더링됩니다. 왼쪽의 레이어 패널에서 또는 캔버스에서 직접 개별 개체를 선택할 수 있습니다.