디자인 시스템 with 피그마

인프런 디자인 시스템 with 피그마 강의 간단 정리

• 아무것도 없는 상태에서 작은 컴포넌트부터 만들기는 쉽지 않다. 아토믹 디자인 패턴은 멘탈 모델로 생각하자
• 명령어 팔레트(cmd + p 또는 cmd + /)에서 snap to pixel grid 체크하면 프레임 사이즈가 정수로만 나옴
• 프레임 선택 후 방향키 누르면 기본적으로 1px씩 이동, 쉬프트 + 방향키는 10px
  - Figma > Preference > Nudge Amount 에서 big nudge 값 수정 가능
• Token Studio for Figma 에서 토큰 추가할 때는 온점(.)으로 그룹화 가능
• tailwind color generator
  - 현재 버전에선 제대로 동작을 안 하는 건지..?
• 토큰스튜디오랑 피그마 네이티브 스타일이랑 연동하려면 같은 스타일 이름이 있어야 함.
• type-scale.com
• fontSize, fontWeight, lienHeight, fontFamily가 모여서 typograph
• 토큰 스튜드오에서 정한 fontSize, fontWeight등등을 텍스트에 적용하고 create style로 텍스트 스타일 만든 후
  - 다시 토큰 스튜디오에서 import하고 토큰 스튜디오 값으로 대체
  • 위에서 만든 값 duplicate해서 create style도 export도 가능
  • 번거로운 과정을 계속 거치는 이유는 token studio를 통해 값 변화를 일괄 적용할 수 있기 때문!
  • 근데 지금 강의대로 따라하면 Error setting font family/weight combination for Pretendard/Bold 에러(이건 내가 Pretendard 글꼴을 설치하면 해결될듯?)
• 명령어 팔레트에 version 검색하면 version 관리에 관한 정보 볼 수 있음
• 피그마의 그룹화 방법
  - Group
  - 명령어: cmd + g
  - 가벼운 그룹화?
  - ppt 그룹화랑 비슷함
  - fill, stroke시 안에 있는 전체 도형들이 변경됨
  - 드래그 시 그룹화된 전체가 커짐
  • Frame
    - 명령어: cmd + opt + g
    • 정교한 그룹화 작업 시 사용
    • fill, stroke시 frame에만 적용
    • 드래그 시 frame만 커짐
  • AutoLayout
    • Frame이긴 함
      • 텍스트를 선택 후 shift + a하면 autoLayout 프레임 자동 생성
• 컴포넌트 이름을 icon / 과 같이 그룹화 해놓으면 assests에 페이지 하위에 그룹화된 채로 나옴
• 여러 컴포넌트를 하나의 set으로 설정할 수 있음 (ex. 화살표 아이콘을 up / down 등의 상태로 분류)
• 피그마 컴포넌트에서 properties를 통해 마치 스토리북처럼 컨트롤러들을 달아줄 수 있음.
  - 자식 컴포넌트에서 layer 오른쪽에 버튼 클릭하면 properties 항목과 연결 가능
  - variant를 선택하면 component set처럼 설정됨
  - hover, focused 같은 상태는 variant로 설정하는 게 편함!
  • icon 같은 건 Instance Swap

(계속 추가 예정..)