목차 보기
연동

Figma 화면 옮겨오기

그려 둔 화면을 자리·크기·색·글자 그대로 가져옵니다.

지금은 내 Figma 개인 토큰(읽기 전용)으로 가져옵니다. Figma 계정을 연결하는 정식 방식은 아직 열려 있지 않습니다.

무엇에 쓰나

디자이너가 이미 화면을 그렸다면, 그걸 말로 다시 설명하는 동안 그림이 사라집니다.

말로 옮기는 동안 여백과 크기가 가장 먼저 사라집니다.

화면을 설명과 고칠 수 있는 코드로 함께 가져옵니다. 내가 그린 배치에서 시작하게 됩니다.

준비물

Figma 파일 주소 또는 파일 키, 그리고 읽기 권한이 있는 개인 토큰입니다.

Figma 쪽에 아무것도 쓰지 않으므로 읽기 전용 토큰이면 충분합니다. 토큰은 Figma 설정에서 만들고, 다 쓰면 지우면 됩니다.

붙이는 순서

Figma에서 화면을 먼저 정리하세요. 레이어 이름을 붙이고 가능한 곳은 오토 레이아웃으로 두면 결과가 좋아집니다.

화면 하나씩 가져오는 편이 낫습니다. 파일을 통째로 넘기면 무엇을 만들지가 흐려집니다.

가져온 다음에 동작을 말로 적습니다. 그림은 모양을 주고, 문장은 기능을 줍니다.

확인하는 법

가져온 화면과 원래 그림을 같은 폭에서 나란히 놓고 비교해 보세요. 휴대폰 폭에서도 한 번 보세요.

글자·여백·모서리 둥글기·색·그러데이션·그림자가 잰 값 그대로 넘어옵니다.

다른 데가 있으면 그 부분만 말로 고치면 됩니다. 처음부터 다시 그릴 필요는 없습니다.

안 되는 것

  • 파일은 25MB까지, 이미지는 합쳐서 2MB까지 읽습니다.
  • 컴포넌트 인스턴스·벡터 도형·제약 조건은 아직 다 옮기지 못합니다.
  • 그림에는 동작이 없습니다. 버튼은 무엇을 할지 말해 주기 전까지 아무 일도 하지 않습니다.
  • 글꼴 파일은 넘어오지 않습니다. 특별한 글꼴을 썼다면 따로 말해 주세요.

다음에 볼 것