안녕하세요 여러분, 피피팀 시원
입니다.
입니다.이번 주에는 Figma SITES에서 코드 레이어(Code Layer)를 활용해 커스텀 폰트와 이펙트를 적용하는 방법을 소개해드릴게요.
지금까지 SITES에서는 구글 폰트만 지원해서 아쉬웠던 분들이라면 꼭 주목해주세요!
코드 레이어 켜기
사용할 웹폰트 찾기
(예시에서는 눈누에서 웹폰트를 가져왔습니다)
코드 레이어에 붙여넣기
프로퍼티 작동 확인하기
Present에서 미리보기
Publish 하기
웹에서 최종 확인하기이렇게 코드 레이어를 활용하면 사이트에서도 충분히 커스텀 폰트를 손쉽게 적용할 수 있고, 동시에 이펙트까지 적용해 볼 수 있어요.
어떤 이펙트가 있는지 궁금하다면
https://figmasiteinteractionsfreeview.figma.site/ 예시에서 사용한 프롬프트 (프로퍼티 추가 가능)
폰트는 아래 코드를 써주고, 텍스트에 Typewriter 효과 넣어줘.
디자인 패널에서 텍스트 인풋필드, Loop 토글, 커서 토글 보이게 해줘.@font-face {
font-family: 'KCC-Sonkeechung';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KCC-Sonkeechung.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
