[Framer] Figma에서 Framer 로 작업물 가지고 오기

 

 

 

안녕하세요 다자이너 입니다 👀💛

 

다들 열심히 공부하고 계신가요~~
저는 사실 취업을 했는데요!!


(부끄),,,👩🏻‍💻

이제 막 회사에 적응 하는 단계를 지나
드디어 공부를 하고, 제 자신도 디벨롭 할 수 있는 여유가 생겼답니다!ㅎㅎ


언제 다시 바빠질지 모르니
블로그에 강의 내용 기록하며,
그래서 미루고 미루던 프레이머 배워보겠습니다,,,!!




⬇️ 이전 글이 궁금하다면
https://dori-wine.tistory.com/23

서울의 5대 디자인 학원을 알아보다! 1편 ㅣ 아마스에잇, 윤빌리티 강남 ,디자인 나스, 리메인 커

 

 

---

 

 

 

https://www.youtube.com/watch?v=qz9cL_F0lig

 

 

 

1. figma 내에서 플러그인 Figma to HTML with Framer로 섹션을 나눠 파일 보내기
➡️ 추출시 그대로 나타나지 않고, 형태가 일그러졌을때는 하나씩 추출해 합쳐서 사용
➡️ 이미지 그리드 section, 하단의 배너 등 섹션별로 나누어 가지고 감

플러그인이 제대로 작동하지 않을수 있고, framer에서 섹션별로 다시 정리 해야하기 때문
* 반응형 페이지로 적용하려면 그룹핑을 다시 해야하기도 함


Command + option+ enter = columns, row로 묶기 (figma  : shift + A 유사)

* figma와 동일하게 모든 프레임으로 묶어줘야되는게 포인트!
F : 프레임 생성
Command + ; = 프레임 비활성화 ➡️ 비활성화 했을때 어떤 차이가 있는지 명확하게 확인이 가능함

2. figma와 차이점
figma와 달리 rectagle도 frame처럼 autolayout 적용이 가능

3. Graphic레이어를 수정하고 싶을때
상위 레이어로 씌어버리기 = Command + option+ enter

 

 

 

 

이미지 파일의 경우 auto가 아닌 다른 걸로 변경 -> 불필요한 로딩을 줄일수 있음