Flowstep과 Figma는 경쟁 도구가 아니라 상호 보완적입니다. Flowstep은 UI 디자인 아이디어를 빠르게 생성하고 탐색하는 데 도움이 되고, Figma는 정제하고, 협업하고, 프로덕션 준비 작업을 구축하는 곳입니다. 둘을 함께 사용하면 최고의 이점을 얻을 수 있습니다.
Flowstep 디자인을 Figma로 복사하기
1
Flowstep에서 하나 이상의 화면 선택하기
화면을 클릭하여 선택합니다 — 또는 여러 화면을 선택하여 한 번에 모두 복사합니다. 캔버스에서 선택 항목이 강조 표시되어 있는지 확인합니다.
2
선택 항목 복사하기
Mac에서 Cmd+⇧+C를 누르거나 Windows에서 Ctrl+⇧+C를 누릅니다. Flowstep은 작업 중에 “Preparing your design — stay on this tab and keep the screen selected”를 표시합니다. 복사는 곧 완료됩니다.
3
Figma 파일에 붙여넣기
Figma로 전환하고 디자인을 배치하려는 파일을 엽니다. Mac에서 Cmd+V를 누르거나 Windows에서 Ctrl+V를 누릅니다. Flowstep 화면이 Figma 캔버스에 나타나고 편집할 준비가 됩니다.
Figma로 복사하기는 브라우저의 클립보드를 사용하므로 브라우저가 Flowstep 클립보드 액세스를 허용해야 합니다 — 권한 오류가 표시되면 브라우저 설정에서 클립보드 액세스를 허용하고 다시 시도합니다. 복사 중에 탭을 전환하면 전송이 중단되므로, 복사가 완료될 때까지 Flowstep 탭에 포커스를 두십시오.
Figma에서 디자인 가져오기
반대로 Figma 프레임을 Flowstep으로 편집 가능한 화면으로 가져올 수도 있습니다. 가져오기는 모든 사람이 사용 가능합니다 — Figma 계정을 한 번 연결한 다음 프레임 링크에서 가져옵니다.1
Figma 연결하기
설정에서 Figma 계정을 Flowstep에 연결합니다. Flowstep은 Figma 권한을 사용하여 액세스 권한이 있는 파일을 읽습니다.
2
Figma에서 프레임 링크 복사하기
Figma에서 원하는 프레임을 마우스 오른쪽 클릭하고 Copy link to selection을 선택합니다. 페이지 링크를 복사하여 한 번에 모든 최상위 프레임을 가져올 수도 있습니다.
3
Flowstep으로 가져오기
Flowstep 도구 모음에서 Figma 가져오기 옵션을 사용하고 링크를 붙여넣습니다. Flowstep은 프레임을 캔버스의 편집 가능한 요소로 변환합니다. 동일한 프레임을 다시 가져오면 제자리에서 업데이트됩니다.
가져오는 항목
Flowstep은 Figma 프레임을 기본 편집 가능한 요소로 재생성합니다 — 평면 이미지가 아닙니다. 가져오기에는 다음이 포함됩니다.- 프레임 및 중첩 레이어
- 텍스트(굵기, 색상, 굵게 등 문자당 스타일 포함)
- Figma 변수의 색상
- 이미지 채우기, SVG 아이콘 및 셰이프
- 드롭 및 내부 그림자, 레이어 및 배경 흐림
- 대시 및 점선 스트로크
파일의 조직에서 Figma를 연결해야 합니다. 프레임을 가져올 수 없는 경우 Flowstep은 다음에 수행할 작업을 알려주는 실행 가능한 메시지를 표시합니다 — 예를 들어, 권한이 만료된 경우 Figma를 다시 연결하거나, Figma가 속도 제한을 하거나 느린 경우 기다렸다가 다시 시도하거나, Community 템플릿의 경우 먼저 팀으로 복제한 다음 새 링크를 붙여넣습니다.