[마케팅] 개발자가 알면 좋은 Figma 사용법

작성일: 25년 5월 24일

PS. 계속 Figma를 사용해보면서 알게된 기능들 추가 할 예정

 

Contents

1. Figma Hierarchy

2. Design, Prototype Panel

3. 이미지 넣기

4. 개발자가 간단히 만들기

 

 

1. Figma Hierarchy

 - 작업파일 위치: 팀 -> 프로젝트 -> 파일
 - 파일 작업공간 설명: 레이어, 툴바, 속성패널, 캔버스 로 구성되어 있음

 - 캔버스: 아무것도 없는 공간으로 "Frame" 을 만들어서 실제 그림을 그려넣을 수 있는 도화지를 만듬

               Frame 안에 그림을 그려넣으면 "Element" 라고 하며 비슷한 Frame 끼리 모아놓으며 Session 이라고 함.

 - 결론으로는 File -> Page -> Canvas -> Session -> Frame -> Element 라고함.

 

 

2. Design, Prototype Panel

 - Design Panel: 선택한 객체의 속성을 변경 할 수 있는 기능을 제공함

 - Prototype Panel: 각각의 완성된 Frame 들을 연결하여 실제 동작되는 것 처럼 만들 수 있음

 

 

3. 이미지 넣기

 - Place Image: Frame 내부에 이미지가 객체로 들어감

 

- Fill: Frame의 배경 이미지로 들어감

 

 

4. 개발자가 간단히 만들기

 - Figma의 이미지 편집, 이미지 만들기 기능을 활용하여 이미지를 생성함

 - 해당 이미지를 배경으로 넣고 UI 프로그램을 통해 Voltage, Current, Usage, SOC 정보를 채워넣으면 됨

 

 

Reference

https://www.inflearn.com/course/%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%9E%85%EB%AC%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%98%A4%EB%A6%AC%EC%A7%80%EB%84%90-2024/dashboard

[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original) 강의 | 인프런 - 인프런