Flowstep과 Figma는 경쟁 도구가 아니라 상호 보완적인 도구입니다. Flowstep으로 UI 디자인 아이디어를 빠르게 만들고 탐색하세요. Figma에서는 결과물을 다듬고, 협업하고, 실제 제품에 쓸 수 있는 작업으로 완성하세요. 두 도구를 함께 쓰면 각각의 장점을 모두 얻을 수 있습니다.
Flowstep 디자인을 Figma로 복사하는 방법
1
Flowstep에서 화면 하나 이상 선택
화면을 클릭해 선택하거나, 여러 화면을 선택해 한 번에 복사하세요. 캔버스에서 선택 영역이 강조 표시되어 있는지 확인하세요.
2
선택 항목 복사
Mac에서는 **Cmd+**⇧+C를, Windows에서는 **Ctrl+**⇧+C를 누르세요. 작업하는 동안 Flowstep에 “Preparing your design. Stay on the current tab.”(디자인을 준비하는 중입니다. 현재 탭에 머물러 주세요.)이 표시됩니다. 복사는 잠시 후 완료됩니다.
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가 요청을 제한하거나 응답이 느리면 잠시 기다린 뒤 다시 시도하세요. 커뮤니티 템플릿이라면 먼저 팀으로 복제한 다음 새 링크를 붙여넣으세요.