live-embed

2 개의 포스트

figma

Trello 및 Jira Software에서 Figma 디자인 (새 탭에서 열림)

Figma는 Trello와 Jira Software에서 디자인 파일을 실시간으로 확인할 수 있는 Live Embed 기능을 출시했다. Figma 원본에서 패딩이나 색상 등을 수정하면 Trello 카드나 Jira 티켓에 삽입된 디자인도 자동으로 업데이트되어, 최신 디자인을 찾거나 PNG를 반복 업로드할 필요가 없어진다. 이를 통해 디자이너와 개발자, 기획자 간의 협업과 정보 공유를 간소화하는 것이 핵심이다. ## Atlassian 도구에 Figma 디자인 실시간 삽입 - Figma 파일을 Trello 카드나 Jira Software 티켓에 Live Embed로 추가할 수 있다. - 원본 Figma 파일이 변경되면 삽입된 디자인이 자동으로 갱신된다. - 패딩, 글꼴 색상 등 세부 디자인을 수정해도 별도의 재업로드 작업이 필요 없다. - 팀원들은 프로젝트 관리 도구 안에서 항상 현재 디자인 상태를 확인할 수 있다. ## 기존 디자인 공유 방식의 문제점 - 디자이너가 최신 디자인을 공유하기 위해 관련 프로젝트 카드나 티켓을 직접 찾아야 했다. - PNG 파일을 내보내 업로드하는 방식은 원본이 수정되는 순간 빠르게 오래된 정보가 된다. - 개발자, 제품 관리자, 마케터 등 여러 팀원이 최신 디자인 파일을 어디서 찾아야 하는지 혼란을 겪었다. - Live Embed는 디자인의 단일 원본을 유지해 이런 커뮤니케이션 비용을 줄인다. ## Trello와 Jira Software 연동 방식 - **Jira Software** - Atlassian 마켓플레이스에서 Figma 연동 기능을 활성화한다. - Jira 티켓의 디자인 영역에 Figma 파일 URL을 붙여 넣는다. - **Trello** - 팀 설정에서 Figma Power-Up을 활성화한다. - Trello 카드의 첨부 파일로 Figma URL을 추가한다. - 두 서비스 모두 Figma 파일의 최신 상태를 프로젝트 관리 화면에서 확인할 수 있다. ## 확장되는 임베드 생태계 - Figma는 웹에서 실행되는 디자인 도구라는 장점을 활용해 다양한 업무 흐름에 Live Embed를 적용하려 한다. - 이번 Atlassian 연동은 Dropbox Paper에서 제공하기 시작한 기능과 유사한 방향이다. - 향후 디자이너와 팀이 협업하는 여러 서비스에서 Figma 임베드를 지원할 계획임을 밝혔다. 팀에서 디자인 파일을 PNG로 반복 공유하고 있다면, Figma 원본 URL을 Trello나 Jira의 작업 항목에 직접 연결하는 방식이 더 효율적이다. 프로젝트 관리 도구와 디자인 도구 사이의 정보 불일치를 줄이고 최신 상태를 자동으로 유지할 수 있다.

figma

피그마 + 드롭박 (새 탭에서 열림)

Figma와 Dropbox Paper의 통합으로 Figma 디자인과 프로토타입을 Paper 문서에 실시간 임베드할 수 있게 되었다. 문서에 삽입된 콘텐츠는 최신 디자인으로 자동 업데이트되므로, 팀원들이 오래된 파일을 찾거나 버전을 확인하는 번거로움이 줄어든다. URL을 복사해 붙여넣기만 하면 빠르고 가벼운 라이브 임베드가 생성되는 것이 핵심이다. ## Figma와 Dropbox Paper의 통합 - 2017년 8월 30일부터 Figma 콘텐츠를 Dropbox Paper에 라이브 임베드할 수 있게 됐다. - Figma 디자인과 프로토타입이 Paper 문서 안에서 직접 표시된다. - 원본 Figma 파일이 변경되면 임베드된 콘텐츠도 즉시 최신 상태로 반영된다. - 프로젝트 매니저, 엔지니어, 제품 디자이너가 동일한 최신 디자인을 확인할 수 있다. ## 버전 관리와 협업 문제 해결 - 팀 협업에서는 최신 디자인 파일을 찾기 어렵거나 오래된 버전을 참조하는 문제가 발생하기 쉽다. - 라이브 임베드를 사용하면 문서에 고정된 이미지나 수동으로 갱신해야 하는 링크 대신 항상 최신 디자인을 볼 수 있다. - 디자인이 공유 문서의 맥락 안에 유지되므로, 별도의 도구를 오가며 내용을 확인할 필요가 줄어든다. - Figma가 지향해 온 협업 중심 디자인 환경을 디자인 직군 외의 팀원까지 확장한다. ## Dropbox Paper의 협업 문서 기능 - Dropbox Paper는 팀이 함께 문서를 작성하고 협업하는 문서 플랫폼이다. - Dropbox 계정이 있는 사용자는 이용할 수 있다. - YouTube, GitHub, Facebook 등 여러 외부 서비스와의 통합을 지원한다. - Figma 임베드를 통해 디자인 작업도 문서 기반 협업 흐름에 자연스럽게 포함된다. ## 간단한 사용 방법과 기술적 특징 - Figma 프로젝트 URL을 복사한다. - Dropbox Paper 문서에서 `Command + V`로 붙여넣는다. - 별도의 복잡한 설정 없이 즉시 라이브 문서가 표시된다. - 임베드에 불필요한 애플리케이션 요소를 제거해 코드 크기를 줄였으며, 빠르게 로드되도록 설계했다. ## 실용적인 활용 - 기획 문서에 최신 디자인 시안을 삽입해 기획자와 디자이너가 같은 내용을 확인할 수 있다. - 개발 문서나 이슈에 프로토타입을 임베드해 구현 대상과 상호작용을 쉽게 공유할 수 있다. - 프로젝트 회의 문서에 디자인을 포함하면 별도의 파일 첨부나 버전 안내 없이 최신 상태를 유지할 수 있다. - 디자인 변경이 잦은 프로젝트일수록 정적 이미지보다 라이브 임베드가 유용하다.