📃 요약
요소 기술 :
- Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
- 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
7장 오토 레이아웃 사용하기
- 버튼, 리스트, 팝업 등에 들어간 콘텐츠에 따라 유연하게 크기가 변경되는 기능- 오토 레이아웃 적용하기
1) 레이어 패널에서 tab-active 선택
- 마우스 오른쪽 클릭
- Add Auto Layout 클릭
2) 레이어 패널에서 UI/Header 안에 4개 선택
- tab-active, Featured, top arts, Weekly arts 선택
- 마우스 오른쪽 클릭
- Add Auto Layout 클릭
3) For you -> For your art 수정하면 자동적으로 다른 메뉴가 유연하게 이동함
- 오토 레이아웃 수정하기
1) 디자인 패널에서 Auto Layout 탭
- Horizontal Padding : 12
- Vertical Padding : 4
2) 레이어 패널에서 Frame1 선택 - 디자인 패널에서 Auto Layout 탭
- Horizontal Tab between objects : 20 -> 14 로 수정
3) 레이어 패널에서 Top arts 선택
- Featured 위치로 마우스 드래그(또는 키보드 왼쪽 화살표키 클릭)
4) 캔버스에서 For you 메뉴에 마우스 드래그해서 하트 아이콘 넣기 :
- Auto Layout 기능으로 자동으로 다른 메뉴가 이동됨
5) 디자인 탭 - Auto Layout 탭 선택
- Horizontal Tab between objects : 10 -> 0 으로 수정
6) 레이어 패널 - For you Text 선택
- 디자인 패널 - Fill 탭 : 333333 변경
7) 레이어 패널 - tab-active :
- 디자인 패널 - Fill 탭 : ffffff 변경
- 오토 레이아웃 해제하기
1) 레이어 패널 - tab-active :
- 마우스 오른쪽 클릭 : Remove Auto Layout
