찾고 찾다가 도저히 없어서 정보 공유 차원에서 작성합니다.
Figma Prototype Framer로 Embed 하는 방법
피그마 프로토타입 프레이머로 임베드
프레이머에 figma 프로토타입 갖고오기
Embedding live Figma Prototype into my Framer Site
프레이머로 내 피그마 프로토 타입 갖고오는 방법
1. 프레이머에서 피그마 프로토 타입을 임베드 하면 나타나는 문제
- 피그마 UI도 함께 뜬다
-사이즈 조절이 힘들다
Figma → Framer Embed Converter (Simple)
미리보기 * Framer에서 최종 크기 조절 Share 링크를 붙여넣으면 미리보기가 나타납니다.
melodious-valkyrie-8e3c85.netlify.app
이 사이트에 들어가서 진행하면 됩니다. (버그, 광고 아님.. 그냥 제가 만들었어요)
* 위 사이트가 안된다면 댓글을 달아주세요.
2. 사용방법
Copy Link의 링크를 복사합니다. (Figma)
* 사이즈는 원하는 디바이스의 사이즈를 입력합니다 (390*844 등)
* 디자인 파일이 지저분한 것보다는 깔끔한 파일들이 오류가 적은것 같습니다(느낌상)
* 배경은 #ffffff, 투명 , 혹은 프레이머 속 배경색과 맞춰주세요.
결과값으로 나온 링크를 복사합니다.
*미리보기가 안되는 경우도 있습니다. 수정예정
프레이머 Insert > embed > Html 에 붙여넣기 합니다.
*Z-index는 0으로 합니다.
*목업 이미지는 클릭되지 않아야 뒤쪽 프로토 타입을 움직일수 있으니 클릭되지 않게 포인터 값을 none으로 해주세요.
문제가 있으면 댓글 달아주세요.