📃 요약
요소 기술 :
– Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴
📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
– 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
9장 레이아웃 그리드 사용하기
- 프레임에 격자를 그려 넣어 체계적으로 잡을 수 있도록 도와주는 기능 - 컨스트레인트와 유사하게 해상도가 변경되면 자동으로 유연하게 크기가 맞추어짐
– 레이아웃 그리드로 스케줄러 디자인 적용하기
1) 레이어 패널에서 Calendar 프레임 :
- 디자인탭 – Layout Grid 패널의 + 클릭
- 그리드 아이콘 클릭 : 왼쪽에 팝업 생김
2) 디자인탭 – Layout Grid 패널의 팝업 :
- Grid 클릭 : Columns 변경
- Count : 7
- Gutter : 4
3) 레이어 패널에서 Calendar 프레임 :
- 디자인탭 – Layout Grid 패널의 + 클릭
- 그리드 아이콘 클릭 : 왼쪽에 팝업 생김
4) 디자인탭 – Layout Grid 패널의 팝업 :
- Grid 클릭 : Rows 변경
- Count : 6
- Gutter : 4
5) 툴바 – 텍스트 선택
- 프레임 제일 왼쪽 첫번째 칸에 대각선으로 드래그
6) 디자인탭 – Text 탭 : - 크기 : 15
- Align Middle : 6
7) 캔버스 – Sun 선택
- [opt][alt] 누른채 드래그 : 복사됨
- 지난달의 달력 날짜 색상 : dddddd
- 이번달의 달력 날짜 색상 : 666666
8) 레이어 패널에서 Calendar 프레임 :
- 모든 텍스트 선택
- 디자인 탭 – Constraints 탭 : Left & Right , Top
9) 레이어 패널에서 Calendar 프레임 선택 :
- 디자인 탭 – Constraints 탭 : Left & Right , Top
