📃 요약

요소 기술 :

– Basic : Figma

📃 기술 구현

스펙 :

- figma 디자인 협업툴

📃 Figma 기본 실습

디자인 툴의 구조 및 용어를 알아봄

– 디자인 화면

왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널

실습 예제 복사 및 가져오기

처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행

참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기

1) 좌측 아래 Explore Community 클릭

2) 검색양식 : 처음 만나는 피그마

3) Open in Figma 버튼 클릭

4) Figma 에서 예제 파일 자동으로 열림

17장 개발자가 피그마 활용하기

- 에셋 추출 : 디자인 시안에서 사용한 이미지 추출하기

– 디자인 에셋 추출하기

1) 레이어 패널 – Icon/Pentool 프레임 선택

• 디자인패널 – Export 패널의 + 클릭 : 3번 클릭(1x, 2x, 3x배수 이미지 생김)
• Export Pentool 클릭 : pc 에 다운로드됨

– copy as code 활용하기

- 시안 디자인의 css 코드를 확인할 수 있음
- 복사/붙여넣기로 소스에 쉽게 활용할 수 있음

1) 레이어 패널 – help

• 아이콘을 클릭하세요 선택
• 마우스 오른쪽 클릭
• Copy/Paste as – copy as code – css
• vscode 또는 메모장에 붙여넣기 : 속성, 값만 들어있음