figma·2017년 8월 29일·2분 읽기큐레이션 요약

피그마 + 드롭박

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`로 붙여넣는다. - 별도의 복잡한 설정 없이 즉시 라이브 문서가 표시된다. - 임베드에 불필요한 애플리케이션 요소를 제거해 코드 크기를 줄였으며, 빠르게 로드되도록 설계했다. ## 실용적인 활용 - 기획 문서에 최신 디자인 시안을 삽입해 기획자와 디자이너가 같은 내용을 확인할 수 있다. - 개발 문서나 이슈에 프로토타입을 임베드해 구현 대상과 상호작용을 쉽게 공유할 수 있다. - 프로젝트 회의 문서에 디자인을 포함하면 별도의 파일 첨부나 버전 안내 없이 최신 상태를 유지할 수 있다. - 디자인 변경이 잦은 프로젝트일수록 정적 이미지보다 라이브 임베드가 유용하다.

원문 읽기(새 탭에서 열림)

프로토타이핑Figmagithubdesign-collaboration+2

figma·2017년 7월 24일·3분 읽기큐레이션 요약

피그마 2.0:

Figma 2.0은 디자이너 간 협업을 넘어 마케팅, 경영진, 개발자까지 포함한 전체 팀의 협업을 목표로 한다. 이를 위해 디자인 파일과 발표용 프로토타입을 연결하는 프로토타이핑 기능과, 개발자가 디자인 정보를 직접 확인하는 개발자 핸드오프 기능을 추가했다. 핵심은 내보내기·동기화·버전 관리 같은 중간 단계를 줄이고 하나의 클라우드 문서를 모든 팀원이 함께 사용하는 것이다. ## 디자이너 협업에서 전체 팀 협업으로 - Figma 1.0은 클라우드 기반 디자인 환경을 구축하는 데 초점을 맞췄다. - 저장, 내보내기, 동기화, 이메일 공유가 거의 필요 없다. - 여러 사용자가 동시에 편집하는 멀티플레이어 기능을 제공한다. - 팀 단위 컴포넌트 라이브러리로 디자인 요소를 공유할 수 있다. - Figma 2.0에서는 협업 범위를 디자이너 밖으로 확장했다. - 마케팅 부서, 경영진, 엔지니어 등 다양한 이해관계자가 같은 디자인 자료를 활용할 수 있다. - 제품 개발 전반에서 하나의 진실 공급원(single source of truth)을 유지하는 것이 목표다. ## 클라우드 기반 프로토타이핑 - 디자이너가 디자인을 별도 도구로 내보내지 않고 같은 장소에서 발표와 테스트까지 진행할 수 있다. - 주요 활용 목적은 다음과 같다. - 디자인 리뷰와 피드백 - 경영진 대상 프레젠테이션 - 사용자 인터랙션 테스트 - Figma는 고급 모션 그래픽보다 슬라이드쇼와 핫스팟 기능을 우선적으로 제공했다. - 프로토타입은 정적인 결과물이 아니라 원본 디자인과 연결된 “살아 있는 문서”로 동작한다. - 원본 프레임을 수정하거나 화면을 추가하면 발표 화면에도 실시간 반영된다. - 별도의 내보내기나 동기화가 필요 없다. - 프레임을 노드로 연결해 화면 이동을 구성하고, 개별 객체를 핫스팟으로 설정할 수 있다. - 컴포넌트에 핫스팟을 지정하면 해당 컴포넌트의 모든 인스턴스에 내비게이션 동작이 적용된다. - 프레임 순서를 정해 간단한 프레젠테이션으로 사용할 수도 있다. - 발표자는 휴대폰으로 프레젠테이션을 탐색할 수 있다. - 아트보드 순서를 맞추기 위한 복잡한 파일명이나 버전 관리가 줄어든다. - 다만 모든 프로토타이핑 시나리오를 지원하는 것은 아니며, Framer 같은 전문 도구와의 연동도 계속 추진할 계획이다. ## 개발자 핸드오프 - 디자이너는 개발자에게 파일을 보기 전용(view-only)으로 공유할 수 있다. - 개발자는 편집 권한 없이도 오른쪽 속성 패널의 ‘Code’ 모드에서 디자인 정보를 확인할 수 있다. - 객체를 선택하면 다른 객체와의 간격을 빨간색 측정선(redline)으로 확인할 수 있다. - 다음 플랫폼에 필요한 정보를 추출할 수 있다. - CSS - iOS - Android - 정보는 두 가지 방식으로 제공된다. - **테이블 보기:** 속성을 항목별로 나누어 빠르게 확인 - **생성된 코드 보기:** 구현에 활용할 수 있는 마크업 및 코드 제공 - 개발자가 편집자 좌석을 구매하지 않아도 되므로 팀의 비용 부담을 줄일 수 있다. - 디자인 파일 자체를 기준으로 치수와 스타일 정보를 확인하므로, 별도의 스펙 문서나 수동 전달 과정이 줄어든다. ## 하나의 문서로 줄어드는 추상화 계층 - 기존에는 디자인 파일, 프로토타이핑 도구, 발표 자료, 개발자용 스펙 문서가 분리될 수 있었다. - Figma 2.0은 디자인과 발표, 디자인과 구현 사이의 변환 단계를 줄인다. - 원본 디자인이 수정되면 연결된 프로토타입과 공유 정보에도 즉시 반영된다. - 팀 구성원마다 별도의 파일이나 도구를 관리하는 대신, 클라우드 문서를 중심으로 협업할 수 있다. ## 확장되는 도구 생태계 - Figma는 모든 팀의 워크플로를 하나의 제품으로 대체하려 하기보다 다양한 도구와 함께 작동하는 생태계를 지향한다. - 전문 프로토타이핑 도구 및 다른 협업 도구와의 통합과 파트너십을 다음 단계로 제시했다. - 궁극적인 목표는 더 나은 소프트웨어를 함께 만들 수 있도록 팀 전체의 협업 장벽을 낮추는 것이다. 실무적으로는 디자인 파일을 단순한 작업물이 아니라 발표·검토·개발의 기준 문서로 운영하는 방식이 Figma 2.0의 가장 큰 장점이다. 팀은 프로토타입과 개발자 핸드오프를 같은 파일에서 관리하고, 개발자에게는 필요한 최소 권한인 보기 전용 접근을 제공하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)

프로토타이핑FigmaAndroidiOS+3

figma·2017년 3월 19일·3분 읽기큐레이션 요약

디자이너가 코

알렉스 코넬은 디자이너가 반드시 코딩을 배워야 한다는 통념에 의문을 제기한다. 그는 코딩 대신 영화 제작과 모션 그래픽을 선택했고, 그 전문성이 훗날 Facebook Live의 디자인과 제품 개발에 중요한 자산이 되었다. 결론적으로 코딩 학습은 개인의 흥미와 팀의 필요에 따라 결정해야 하며, 글쓰기와 커뮤니케이션 능력 역시 디자인 영향력을 키우는 핵심 역량이다. ## 코딩을 선택하지 않은 이유 - 코넬이 진로를 결정한 2007년에는 “디자이너가 코딩을 배워야 하는가”가 지금처럼 널리 논쟁되는 주제가 아니었다. - 당시 스타트업에는 이미 코딩을 깊이 아는 엔지니어들이 있었기 때문에, 자신까지 코딩을 배우는 것보다 팀에 없는 역량을 갖추는 편이 유용하다고 판단했다. - 그는 영화 제작, After Effects, Premiere 등 영상과 모션 그래픽 기술을 선택했다. - 프로토타이핑 도구가 부족했던 시절, After Effects를 활용해 얼굴 애니메이션과 인터랙션을 시각적으로 표현했다. - 궁극적으로 코딩보다 모션 그래픽이 더 흥미롭게 느껴졌다는 개인적 동기도 컸다. ## 전문성의 차별화가 만든 기회 - 코넬은 영화와 사진 분야의 역량 덕분에 Facebook에 영입되어 Live 기능 출시를 돕게 되었다. - 특정 직무의 표준 경로를 따르지 않고 팀에 부족한 능력을 개발한 것이 장기적으로 차별화된 경쟁력이 되었다. - 코딩을 직접 하지 않더라도 기술적 배경을 이해하면 엔지니어와 원활히 협업하고, 디자인을 구현 가능한 형태로 설명할 수 있다. ## 코딩 학습은 정답이 아닌 개인의 선택 - 코딩을 배울지 확신이 없다면, 코넬은 우선 “아니오”에 가깝게 답한다. - “영화 편집을 배워야 할까?”라는 질문처럼, 실제로 해당 분야에 흥미가 있는지가 판단의 출발점이 되어야 한다. - 코딩이 유용하다는 이유만으로 모든 디자이너에게 동일한 학습 경로를 강요할 수는 없다. - 디자인과 코딩의 경계는 Framer, Origami 같은 도구와 로직 기반 프로토타이핑의 등장으로 점점 흐려지고 있다. - 따라서 코딩을 할 줄 아는 디자이너와 그렇지 않은 디자이너라는 이분법보다, 자신에게 적합한 도구와 전문성을 선택하는 것이 중요하다. ## 글쓰기와 커뮤니케이션의 중요성 - 코딩 외에 특히 추천하는 역량은 글쓰기와 아이디어를 설명하고 설득하는 능력이다. - 훌륭한 디자인이나 애니메이션도 다른 사람을 납득시키고 관심을 끌지 못하면 실제 제품이나 의사결정으로 이어지기 어렵다. - 커뮤니케이션은 공식적인 발표뿐 아니라 회의, 영상, 강연, 프레젠테이션 등 다양한 방식으로 이루어진다. - 아이디어를 명확하게 전달하고 사람들을 움직이는 능력은 프로젝트의 방향 자체를 바꿀 수 있다. - 학교 교육은 글쓰기와 감성 지능, 대인 커뮤니케이션을 연습할 기회를 제공하므로 이런 역량을 충분히 익히기 전에 너무 일찍 학업을 중단하지 말 것을 권한다. 자신이 코딩에 흥미가 있고 제품 구현을 직접 다루고 싶다면 코딩을 배우는 것이 좋다. 그러나 모든 디자이너가 같은 길을 갈 필요는 없으며, 팀에 필요한 역량과 자신의 관심사를 기준으로 영상, 글쓰기, 발표, 리서치 등 차별화된 전문성을 개발하는 편이 더 실용적이다.

원문 읽기(새 탭에서 열림)

프로토타이핑사용자 경험framermotion-graphics+3

figma·2016년 8월 22일·3분 읽기큐레이션 요약

Figma와 Framer 통합 기능 소개

Figma는 2016년 Framer와의 통합을 발표하며, 정적 UI 디자인과 코드 기반 프로토타이핑 사이의 작업 흐름을 단순화했다. 이제 사용자는 Figma의 디자인 자산을 레이어별로 내보내고 다시 업로드하지 않고도 Framer로 한 번에 가져올 수 있다. 이를 통해 디자인 아이디어를 빠르게 코드로 구현하고, 실제 상호작용을 테스트하며, 더 나은 제품을 빠르게 출시할 수 있다는 것이 글의 결론이다. ## 정적 목업만으로는 부족한 이유 - 모바일과 다양한 디바이스 환경에서는 단순한 화면 이미지나 정적 목업만으로 사용자 경험을 충분히 표현하기 어렵다. - 디자이너에게는 다음 세 가지 능력이 필요하다. - 실제 사용될 맥락에 맞춰 디자인하기 - 사용자의 입력에 따라 화면이 어떻게 변하는지 보여주기 - 모션 그래픽과 전환 효과를 통해 상호작용의 즐거움을 표현하기 - 과거에는 After Effects 같은 영상 편집 도구를 사용하거나 HTML, JavaScript, CSS로 프로토타입을 직접 작성해야 했다. - 이러한 방식은 FTP 업로드, 모바일 기기에서 3G로 접속하기, 브라우저 호환성 문제 해결 등 창의적인 작업과 무관한 부담이 컸다. ## Figma와 Framer의 역할 - Figma는 UI를 빠르게 설계하고 반복해서 수정하는 데 강점을 가진다. - Framer는 코드를 기반으로 복잡하고 개방적인 상호작용을 구현하는 프로토타이핑 도구다. - 특히 복잡한 단일 페이지 인터랙션을 표현하는 데 적합하며, 디자이너가 코드 수준의 프로토타입을 만들 수 있도록 돕는다. - 두 도구를 함께 사용하면 Figma에서 만든 UI 아이디어를 Framer에서 빠르게 구현하고 실제 동작을 검증할 수 있다. ## 한 번의 클릭으로 디자인 자산 가져오기 - 통합 이전에는 Figma의 레이어를 하나씩 내보낸 뒤 Framer에 다시 업로드해야 했다. - 새 통합 기능을 사용하면 Framer 작업 중 Figma 자산을 한 번에 가져올 수 있다. - 반복적인 파일 변환과 업로드 과정이 줄어들어 디자인에서 프로토타이핑으로 넘어가는 시간이 단축된다. - 결과적으로 아이디어를 코드로 옮기고 테스트하는 과정이 더 빠르고 효율적으로 바뀐다. ## 디자인과 코드의 연결 - Framer 사용자 Jonathan Simcoe는 Framer의 코드 기반 구조가 표현력이 높고 제한이 적다고 설명했다. - Figma는 팀이 UI를 빠르게 설계하고 반복하는 데 도움을 주며, Framer는 이를 실제 상호작용이 포함된 프로토타입으로 발전시키는 역할을 한다. - 통합의 목표는 디자이너가 아이디어를 더 빨리 구현하고, 테스트와 개선을 반복해 더 나은 제품을 출시하도록 지원하는 것이다. - 이는 디자인 도구와 개발·프로토타이핑 도구를 분리하기보다 하나의 연속된 작업 흐름으로 연결하려는 시도다. ## 출시 당시 상황 - 해당 기능은 2016년 8월 발표됐으며, 당시 Figma는 아직 비공개 릴리스 단계였다. - Figma는 사용자 요청을 바탕으로 여러 프로토타이핑 도구와의 연동을 검토했고, 그중 Framer에 대한 요구가 가장 컸다고 밝혔다. - 사용자는 Figma에서 시각적 설계를 진행한 뒤 Framer에서 코드 기반 상호작용을 구현하는 방식으로 두 도구를 조합할 수 있었다. 실무에서는 Figma를 화면 설계와 반복 작업에 활용하고, 복잡한 인터랙션이나 실제 동작 검증이 필요할 때 Framer로 가져가는 방식이 효과적이다. 특히 레이어를 수동으로 내보내는 과정이 줄어들기 때문에 프로토타입을 자주 수정하고 테스트하는 팀일수록 통합의 이점을 크게 얻을 수 있다.

원문 읽기(새 탭에서 열림)

프로토타이핑FigmaJavaScriptCSS+4