노션과 Figma의 환상적인 시너지! 협업의 끝판왕 조합으로 생산성 폭발하기

 

 

 

안녕하세요. 오늘은 노션과 Figma를 활용하여 협업력을 향상시키는 방법에 대해 알려드립니다. 노션은 효율적인 생산성 도구로 개인 메모장보다 더 나아가, Figma와 함께 사용하면 놀랍도록 강력한 시너지를 낼 수 있습니다.

 

1. Figma 소개

Figma는 웹에서 구동되는 그래픽 툴로, 자유도가 높은 그래픽 작업을 위한 훌륭한 도구입니다. 무료 사용이 가능하고, 유료 사용으로 더 다양한 기능을 활용할 수 있습니다. 또한, Figma 작업물을 포트폴리오로 활용할 수 있어 웹과 앱 UX/UI 디자이너들에게 특히 유용합니다.

 

2. 노션과 Figma의 결합

노션과 Figma를 결합하여 협업력을 높이는 방법은 두 가지입니다.

첫번째는 노션 페이지에 임베드 블록을 추가하는 방법이고, 둘째로는 페이지에 Figma 임베드 블록을 활용하는 것입니다.

적용하는 방법도 사용에도 큰 차이는 없습니다.

 

<임베드블럭과 Figma블럭의 예시>

1. 임베드 블럭으로 삽입

임베드 블럭 삽입은 Figma Jam의 Share에서  [< > Get embed]와   Copy Link 모두 사용이 가능한 방법입니다.         

1) 피그마 홈페이지에 접속하여 로그인합니다. 2) FIgma페이지에서 작업 공간인 FigJam board에서 Draft를 생성합니다. 3) Figma Jam에서 Share를 클릭하고 invite 모드로 설정한 후 [< > Get embed]를 클릭하여 Embed Code를  Copy 합니다. 4) 새 라인에 마우스 커서를 가져가면 + 아이콘이 나타납니다. 아이콘을 클릭하여 임베드를 선택하거나 임베드 유형 중 Figma를 선택하고 Enter 키를 누르세요. 5) 팝업창이 나타나면 콘텐츠의 URL이나 임베드 링크를 붙여 넣고 링크 임베드를 클릭합니다. 6) 노션에서 페이지를 공유하여 피그마 Jam을 실시간으로 확인할 수 있습니다.

 

• 피그마 홈페이지 (https://www.figma.com/)에 접속하여 로그인

<Figma 로이인 및 회원가입화면>

 

• FigJam board에서 Draft를 생성

<FigJam board 생성의 예>

 

• FigJam board Share 및 [< > Get embed] 카피

<엠베드를 위한 코드 카피 방법 1단계>

 

<엠베드를 위한 코드 카피 방법 2단계>

 

• Notion 임베드 방법 #1: 임베드 형태 선택

 

• Notion에 [< > Get embed]로 카피한 Code 적용

<Figma 임베드 코드 적용의 예>

 

 

• Notion에 Figma적용 완료

 

2. Figma 블록으로 삽입

Figma 블럭을 선택하여 Figma Jam의 Share에서   Copy Link 사용하는 방법입니다.

1) 피그마 홈페이지에 접속하여 로그인합니다. 2) 작업 공간인 FigJam board을 생성합니다. 3) 생성한 Figma Jam의 URL을 복사합니다. 4) 노션에서 페이지를 만들고 +를 눌러 "Figma" 블록을 선택합니다. 5) 나타나는 창에 복사한 Figma Jam의 URL을 붙여넣고 링크 버튼을 클릭합니다. 6) 생성된 블록에서 "<Figma에 연결해 미리보기>"를 클릭하여 미리보기를 확인합니다.

 

기본적으로 삽입 방법은 임베드 블록을 사용하는 것과 같은 방법입니다.

차이는 블럭의 선택과 링크에 FigJam board의 URL을 사용한다는 점입니다.

아래에 차이가 나는 부분만 이미지를 보여드리겠습니다.

 

• 임베드 블록 삽입과의 차이점 #1: Figma블럭 사용

<Figma블럭 선택의 예>

 

• 임베드 블록 삽입과의 차이점 #1: 에서  Copy Link  사용

<Figma블럭 사용 시 Copy Link 사용 예시>

 

Figma에서 작업 및 수정한 내용은 Notion에서 바로 업데이트 된 내용을 확인할 수 있으므로 Notion을 더욱더 효과적으로 사용할 수 있을 수 있습니다. 유료구매를 하신다면 다른 사람들과 Share 기능을 통하여 공유도 가능하여 업무 효율성을 높이는데 도움이 될 것입니다.     

 

클로버노트 (Clover Note) 업무효율 100배 높이기