부트캠프 52일차 : Framer 1

💡 기술적 인사이트

열과 행

탭과 네비게이션

• 탭바의 가사상태 / 선택상태 만들기
  

• 내부 혹은 외부 페이지 열기
  

• 내부 페이지의 세션 이름 정하기
  

• 탭의 통합 패딩 주기
  

• (상단 사진의 빨간 동그라미 눌러서) 탭의 독립 패딩 주기
  

• 탭이 유동성을 가지되 짤리지 않게 하기 : 노란 체크 표시

• 탭이 너무 길어지지 않게 하기 : 빨간 체크표시 진행 (add를 누르면 나옴)
  

이미지 편집

• 포인트 잡는 방법
  

• 해상도 : auto로 해야 최적화 압축이 가능해진다
  

내가 만든 스타일

• 스타일 관리하는 법
  • 컬러 : surface/0, content/100 등 의미 기반 또는 숫자 기반으로 구성
  • 텍스트 : Heading1~6 또는 Paragraph로 태그 지정
  • 폴더정리 : content/, surface/, semantic/ 등으로 나누면 나중에 관리가 편리
  • 의미 기반
    • 배경색 계층 구조 : surface/0, surface/1
    • 텍스트 대비 레벨 : content/100, content/60
  • 숫자 기반
    • gray/100, gray/300, primary/500 등 Material Design 스타일

버튼 컴포넌트

• 폴더 : buttons/primary-cta 등 어떤 폴더에, 무엇을 넣을지 이름 지정 가능
• 상태 : hover, pressed, inverted
• 카드 : 버튼 컴포넌트를 넣고, 카드 전체를 또 컴포넌트로 만들 수 있음
• 관리 : 좌측 Assets 패널에서 컴포넌트 생성/수정/삭제/폴더 정리

• Overflow : 페이지 컴포넌트 안의 텍스트를 스크롤 하는 등의 동작 가능
• Radius : 둥글게 깍기
• Border : 각 위치에 다른 색상 넣기