UI·UX 디자인 공부/제로베이스 스쿨 - UXUI 디자인 학습일지

[1주차-1] UIUX디자인 툴 Figma

CY__ 2024. 9. 2. 20:38

피그마 소개

  • 국내외에서 가장 많이 사용하는 프로토타입 툴
  • 글로벌 환경에서 피그마의 사용이 대폭 늘어나면서 국내에서도 프로토타입툴로써 대세로 자리잡음
  • 디자인 파일&피그잼 파일 두 가지 파일
    • 디자인 파일: 피그마 사용하는 목적 → UIUX 디자인, 디자인 시스템 구축, 프로토타이핑
    • 피그잼 파일: UX리서치, 유저 플로우 제작, 아이디어 수립, 브레인스토밍 등을 목적으로 하는 기획 단계에서 활용
  • 스케치&XD
    • 파일 전달 후 피드백을 받고 다시 수정된 파일을 재공유하는 방식
    • 개발자와 공유하기 위해 제플린 플러그인에 의존한다는 단점
  • 피그마
    • 하나의 파일에 여러 명의 협업자가 함께 파일 수정 가능
    • 스케치&XD 단점 해결
  • 웹브라우저로 바로 구동이 되기 때문에 인터넷이 연결되어있는 환경이라면 손쉽게 접근 가능

 

피그마 인터페이스&커뮤니티

  • 피그마 커뮤니티 → 템플릿, 플러그인, UI키트 다운로드(다른 사람들이 만들어 놓은 키트를 내 피그마로 옮겨놓는 것)
  • 휴먼 인터페이스 가이드라인에서 제공하는 것 뿐만 아니라 개인이 만들어서 제공하기도 함
  • 자주 사용하는 키트: iOS status bar/material design
  • 스케치 파일 불러들이기 가능/XD는 호환 안됨
  • 즐겨찾기: 드래그&드롭
  • shfit 클릭 → 여러 파일 동시에 선택 가능

 

에디트 모드

  • Quick action [ctrl+/] → 메뉴&기능 검색
  • Sections [shift+s] → 프레임들을 포함하는 기능 (프레임⊂섹션)
  • Assets → 컴포넌트 드래그&드롭 가능

제로베이스 스쿨 첫 수업날!

첫날이니 만큼 많은 내용을 공부하진 않고 피그마 툴의 아주아주 기본적인 것들만 공부했다.

피그마가 어떤 프로그램인지부터 설치 방법, 인터페이스 및 커뮤니티 등에 대해 배웠다.

사실 배웠다고 하기도 뭐한게, 이미 피그마 숙련도가 어느정도 있는 상태였기 때문에

2배속하고 라디오 듣듯이 들었다..ㅋㅋ

그럼에도 몇가지 놓치고 있었던 것들도 발견해서 노션에 메모해두었다.

 

과제로는 폰트, 컬러, 그리드, 아이콘 등을 제작해보았다.

이것도 이미 많이 다뤄본 것들이라 손쉽게 해냈다.

 

오늘은 뭔가 새로운 것을 익히고 배운다기보단 피그마를 처음 배웠던 순간이 떠오르면서

추억여행을 하게 된 날이었던 것 같다

 

 

728x90