디자이너 한줌기록

디자인 작업 시 가장 많이 하는 반복작업을 줄여줄 수 있는 기능들을 소개하려고 합니다!같은 UI 여러 번 만들기정렬 맞추기텍스트 / 이미지 채우기 등-> 이런 작업들을 제가 실무에서 어떤 기능을 사용하면서 작업하는지에 대해 가져왔습니다. 🙌1. 오토레이아웃 (Auto Layout) 피그마에서 오토레이아웃은 필수로 알아야하는 기능이죠! 작업하면서 오토레이아웃을 안쓴적이 없는것 같아요. 반복 UI 만들 때 필수인것 같아요!버튼, 리스트, 카드 자동 정렬간격 자동 유지콘텐츠 바뀌어도 레이아웃 유지-> 이런 작업들을 하기 위해 꼭 알아야 합니다! 오토레이아웃을 사용해 작업하면 작업이 훨씬 수월해집니다.👏 2. 컴포넌트 (Component) 컴포넌트 기능을 사용하면 UI를 한번만 만들고 그걸 필요할때마다..

**피그마에서 다크, 라이트 모드 한번에 디자인하는 작업 일기**-> variables 기능 활용하면 쉽게 컬러 전환이 가능해요 이대로하면 쉽게 따라할 수 있습니다🙌1. 피그마에서 variables 추가하기피그마 오른쪽 패널 상단에 보면 variables 기능이 있어요. 이걸 클릭하면 오른쪽 사진과 같은 화면이 떠요!여기서 + create 버튼을 클릭하고 값을 추가하면 됩니다! 2. variables 기능에서 컬러 값 추가하기컬러 값을 추가하기 위해 버튼 하단 'color' 버튼을 클릭해주세요. 그러면 컬러를 지정할 수 있는 변수 테이블이 나옵니다! (+ collection 이름, 그룹 이름 등 다 바꿀 수 있음) 컬러를 추가하면 아래 사진과 같은 화면을 볼 수 있어요. 컬러 값 이외에도 텍스트..

피그마 단축키만 잘 알아도 작업이 더 빨라지는것 같아요!이런 툴들은 단축키가 필수인듯..! 참고: 다 알 필요 없음! 자주 쓰는것만!기본 단축키선택 / 이동 V → 선택 툴H → 핸드 툴 (화면 이동) 프레임 / 도형F → 프레임 생성R → 사각형O → 원L → 선확대 / 축소Cmd + + / - → 줌Shift + 1 → 전체 보기Shift + 2 → 선택 영역 확대 레이아웃 & 정렬정렬 Shift + A → 오토레이아웃 추가Option + A / D → 좌/우 정렬Option + W / S → 상단/하단 정렬Option + H / V → 세로 중앙/가로 중앙 정렬컴포넌트 & 디자인 시스템컴포넌트 Cmd + Option + K → 컴포넌트 생성Cmd + Shift + B → 인스턴스 분리복사 / 재사용..