📃 요약
요소 기술 :
- Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
- 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
6장 컴포넌트 사용하기
- FIGMA 에서 컴포넌트는 디자인 된 것을 재사용할 목적으로 활용됨
- 디자인에 최초로 설정된 컴포넌트를 마스터 컴포넌트라고 함- 마스터 컴포넌트 만들기
1) 상단 툴바 - 1st 중앙 아이콘 : 클릭
- 레이어 패널에서 UI/Card 선택
2) 선택한 UI/Card 가 보라색으로 변경됨 : 마스터 컴포넌트로 선정됨
- 인스턴스 만들기
- 마스터 컴포넌트를 복사 후 붙여넣기를 하면 인스턴스가 됨1) 레이어 패널에서 마스터 컴포넌트 복사 후 붙여넣기
- 인스턴스 수정하기
- 디자인 패널에서 속성값들을 수정하면됨1) 좌측 레이어 패널 :
- 텍스트 변경 : 이탈리아 -> 싱가포르
- 텍스트 변경 : 이달리아 세프 ... -> 도시 농장에서 재배한 재료로 맛보는 집밥
- 텍스트 변경 : 35,000 -> 28,000
2) 이미지 변경하기 : 파스타 이미지 더블 클릭
- 이미지 패널 : 중앙 이미지에 마우스를 올리면 Choose Image 번튼이 생김 , 버튼클릭 후 이미지 변경
3) 우측 디자인 패널 - Fill :
- 28,000원 색상 변경 : FF5252
- 인스턴스 교체하기
- 인스턴스를 교체하기 위해 먼저 해당 디자인을 컴포넌트로 생성해야함1) 컴포넌트 한꺼번에 생성
- icon-flags Frame 안에 각 국기 Frame 모두 선택
- 툴바 Components 옆 아이콘 화살표 클릭 : Create Multiple Components 선택
2) Assets 창에서 교체하기
- 이탈리아 국기 선택 : alt+ctrl(opt+cmd) 누른후 드래그 후 교체
- 인스턴스 해제하기
- 오버라이드 가능하지 않은 부분을 수정하고 싶을 경우 해제 후 수정1) 좌측 레이어 패널 - UI/Card Frame : 인스턴스 선택
- 오른쪽 클릭
- Detach Instance 클릭
