📃 요약

요소 기술 :

– 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 클릭