📃 요약

요소 기술 :

– 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 items : 20 -> 14 로 수정
  
  
  

  3) 레이어 패널에서 Top arts 선택

  
  
• Featured 위치로 마우스 드래그(또는 키보드 왼쪽 화살표키 클릭)

4) 캔버스에서 For you 메뉴에 마우스 드래그해서 하트 아이콘 넣기 :

• Auto Layout 기능으로 자동으로 다른 메뉴가 이동됨

5) 디자인 탭 – Auto Layout 탭 선택

• Horizontal Tab between items : 10 -> 0 으로 수정

6) 레이어 패널 – For you Text 선택

• 디자인 패널 – Fill 탭 : 333333 변경

7) 레이어 패널 – tab-active :

• 디자인 패널 – Fill 탭 : ffffff 변경

– 오토 레이아웃 해제하기

1) 레이어 패널 – tab-active :

• 마우스 오른쪽 클릭 : Remove Auto Layout