Figma에서 가져오기

Send to Vibr는 Figma 플러그인입니다. Figma에서 열려 있는 파일(변수, 스타일, 컴포넌트, 프레임, 프로토타입 링크)을 읽어 하나의 파일로 저장합니다. Vibr는 그 파일을 가져와 내 디자인 시스템과 모델로 빌드합니다.

플러그인 설치하기

Figma에서 플러그인 메뉴를 열고 Send to Vibr를 검색해 실행하세요. 이 플러그인은 Starter를 포함한 모든 Figma 요금제에서 작동합니다.

보낼 항목 선택하기

플러그인은 파일 전체부터 요소 하나까지, 선택한 수준의 내용을 보냅니다.

• 파일 전체: 각 페이지의 프로토타입 플로, 플로가 없으면 그 페이지의 화면을 페이지별로 보냅니다. 표지, 썸네일, 구분용 페이지는 건너뜁니다.
• 아무것도 선택하지 않은 페이지: 그 페이지의 플로, 플로가 없으면 페이지의 모든 화면을 보냅니다.
• 섹션: 섹션 안의 프레임을 각각 화면으로 보냅니다.
• 프레임: 그 화면을 보냅니다.
• 요소: 컴포넌트, 인스턴스 또는 프레임 안의 레이어입니다. Vibr는 이를 재사용 가능한 컴포넌트로 따로 빌드합니다.

원하는 항목을 선택하거나, 플러그인 상단에서 This page or selection 또는 Whole file을 선택하세요. 플러그인에 보낼 항목이 나열됩니다. 섞어서 보낼 수도 있습니다. 예를 들어 화면 하나와 요소 두 개를 함께 보낼 수 있습니다.

그 아래에서 함께 보낼 항목을 선택하세요.

• Screens and elements, with layout and prototype links와 Include frames they link to를 선택하면 플로가 통째로 전달됩니다. 그 안의 사진도 디자인에 보이는 대로 잘린 상태로 함께 전달됩니다.
• Variables, text styles and shadows는 파일 전체에서 가져옵니다.
• Components는 배리언트와 함께 보냅니다. 화면에서 사용하는 컴포넌트가 먼저 옵니다.

파일 하나에는 화면과 요소 최대 12개, 사진 12개, 컴포넌트 80개, 변수 1,500개가 담깁니다.

파일 저장하기

Save file for Vibr를 선택하세요. 플러그인이 .vibr-figma.json으로 끝나는 파일을 저장합니다. Copy를 선택하면 같은 내용을 파일 대신 클립보드에 복사합니다.

Vibr로 가져오기

입력란에서 **+**를 선택한 다음 Figma에서 가져오기를 선택하고 파일을 고르세요. 파일을 입력란에 놓거나, Copy로 클립보드에 복사한 내용을 붙여 넣어도 됩니다.

대화 상자에 Vibr가 만들 항목이 나열됩니다. 원하지 않는 항목은 선택을 해제하세요.

• 변수로 만든 색상 테마는 라이브러리에 추가됩니다.
• 타입 램프는 글꼴 패밀리마다 하나씩 라이브러리에 추가됩니다.
• 프레임의 사진은 업로드한 이미지처럼 라이브러리에 추가되어 화면에 실제 사진이 표시됩니다.
• 만들 화면과 요소는 플로에서 방문하는 순서대로 빌드됩니다.

빌드를 선택하세요. Vibr는 각 화면을 내 디자인 시스템과 모델로 개별 요청처럼 빌드하고, 프레임 이름으로 저장한 뒤 다음 화면으로 넘어갑니다. 입력란 위의 막대에 현재 빌드 중인 화면이 표시됩니다. 중지를 선택하면 실행이 끝나고 이미 빌드한 화면은 유지됩니다.

실행이 끝나면 Vibr가 첫 화면을 엽니다. 재생을 선택해 플로를 클릭하며 확인하세요. 플로를 참조하세요.

같은 파일을 다시 가져오면 처음 가져올 때 만든 테마와 타입 램프를 다시 사용합니다.

무엇이 무엇이 되나요

Figma에서	Vibr에서
색상 변수	색상 테마. Brand/500 같은 스케일과 color/clay 같은 짧은 이름이 테마의 색상이 됩니다. Vibr는 이 색상으로 라이트 및 다크 역할을 만들고 대비를 확인합니다.
반경 및 간격 변수, 그림자 스타일	테마의 모서리, 간격 단위, 그림자.
텍스트 스타일	글꼴 패밀리마다 하나씩 만드는 타입 램프. 크기, 굵기, 줄 높이, 자간을 포함합니다. Google Fonts에 글꼴이 있으면 Vibr가 거기서 불러옵니다.
이미지 채우기	라이브러리의 사진. 레이어 이름을 따서 이름이 붙고(Photo: latte pour라는 레이어는 @image/latte-pour가 됩니다) 화면에서 사용됩니다.
프레임	화면. 모델은 프레임의 그림과 레이어 아웃라인(오토 레이아웃, 텍스트, 컴포넌트, 각 레이어가 사용하는 토큰)을 받습니다.
프로토타입 링크	화면 사이의 링크. 뒤로 가기는 이전 화면으로 이동합니다. 오버레이는 그것을 여는 화면 안에 대화 상자나 시트로 빌드되며, 자체 링크를 가집니다.
컴포넌트	모델에 컴포넌트와 그 배리언트를 알려 주고, 디자인 시스템의 해당 요소로 빌드합니다.
요소	페이지 가운데에 놓인, 따로 빌드한 컴포넌트.

개인 정보 보호 및 안전

• 플러그인은 네트워크에 접근하지 않습니다. 저장한 파일 외에는 아무것도 Figma 밖으로 나가지 않습니다.
• Vibr는 파일을 읽기 전에 검사합니다. 텍스트는 숨은 문자를 제거한 일반 텍스트로 들어오며, 모든 값은 검사되고 크기가 제한됩니다. 각 그림은 Vibr가 여는 크기의 실제 이미지여야 하며, Vibr가 다시 그리므로 메타데이터가 제거됩니다. 사진은 업로드와 같은 검사를 거쳐 라이브러리에 추가됩니다. 텍스트는 입력한 요청과 같은 콘텐츠 검사를 거칩니다.
• 파일 안의 어떤 것도 실행되지 않습니다. 파일의 텍스트는 첨부한 문서와 마찬가지로 디자인 자료로서 각 요청과 함께 모델에 전송됩니다. 키, 개인 정보 보호 및 저장소를 참조하세요.

팁

• 화면 이름으로 쓰고 싶은 대로 프레임 이름을 지으세요. Checkout이라는 프레임은 @screen/checkout이 됩니다.
• 파일이 크면 파일 전체 대신 페이지나 선택 항목을 보내세요.
• 실행이 끝난 뒤에는 "장바구니를 하단 시트로 바꿔 줘" 같은 일반 요청으로 어떤 화면이든 다듬을 수 있습니다.