December 21, 2021 2 min to read

Figjam

피그잼 정리

FigJam 이란?

코로나 19를 통해 비대면 협업이 필수처럼 되었습니다 하지만 슬랙, 디스코드, 줌, 화상회의 툴은 많지만 아이디어를 정리하는 툴을 미흡했습니다. 피그잼은 이러한 문제를 해결하고자 나오게 되었습니다.

1.FigMA 설치

• FigMA는 JS 기반의 Electron으로 만든 스프트웨어 입니다.

• 따라서 Window, Ubuntu, Mac OS를 모두 사용할수 있습니다.

• 뿐만 아니라 JS 기반의 프로그램 답게 WEB에서도 아주 잘 작동됩니다.

-Ubuntu 20.04

 sudo apt update // 업데이트
 sudo apt install snapd //snap 스토어 설치 20.04는 되어있습니다.

 sudo snap install figma-linux // figma 설치

• Window, Mac 설치 (해당 그림을 누르면 사이트로 이동)

2.FigJam 사용법

• FigMA 첫페이지입니다

• 먼저 파란색 숫자

  • 1 : 계정
  • 2 : 최근 문서
  • 3 : Communitiy (Plug in, template 기타등등)
  • 4 : 프로젝트 (현재 작업하는 문서를 프로젝트 단위로 묶을수 있습니다)

• 주황색 계열 숫자

  • 1 : Figma 디자인 (웹, 앱)
  • 2 : FigJam 디자인
  • 3 : Figma에서 제안하는 template 문서

• 피그마 커뮤니티 문서입니다. (가장 추천!)

• 해당 문서에서 widget, Plugins, UI kits 기타 등등 찾고 설치할수 있습니다.

• 예시로 CSS를 치면 위와 같이 Html이나 css로 바꾸는 플러그인이 나옵니다

• 해당 그림은 처음 FigJam문서를 만들게 나오는 페이지 입니다.

• 주황색 페이지는 Figma에서 제안하는 FigJam템플릿 입니다.

• FigJam 문서를 컨트롤러입니다.
  • 1 : 마우스 클릭 또는 드래그
  • 2 : 문서의 컴포넌트 잡기
  • 3 : 펜이나 마우스로 그리기
  • 4,5 : 포스트잇으로 글을 작성
  • 6 : 글을 적을수 있는 컴포넌트 만들기
  • 7 : 컴포넌트 간에 화살표 그리기
  • 8 : 도장 찍기
  • 9 : 템플릿 찾아 넣기
  • 10 : 라브러리를 통해 간단한 그림 넣기
  • 11 : Plugin, Widget , Media(영상,사진, 음악), Code Block 삽입

• FigJam 상단 Navigation 입니다.
  • 1: 파일 설정
  • 2: 파일 이름
  • 3: Figma를 통해 음성 통화 ( 단: 연 45달러 유로 버전입니다 )
  • 4: 해당 문서 공유
  • 5: 말풍선 달기
  • 6: 커뮤니케이션 이모티콘,하이파이브, 채팅

• FigJam 파일 공유 share 버튼을 눌렀을때 화면입니다.
  • 1: 파일에 대한 관한 can view 와 can edit이 있습니다
  • 2: 초대한 사람들의 이름과 권한들이 적혀있습니다.
  • 3: 해당 문서의 Copy 링크를 생성합니다.

결과물

끄으으읏!

• Figma의 사용도는 웹,앱 디자인 뿐만 아니라 많은 곳에서도 사용이 되는것이 느껴집니다! 웹을 개발할때 Html,Css로 바꿔주기도 하고 React 컴포넌트 마저 편하게 바꿔주기도 하죠, 하지만 이제는 아이디어 정리용으로 사용해보는거 어떨까요!