Framer에서 빨리 만들어지는 Figma 파일 세팅법

Figma 파일은 이렇게 세팅하세요. 데스크톱 프레임을 가로 1200으로 잡으세요. 바깥 프레임까지 포함해 모든 컨테이너에 오토 레이아웃을 거세요. 요소마다 fill로 갈지 고정으로 갈지 Figma에서 미리 정하세요. 이렇게 하면 랜딩 페이지 하나가 반나절이면 Framer로 넘어가요. 건너뛰면 페이지 절반을 손으로 다시 만들게 되는데, 하루짜리 작업과 사흘짜리 작업의 차이가 여기서 갈려요.

Framer가 실제로 쓰는 폭에 맞춰 디자인하세요

Framer 캔버스에는 브레이크포인트가 세 개 있고, 제품 페이지에도 Desktop 1200과 Tablet 810이라는 탭이 보여요. framer.com에 게시된 코드도 같아요. 반응형 이미지가 min-width 1200px, 810px부터 1199.98px까지, max-width 809.98px 규칙으로 제공돼요. 그러니 데스크톱 프레임은 가로 1200으로 만드세요. 태블릿에서 레이아웃이 정말 달라진다면 가로 810 프레임을 추가하세요. 휴대폰 프레임은 390 근처로 잡으면 돼요. 1440으로 디자인하고 잘되기를 바라면, 내 모니터에서만 멀쩡한 히어로가 나와요.

바깥 프레임까지 전부 오토 레이아웃

Framer 아카데미 수업은 오토 레이아웃과 위계, fill 속성이 가져오기 과정에서 그대로 따라온다고 말해요. 이게 핵심이에요. 오토 레이아웃으로 만든 섹션은 크기를 어떻게 바꿔야 하는지 이미 아는 스택으로 Framer에 들어가요. 박스를 눈대중으로 끌어다 놓은 섹션은 흩어진 레이어로 들어와서 다시 만들어야 하고요. 모든 섹션을 세로 오토 레이아웃으로 감싸세요. 모든 줄은 가로 오토 레이아웃으로 감싸고요. 빈 공간으로 간격을 벌리지 말고 gap을 쓰세요. 오토 레이아웃 프레임 밖에 있는 레이어는 두 번 만들게 될 레이어예요.

넘기기 전에 fill인지 고정인지 정하세요

Figma에서 섹션을 감싸는 프레임은 fill container로 두세요. 안쪽 콘텐츠 프레임에는 1200이나 1140 같은 고정 최대 너비를 주세요. 한 줄에 들어가는 카드는 fill로 두면 너비를 고르게 나눠 가져요. 이 구조가 Framer로 그대로 옮겨져요. Framer에서는 Width를 100%나 1fr로 두고 콘텐츠 프레임에 Max Width를 주면 되니까요. Framer 문제 해결 문서는 Phone 브레이크포인트에서 페이지가 화면을 채우지 못하는 가장 흔한 이유로 고정 너비나 지나치게 큰 Max Width를 꼽아요. Figma에 남겨 둔 고정 숫자 하나하나가 그대로 넘어가는 버그예요.

텍스트 스타일에 이름을 붙이고 재사용하세요

서체 크기에 이름을 붙이고 계속 재사용하세요. H1, H2, H3, 본문 큰 것, 본문, 캡션, 아이브로우 정도면 충분해요. Framer에서는 이걸 Assets 패널의 Styles에서 한 번 다시 만들고, 오른쪽 패널 Text와 Styles에서 적용해요. Framer 텍스트 스타일은 Desktop과 Tablet, Mobile 브레이크포인트별로 글자 크기와 행간, 자간, 문단 간격을 따로 가질 수 있어요. Figma 파일에 조금씩 다른 제목 크기가 열네 개 있으면, 텍스트 스타일을 열네 개 만들거나 모바일에서 어색한 글자 크기를 그냥 안고 가야 해요.

폰트 라이선스는 무드보드 단계에서 확인하세요

Framer에는 Google Fonts와 Fontshare가 들어 있고, 폰트 선택기의 Custom 탭에서 파일을 직접 올릴 수도 있어요. Framer는 웹사이트에 폰트를 올리기 전에 라이선스를 확인하라고 안내해요. 데스크톱 라이선스는 Figma 목업까지만 커버해요. 실제로 서비스되는 페이지는 커버하지 않고요. 이건 서체를 고르는 단계에서 정리하세요. 출시 전날 밤에 폰트를 바꾸면 페이지의 모든 줄바꿈이 같이 바뀌어요.

이미지는 화면에 보이는 크기에 맞춰 내보내세요

Framer는 이미지를 엣지에서 WebP와 AVIF로 압축하고 기기별로 크기를 다시 만들어 줘요. 성능 문서에 그렇게 적혀 있어요. 전달 방식은 이걸로 해결돼요. 다만 가로 4000픽셀짜리 스크린샷을 그대로 붙여 넣은 것까지 되돌려 주지는 않고, PNG 로고를 SVG로 바꿔 주지도 않아요. 래스터 이미지는 화면에 보이는 크기의 두 배 정도로 내보내세요. 로고와 아이콘은 SVG를 쓰세요. 대체 텍스트는 내용이 머릿속에 남아 있을 때 미리 써 두세요.

Figma 파일 전달 전 체크리스트

Figma 파일을 끝냈다고 말하기 전에 일곱 가지를 확인하세요. 데스크톱 프레임이 가로 1200인가. 모든 섹션이 오토 레이아웃 프레임 안에 있는가. 섹션 프레임은 fill이고 콘텐츠 프레임이 최대 너비를 가지고 있는가. 서체가 이름 붙은 스타일로 돌아가고, 혼자 튀는 크기가 없는가. 폰트에 웹 라이선스가 있고 파일이 업로드 준비돼 있는가. 이미지를 적당한 크기로 내보냈고 벡터는 SVG인가. 레이어 이름이 Framer 레이어 목록에서 보고 싶은 이름 그대로인가. 이름은 적어 둔 그대로 넘어가거든요.