하루만에 완성하는 피그마 (하이서) - Sesac

피그마 슬라이드

  1. 피그마 프로토타입 주소 복사하기 (프토토타입의 디바이스를 설정해 놓기)
  2. 하단 바에서 Live Interaction Prototype 을 눌러 주소 삽입하기
  3. 미리보기 가능한 프로토타입 삽입완료.

라이브러리

  • Asset - Libraries(탭) - UI kits

개체 이름 짓기

  • 폴더경로와 같이 /로 구분하여 이름을 짓는다.

단축키 모음

  • Ctrl + Backspace : 중간에 있는 프레임 삭제
  • 개체 선택한 상태 + Ctrl + R : 선택한 개체 동시에 이름 수정
  • 개체 1개 선택 + Ctrl + Alt + A : 동일 Tree에 있는 개체 여러개 선택. (동일 Tree가 아닌 경우, 개체 이름을 동일하게 하면 수정됨)

플러그인 및 위젯

  • Detach Component: Main Component Detach 해줌
  • Fixed - Hug - Fill: 간격 조정 일괄 변경
  • FontScanner: 폰트 일괄 변경
  • Destoryer: 일괄 변경

  • Design System Hub: UI kit 존재
  • Table: 행추가, 열추가 기능이 자유로움
  • Animate on Path: Path에 따라 이동하는 개체 컴포넌트 만들기
  • Propstar: 컴포넌트의 프로퍼티 분류를 해준다.

컴포넌트에 프로퍼티 추가방법

  • 프로퍼티 추가
  • 각 배리언트에 프로퍼티 연결: Q 또는 개체 여러개 선택(멀티 에디트) 사용

스왑 인스턴스 프로퍼티

  • 컴포넌트 안에 인스턴트를 사용할 경우, 인스턴트가 Values가 되도록 지정.
  • 인스턴트를 즐겨찾기로 지정 Preferred Values

다음 이전