코드 컴포넌트
Framer 기본 기능으로 안 되는 것은 React 코드로 직접 만들 수 있습니다. 이것이 Framer가 다른 노코드 도구보다 강력한 이유입니다.
코드 컴포넌트란?
.tsx 파일로 작성하는 React 컴포넌트입니다. Framer 캔버스에서 일반 요소처럼
배치하고, 속성을 노출할 수 있습니다.
import { addPropertyControls, ControlType } from "framer"
export default function Hello(props) {
return <div style={{ fontWeight: 700 }}>안녕하세요, {props.name}님!</div>
}
Hello.defaultProps = { name: "방문자" }
addPropertyControls(Hello, {
name: { type: ControlType.String, title: "이름" },
})Property Control
addPropertyControls로 정의한 값은 Framer 오른쪽 패널에서 노코드로 조절
가능합니다. 디자이너가 코드를 몰라도 텍스트·색상을 바꿀 수 있게 됩니다.
코드 컴포넌트는 외부 라이브러리(차트, 지도 등)를 가져와 쓸 때 특히 유용합니다.
⚠️
Framer에는 코드 컴포넌트의 플랫폼 제약(허용되는 API, 레이아웃 어노테이션 등)이 있습니다. 본격적으로 만들 때는 공식 문서와 제약 사항을 함께 확인하세요.
다음 단계
자주 묻는 질문
Last updated on