가이드

피그마에서 그린 화면 가져오기

프레임이 실제로 도는 페이지가 됩니다. 자리는 그린 그대로 옮겨집니다.

먼저 준비할 것

파일과, 내 피그마 계정에서 만든 읽기 전용 열쇠가 필요합니다.

  • 열 수 있는 피그마 파일.
  • 피그마 설정에서 만든 개인 읽기 열쇠.
  • 페이지 바로 아래에 놓인 프레임들. 안쪽에 파묻힌 것은 안 읽힙니다.

01 · 파일부터 정리합니다

페이지 바로 아래 놓인 프레임만 읽고, 24개까지입니다. 다른 프레임 안에 들어 있는 것은 부모의 일부로 그려집니다. 가져올 화면을 바깥으로 꺼내 놓는 데 1분이면 되고, 그러면 헷갈릴 일이 없습니다. 페이지를 여러 개 쓰고 있다면, 가져올 것만 남긴 페이지를 하나 만드는 방법도 있습니다.

02 · 읽기 열쇠를 만듭니다

피그마 설정에서 읽기 권한만 있는 개인 열쇠를 만드세요. 파일을 받아 오는 데만 쓰고 어디에도 적어 두지 않습니다. 중요한 파일을 고칠 수 있는 열쇠를 돌려쓰지는 마세요. 다 쓰고 나면 피그마 쪽에서 그 열쇠를 없애도 됩니다.

03 · 가져옵니다

피그마 화면에 파일 주소와 열쇠를 넣습니다. 파일은 25MB까지, 이미지 자료는 2MB까지 읽습니다. 이보다 크면 대개 안 쓰는 페이지가 남아 있는 경우라 먼저 지우는 편이 낫습니다. 손대지 않은 원본 사진이 그대로 들어 있는 경우도 흔합니다.

04 · 무엇이 넘어왔는지 봅니다

여섯 가지가 넘어옵니다. 자리는 가까운 단계로 반올림하지 않고 정확한 px로 적어 냅니다. 그래서 그린 화면과 나온 화면을 나란히 놓고 견줄 수 있습니다.

  • 자리와 크기
  • 자동 배치
  • 글자
  • 단색과 그라디언트
  • 이미지
  • 그림자

05 · 휴대폰 화면은 따로 시킵니다

그린 폭 그대로 나옵니다. 좁은 화면에서 어떻게 접힐지는 그림 파일 안에 들어 있는 정보가 아닙니다. 사람이 정하는 것이니 “휴대폰에서는 위아래로 쌓아 줘”라고 이어서 시키세요. 글자 크기와 여백까지 같이 일러 주면 한 번에 끝납니다.

여기까지 되면 끝그린 프레임이 그 크기 그대로 실제 페이지로 열리고, 휴대폰 배치까지 시켰으면 됩니다.

막히면

화면 절반이 안 넘어왔어요. 다른 프레임 안에 들어 있거나, 페이지에서 읽는 24개를 넘었을 가능성이 높습니다. 필요한 것만 바깥으로 꺼내고 다시 가져오세요.

만들어 둔 부품이 그냥 도형으로 왔어요. 부품을 부품으로 알아보는 것과 펜으로 그린 도형은 아직 지원하지 않습니다. 모양은 맞게 나오지만 다시 쓸 수 있는 부품은 아닙니다.

휴대폰에서 이상해요. 그럴 수밖에 없습니다. 고정 폭으로 그린 그림에는 390px에서 어떻게 되어야 하는지가 적혀 있지 않습니다. 큰 화면이 맞아떨어진 다음에 휴대폰 동작을 시키세요.

이어서 볼 것

여기 없는 데서 막히셨나요? 자주 묻는 질문을 먼저 보세요 — 거기에도 없으면 물어봐 주시면 답해 드립니다.