TypeFace
Typography
Figma 디자인 스타일에 넣어 두었습니다! 디자인 시 스타일을 사용해서 구현해주세요
Typography 적용 방법
- 로컬 컴퓨터에 Pretendard, Maplestory 폰트를 다운받는다.
다운로드 링크
- 폰트를 Figma에 적용시킨다. ( 로컬 폰트 활성화)
- 웹으로 접속하는 경우
- Figma → 내 프로필 사진 → settings →enable local font 버튼 클릭 → 연결된 링크에서 설치 → figma 홈페이지 재접속
- 데스크톱 앱으로 접속하는 경우
- 그냥 Figma 앱을 재접속 하면 바로 적용됩니다.
사진으로 보기
- Text를 드래그 한 후 오른쪽 툴바 중 Text의 오른쪽 사각형 4개짜리 버튼을 클릭한다.
- 3-1. 원하는 폰트를 클릭한다
- 끝! 😊
사진으로 보기
Sizing
노란색: margin
파란색: padding
빨간색: 내부 contents 공간
흰색: content 내부 margin : 24px
빨간색 + 흰색 = 1200px
Figma의 frame layout에도 추가해 두었습니다. 사용하셔서 디자인하면 편리할 거에요!
사용 방법 알아보기
- Frame 선택하기
- LayoutGrid 옆 버튼 클릭
- 원하는 레이아웃 선택
- max-width설정-col 포함 ( 현재 모습)
- max-width설정 ( 가운데 빨간 부분 제외)
- padding-1rem ( 16px로 padding 준 버전)
종류
Color
Theme
