필요성
최근, 각종 플러그인을 사용해 피그마의 요소를 html, tailwind css, React 등으로 추출이 가능하다는 사실을 알게 됐습니다. 평상시 tailwind css로의 Front단 개발을 해왔던 저로서는, 반가운 소식이었습니다. 디자이너들이 다수 사용한다고는 들었으나 여전히 생소한 Figma를 사용 & 학습해보고자 글을 작성합니다.
접근
1. 피그마(Figma)란?
(1) 정의
2. 피그마(Figma) 기능
3. 피그마 단축키
방법
1. 피그마(Figma)란?
(1) 정의
피그마 (Figma)는 macOS 및 윈도우용 데스크톱 애플리케이션들에 의해 활성화되는 추가 오프라인 기능들을 갖춘 인터페이스 디자인을 위한 협업 웹 애플리케이션이다.
피그마의 기능 집합은 사용자 인터페이스(UI)와 사용자 경험(UX) 디자인에 초점을 두며 실시간 협업, 다양한 벡터 그래픽스 편집기 및 프로토타이핑 도구들을 활용한다.
UX 툴에서 조사한, "2022년도 디자인 툴" 설문조사 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 피그마(Figma)가 선정됐습니다. (압도적으로)
2. 피그마(Figma) 기능
(1) 개발자 핸드오프(Hand-Off) 기능 강화
기존에 존재하는 디자인 툴은 핸드포트 과정에서 많은 파일과 내용, 정보 등을 별도로 준비하고 공유해야 했습니다.
(*핸드오프(Hand-Off) : 디자인 단계에서 개발 단계로 전달하는 과정)
하지만 피그마는 하나의 단계로 디자인, 이미지 파일, 폰트, 간격, 사용자 인터렉션 등 모든 것을 전달할 수 있습니다.
이로써 추가적인 소통 단계가 사라질 수 있습니다. 따라서 소통 시간 단축과 오류도 줄어 더욱 빠르게 웹과 앱을 출시할 수 있습니다.
(2) 실시간 공동 편집 (Collaboration) 기능
멀티플랫폼을 지원하는 피그마는 동시에 여러 사용자가 협업해 디자인 작업을 할 수 있습니다.
디자이너와 클라이언트, 또는 디자이너와 개발자가 함께 작업할 때 유용하고, 실시간 채팅과 주석 기능을 통해 실시간 피드백을 주고받을 수 있습니다.
(3) 디자인 시스템 (Design Sysrem) 구축 기능
피그마는 디자인 시스템을 쉽게 구축할 수 있게 도와줍니다.
디자인 시스템을 구축하면, 일관된 디자인 및 브랜드 이미지를 유지할 수 있고 재사용 가능한 디자인 요소와 UI 컴포넌트를 제작할 수 있습니다.
(4) 편리한 라이브러리 (Library) 관리 기능
피그마는 라이브러리 관리 기능을 제공하기에 자주 쓰는 디자인 요소를 쉽게 관리할 수 있습니다.
팀 라이브러리에 다른 멤버가 새로운 디자인 요소를 업데이트 하면 자동으로 동기화하여 사용할 수 있기에 팀 라이브러리 관리도 쉽고 빠르게 가능합니다.
3. 피그마 단축키
| V (선택 도구) | 객체를 선택하거나 이동할 때 사용 |
| A (직선 도구) | 선, 화살표, 사각형 등 직선을 그릴 때 사용 |
| T (텍스트 도구) | 텍스트를 입력하거나 수정할 때 사용 |
| Space + 드래그 (화면 이동) | 마우스 커서에 따라 원하는 영역으로 이동 |
| Ctrl + R (레이어 이름 변경) | 선택한 객체의 레이어 이름을 변경 |
| Ctrl + G (그룹화) | 여러 객체를 그룹화해 관리하기 쉽게 만듬 |
| Ctrl + Shift + G (그룹 해제) | 그룹화된 객체를 해제 |
| Ctrl + D (객체 복제) | 선택한 객체 복제 |
| Ctrl + [ | 선택한 객체 뒤로 보내기 |
| Ctrl + ] | 선택한 객체 앞으로 보내기 |
이상으로, 피그마(Figma) 학습을 시작해봤습니다.
추가 질문을 댓글을 달아주시면 감사하겠습니다^^!
오늘도 파이팅입니다!
'개인 공부' 카테고리의 다른 글
| [개인공부] SourceTree 실행 안 됨 / 재설치&재실행 안됨 / 갑자기 되지 않음 해결법 (0) | 2023.06.19 |
|---|
댓글