도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

Sketch 디자인을 Framer로 가져 오는 3 가지 방법

대부분의 프로토 타이핑 앱은 Sketch에서 가져옵니다, "Framer" 역시 Sketch를 가져 올 수 있습니다.   이러한 통합이 더욱 심화됨에 따라, 더 많은 옵션을 사용할 수있게되었습니다. Framer에는 이제 디자인을 가져 오는 여러 가지 방법이 있습니다. 

그중 옳은 길은 없습니다!!!!

1. Framer Design에 복사/붙여 넣기


이번 주 Framer는 "Framer Design"을 발표했습니다. Framer Design은 Framer 내부의 UI 편집기입니다. artboards, shapes 등등..  기능을 갖추고 스케치와 비슷합니다. 그렇다고 스케치 레이어를 안으로 가져올수있다는 생각은 하지  마십시오. 아직 그 정도는 아닙니다.

출력 형식 - Output format

Images -이 방법을 사용하면 Sketch 파일에서 필요한 레이어를 복사하여 Framer artboard에 배치 할 수 있습니다.

장점

빠르고 단순하다

단점

이미지로 붙여 넣었습니다. Sketch에서 복사하면 선택 항목이 rasterized PNG로 평평하게됩니다. 즉, 레이어가 잘 확장되지 않고 픽셀 화 될 수 있습니다. 이 방법을 사용하면 텍스트, 모양 색상 및 기타 속성을 조작 할 수 없으므로 Sketch에서 가져 와서 Framer에서 새 레이어를 만들 때 혼합하고 일치시켜야 할 경우가 있습니다.

또한 붙여 넣은 이미지는 어떤 종류의 네이밍 규칙도 유지하지 않습니다. 레이어 이름 "image"만

Notes

1x에서 디자인 하고,  2x에서 프로토 타이핑합니까? 걱정 마세요! 스케치 스케일 기능 (cmd + K)을 사용하기 만하면됩니다.

2. Copy-Framer-Code Plugin 사용


자일즈 페리 (Giles Perry)의 Sketch에서 직접 프레이머 코드 (Framer Code)를 복사 할수있도록해준 그의 멋진 플러그인에 감사합시다. 원칙은 간단합니다 : 스케치에서 shapes을 선택하고, 플러그인을 사용하여 바로 코드로 Framer에 붙여 넣으십시오!

출력 형식

Framer Layers. - 이보다 더 좋을 수는 없겠지요.

장점

편집 가능한 텍스트를 포함하여 Native layers를 즉시 사용하고 조작 할 수 있습니다.

단점

붙여 넣은 레이어는 적절한 프레이머 정렬 기능 (Align.center 등)을 사용하지 못하며 엄격한 X, Y 및 너비를 사용합니다. 큰 문제는 아니지만 이러한 기능을 누군가는 원할 수도 있습니다.

Notes

Framer에서는 shapes과 text를 계속 조작 할 수 있으므로이 방법을 적극 권장합니다. (그러나 Framer Design 에서는  아직 안됩니다. ㅠ)

스케치에서  프레이머 (Scetch into Framer)로 이미지와 아이콘 (페이지 하단 확인)을 복사하여 붙이기위한 튜토리얼을 확인하십시오.

3. Framer Import


이것은 지금까지 존재해온 표준 Framer 임포트입니다. 사용이 매우 쉽고 간단합니다.

출력 형식

Images.

장점

가져온 Framer 's Sketch는 필요한만큼 반복 할 수 있으며, 가져온 원본파일 위에 쓰기를 할 수 있습니다. 따라서 프로젝트를 근본적으로 변경하거나 처음부터 다시 시작하지 않고도 디자인을 쉽게 조정하고 다시 가져올 수 있습니다.

단점

이 방법은, 또 다른 이미지 문제로 인해 어려움을 겪습니다 : 크기 조정 못함, 크기 조정 못 함, 편집 가능한 텍스트 없음.

Notes

이것은 여전히 빠른 프로토 타이핑의 가장좋은 방법일수있지만, 장기 솔루션은 아닙니다. Framer Design이 제품을 완전히 새로운 수준의 Sketch 통합으로 탈바꿈 할 것으로 기대해봅니다.


Framer와 Sketch를 함께 사용하지 못하게하는 변명의 여지가 없습니다! 우리는 선택권이 많이있다. (프레이머 팀에서이 글을 읽는다면 실제 프레이머 디자인 shapes으로 복사 할 방법을 만들어 주세요).


번역글입니다. 원본링크




리뷰