Framer 시작하기 4화 ⎮ Figma에서 Framer로 가져오기, 복잡한 이미지, 가로스크롤, 그래픽 레이어, 간격 디테일 잡기, 반응형 만들기

Figma에서 Framer로 작업물을 가져와 작업해보는 내용을 다뤘습니다. Figma에서 플러그인을 활용해 Framer로 가져오고 반응형 페이지로 적용시키는 것까지 꿀팁을 최대한 담아낸습니다. 이번 영상은 조금 실수가 많았네요ㅠ 놓친 부분들은 영상 화면에 Notice로 첨부했으니까, 같이 봐주시면서 따라와주시면 좋겠습니다. 감사합니다!

————————————————

Figma 예제 템플릿 링크 ▼
https://www.figma.com/community/file/...

국내 프레이머 유저 모임 커뮤니티 ▼
카카오톡 오픈채팅방 ⎮ [프유모] 검색

————————————————

00:00 오프닝
00:30 오늘의 핵심 포인트
01:27 Figma to Framer 플러그인
02:20 플러그인 주의할 점
02:45 예제 만들기 - 타이틀 섹션 가져오기
03:49 간격 잡기 1
05:22 간격 잡기 2
06:04 Figma에서 색 추출하기
06:45 예제 만들기 - 이미지 섹션 가져오기
10:04 이미지 그리드 쉽게 작업하기
11:45 예제 만들기 - 배너 섹션 가져오기
12:03 복잡한 이미지 다루기 1
14:26 간격 디테일 잡기 1
15:49 예제 만들기 - 네비게이션 풋터 섹션 가져오기
17:19 간격 디테일 잡기 2
17:28 그래픽 레이어 다루기 1
18:16 그래픽 레이어 다루기 2
18:35 이미지 추출하기
21:29 예제 만들기 - 반응형으로 만들기
25:10 Max width 활용하기
25:43 예제 만들기 - 모바일 레이아웃 잡기
26:37 가로 스크롤 활용하기
30:03 텍스트 문단 간격 조절하기
31:11 클로징

————————————————

음악 taeho9raphy