figma2020년 4월 8일

개방형 플랫폼의 확장: (새 탭에서 열림)

Figma는 사용자의 데이터가 특정 서비스에 갇히지 않아야 한다는 철학을 바탕으로 개방형 플랫폼과 외부 도구 연동을 확장해 왔다. 이 글에서는 Figma에서 협업 디자인을 진행한 뒤 Framer Web로 파일을 가져와 더 표현력 있는 프로토타입을 제작할 수 있는 통합 기능을 소개한다. 결론적으로 Figma는 모든 기능을 독점하기보다 다양한 전문 도구와 연결되어 사용자가 자신의 디자인 워크플로를 자유롭게 구성하도록 하는 방향을 강조한다. ### 데이터 잠금을 피하는 개방형 플랫폼 - Figma는 창립 초기부터 사용자가 자신의 데이터를 서비스 안에 가둬두지 않아야 한다고 주장했다. - 웹 기반으로 서비스를 구축하고, 외부 개발자가 활용할 수 있는 API를 제공한 것도 이러한 철학의 일부다. - 2018년 Figma API 공개 이후 Uber와 GitHub 같은 기업은 Figma 파일 데이터를 사내 도구로 가져와 활용했다. - 일부 사용자는 Figma를 콘텐츠 관리 시스템(CMS)처럼 사용하기도 했다. - 플러그인 API를 통해 개발자가 데이터를 Figma로 가져오거나 외부로 내보내는 자동화 도구를 만들 수 있게 했다. ### 커뮤니티 피드백으로 방향을 수정한 API 전략 - Figma는 생태계 확장을 위해 Sketch 변환기를 만드는 API 챌린지를 개최하고 상금을 제공하려 했다. - 그러나 커뮤니티는 이 방식이 디자이너의 작업을 무상으로 활용하는 ‘스펙 워크’처럼 보일 수 있다고 지적했다. - Figma는 피드백을 받아 해당 계획이 적절하지 않았음을 인정하고 철회했다. - 이는 개방성을 추구하더라도 개발자와 디자이너 커뮤니티의 이해관계 및 작업 가치를 고려해야 한다는 사례로 제시된다. ### 어떤 디자인 워크플로에도 맞는 생태계 - Figma 하나로 브레인스토밍, 와이어프레임, 디자인, 프로토타이핑, 사용자 조사, 핸드오프까지 수행하는 사용자도 있다. - 하지만 고급 프로토타이핑이나 개발자 핸드오프처럼 특정 영역에서는 전문 도구가 더 적합할 수 있다. - 예를 들어 일부 고객은 Figma보다 Zeplin의 개발자 핸드오프 방식을 선호한다. - Figma는 모든 기능을 직접 제공하려 하기보다, 외부 파트너와 협력해 각 도구의 강점을 연결하는 전략을 택한다. - 사용자가 선호하는 도구를 선택하고 필요에 따라 오갈 수 있도록 하는 것이 핵심이다. ### Framer Web에서 Figma 파일 프로토타이핑 - Framer Web의 Figma 임포터를 이용하면 Figma 파일을 Framer Web로 가져올 수 있다. - 디자인 팀은 Figma에서 실시간 협업으로 화면을 설계한 뒤, Framer Web에서 더 복잡하고 표현력 있는 상호작용을 구현할 수 있다. - 이를 통해 Figma는 협업 디자인에, Framer는 고급 프로토타이핑에 집중하는 역할 분담이 가능해진다. - 당시 Framer Web는 베타 단계였으며, 사용자는 대기자 명단에 등록해야 했다. - Figma는 연동 방법을 안내하는 별도 문서도 제공했다. ### 디자인 기술 스택 전반으로 확장되는 통합 - 프로토타이핑 및 사용자 테스트: - Flinto - Principle - ProtoPie - Maze - 개발자 핸드오프 및 문서화: - Avocode - Storybook - ZeroHeight - Zeplin - 협업과 커뮤니티 연계: - Coda - Dribbble - Dropbox - Jira - Notion - Slack - Trello - Figma는 향후에도 여러 파트너와 새로운 통합 기능을 출시하고, 사용자가 원하는 연동에 대한 의견을 수렴하겠다고 밝혔다. Figma를 중심 도구로 사용하되 모든 작업을 Figma 안에서 끝내려 하기보다, 목적에 맞는 전문 도구와 연결하는 방식이 효율적이다. 특히 협업 디자인은 Figma에서 진행하고, 고급 인터랙션과 프로토타입은 Framer Web 같은 도구로 분리하면 각 서비스의 장점을 활용할 수 있다.

web-apifigmaprototypingdesign-collaboration+3

figma2018년 11월 5일

피그마 2018 (새 탭에서 열림)

Figma의 2018년은 단순한 디자인 도구를 넘어 플랫폼과 커뮤니티로 확장한 해였다. 웹 기반 API를 공개해 외부 서비스와 자동화 도구가 Figma에 연결될 수 있도록 했고, 실제 사업과 통합 사례도 등장했다. 동시에 전 세계 사용자 커뮤니티를 조직하고 디자인 시스템 관련 지식 공유를 확대했으며, Series B 투자로 제품·사업 확장을 뒷받침했다. ## 플랫폼과 웹 API의 공개 - Figma는 초기부터 데스크톱 소프트웨어가 아닌 웹 기반 디자인 도구를 지향했다. - 2018년에는 디자인 도구 최초의 웹 API를 공개하며 Figma Platform을 출시했다. - API를 통해 다음과 같은 확장이 가능해졌다. - 다른 디자인·개발 도구와의 연동 - 반복 작업 자동화 - 스크립트와 웹 애플리케이션을 활용한 맞춤형 워크플로 구축 - Uber와 GitHub는 공개 전부터 API를 활용해 자체 업무 프로세스를 맞춤화했다. - 클라우드 기반 구조 덕분에 기존의 폐쇄적인 데스크톱 소프트웨어로는 구현하기 어려웠던 온라인 통합이 가능해졌다. ## API를 기반으로 한 생태계와 사업 - 플랫폼 출시 7개월 만에 Figma 위에서 유료 사업을 운영하는 기업이 등장했다. - 커뮤니티와 기업이 만든 주요 통합 사례는 다음과 같다. - PDF 내보내기 - 스타일 가이드 자동 생성 - 텍스트와 레이어 이름 검색·일괄 변경 - JavaScript용 Figma API 라이브러리 - 외부 서비스와의 연동도 확대됐다. - Avocode와 Zeplin: 개발자 핸드오프 지원 - Principle: Figma 디자인에 고급 애니메이션 추가 - Relay for Figma: 디자인을 코드베이스로 직접 전달 - Pagedraw: Figma 디자인을 React 코드로 변환 - Overflow: 사용자 플로우 다이어그램 제작 - Haiku: 디자인을 프로덕션용 컴포넌트로 전환 - Figma는 파트너십과 통합 생태계를 향후 성장의 핵심 축으로 보고, 2019년에도 플랫폼 확장을 이어가겠다고 밝혔다. ## 글로벌 커뮤니티 구축 - 2018년 Figma의 관심사는 제품 자체뿐 아니라 사용자 커뮤니티로 확대됐다. - 디자인 시스템을 주제로 한 밋업을 세계 여러 도시에서 개최했다. - 초기에는 8개 도시에서 시작 - 이후 17개 국가로 활동 범위를 확장 - Bengaluru, Toronto 등지에서 디자이너들이 실제 디자인 시스템 운영 경험을 공유 - 커뮤니티의 관심이 커지자 DesignSystems.com을 개설했다. - Airbnb, GitHub, Braintree, Segment 등의 구성원이 디자인 시스템 운영 사례와 실무 조언을 공유했다. - Figma는 온라인 제품뿐 아니라 오프라인 만남과 지식 공유를 통해 사용자 간 연결을 강화하려 했다. ## 기업 확장과 투자 - Microsoft Dynamics 365 for Talent 디자인팀은 Figma API를 활용해 개발자 핸드오프를 자동화했다. - 대규모 조직이 여러 부서와 팀에서 Figma를 채택하기 시작했다. - 2018년 초 2,500만 달러 규모의 Series B 투자를 유치했다. - 투자금은 제품 개발과 사업 확장, 플랫폼 및 커뮤니티 성장에 활용됐다. ## 실용적인 시사점 Figma의 사례는 협업 도구가 자체 기능만으로 성장하는 것이 아니라 API, 외부 통합, 사용자 커뮤니티를 통해 플랫폼으로 발전할 수 있음을 보여준다. 특히 반복적인 디자인·개발 업무를 자동화하려는 팀이라면 API 기반 연동과 기존 도구와의 연결 가능성을 우선 검토할 만하다.

web-apifigmadesign-systemsreact+3

figma2018년 10월 22일

새로운 Principle 연동 기능 (새 탭에서 열림)

Figma가 프로토타이핑 도구 Principle과 연동되어, Figma에서 만든 정적 디자인에 고급 애니메이션과 인터랙션을 추가할 수 있게 되었다. 사용자는 코딩 없이 스크롤, 스와이프, 버튼 상태 변화, 스프링·이징·선형 전환 등을 구현해 실제 모바일 앱과 유사한 프로토타입을 만들 수 있다. 또한 Figma에서 디자인을 수정하면 Principle이 변경 사항을 감지해 기존 애니메이션을 유지한 채 동기화한다. ## Figma와 Principle의 통합 - Principle에서 Figma를 가져오기 소스로 인증하면 Figma 디자인을 Principle로 불러올 수 있다. - Figma의 화면과 객체를 기반으로 Principle에서 인터랙션과 모션을 설정한다. - 정적인 UI 시안을 실제 앱처럼 동작하는 프로토타입으로 발전시킬 수 있다. - 이 통합은 Figma의 웹 기반 API를 활용해 구축되었다. ## 구현할 수 있는 인터랙션과 애니메이션 - 페이지에 스크롤 동작 추가 - 이미지 카드 사이의 스와이프 전환 구현 - 사용자의 상호작용에 따른 버튼 상태 변화 설정 - 객체 간 전환 애니메이션 적용 - 스프링(spring) - ease in - ease out - 선형(linear) 전환 - 별도의 코딩 없이 모바일 앱에 가까운 동작과 화면 전환 표현 ## 코딩 없이 사용하는 시각적 프로토타이핑 - Principle은 인터페이스 디자이너에게 익숙한 시각적 UI를 제공한다. - 디자인과 엔지니어링 작업을 오가는 대신, 디자이너가 시각적·창의적 사고에 집중할 수 있도록 설계되었다. - 초보자도 비교적 쉽게 사용할 수 있으며, 복잡한 프로토타입을 만들면서도 코드를 배울 필요가 없다. - 단순한 사용성과 강력한 애니메이션 기능의 균형이 Principle의 장점으로 소개된다. ## Figma 수정 사항의 동기화 - 이미 Principle로 가져온 디자인을 Figma에서 수정해도 두 도구 사이의 동기화가 가능하다. - Principle은 Figma의 변경 사항을 자동으로 인식하고 기존 작업에 병합한다. - 예를 들어 Figma에서 버튼 크기를 변경하면 Principle에서도 버튼 크기가 자동으로 조정된다. - 이때 Principle에서 설정한 기존 애니메이션은 유지된다. - 따라서 디자인 수정 때마다 프로토타입의 인터랙션을 처음부터 다시 설정할 필요가 없다. ## 개발자를 위한 Figma API 활용 - Principle 제작자는 Figma의 API 문서와 도구를 활용해 연동 기능을 개발했다. - Figma의 API Explorer에서는 특정 Figma 파일 ID를 입력해 API 호출 결과를 확인할 수 있다. - 개발자는 API의 기본 구성 요소와 파일 데이터 구조를 직접 테스트하며 연동 방식을 이해할 수 있다. - 이는 디자인 도구를 외부 서비스와 연결하려는 개발자에게 실용적인 검증 환경을 제공한다. ## 활용과 의의 - Figma는 화면 설계에, Principle은 모션과 인터랙션 구현에 특화된 역할을 맡는다. - 두 도구를 함께 사용하면 디자인 단계에서 사용자 경험을 더 현실적으로 검증할 수 있다. - 디자이너는 개발에 넘기기 전에 전환 효과와 인터랙션의 완성도를 확인할 수 있다. - 통합 기능은 Figma 사용자들의 지속적인 요청에 대한 대응으로 제공되었다. 실무에서는 Figma에서 레이아웃과 시각 디자인을 관리하고, Principle에서 핵심 사용자 흐름과 애니메이션을 빠르게 검증하는 방식이 효과적이다. 특히 디자인 변경 후에도 애니메이션이 유지되므로, 반복적인 프로토타입 수정 작업을 줄일 수 있다.

web-apifigmaprototypingui-ux+2

figma2018년 3월 21일

Figma 플랫폼을 소개합니다 (새 탭에서 열림)

Figma는 디자인 파일을 다른 도구·스크립트·웹 앱과 연결하는 **Figma Platform**을 공개하며, 전문 디자인 도구 최초의 웹 API를 지향했다. API를 통해 디자인 데이터를 실시간으로 읽고, 댓글을 주고받고, 이미지로 렌더링할 수 있어 조직 맞춤형 협업 자동화가 가능해진다. 이를 기반으로 디자인을 고립된 파일이 아니라 조직 전체가 공유·검색·활용하는 개방형 데이터로 전환하는 것이 글의 핵심 결론이다. ## Figma Platform의 목표 - Figma를 외부 도구, 사내 스크립트, 웹 애플리케이션과 연결하는 플랫폼을 제공한다. - 기존 데스크톱 디자인 도구는 운영체제, 로컬 파일 경로, 특정 소프트웨어 버전에 종속되어 통합이 어려웠다. - Figma는 웹 기반이므로 서로 다른 컴퓨터나 웹 서비스에서도 디자인의 최신 상태에 접근할 수 있다. - 기업은 조직별 업무 방식에 맞춘 검색, 공유, 모니터링, 자동화 도구를 직접 만들 수 있다. ## 초기 Web API의 세 가지 기능 - **디자인 파일 읽기** - 디자인을 개방형 JSON 형식으로 제공한다. - 도형, 텍스트, 컴포넌트, 프로토타입 링크, 전환 효과, 제약 조건 등 디자인을 구성하는 트리 구조를 확인할 수 있다. - 파일 URL에 포함된 고유 키를 사용해 특정 디자인의 실시간 스냅샷을 가져온다. - **댓글 읽기·쓰기** - 외부 서비스가 Figma 디자인의 댓글을 조회하거나 작성할 수 있다. - 디자인 검토와 협업 프로세스를 다른 업무 도구와 연결할 수 있다. - **이미지 렌더링** - 전체 파일 또는 파일의 일부를 JPG, PNG, SVG 등 표준 이미지 형식으로 변환한다. - 별도의 수동 내보내기 없이 외부 서비스에서 최신 디자인 이미지를 활용할 수 있다. ## 개방형 웹 API가 제공하는 장점 - 특정 운영체제나 설치된 디자인 프로그램에 의존하지 않는다. - 별도의 독점 플러그인 언어나 프레임워크 대신 일반적인 웹 개발 기술을 사용할 수 있다. - 잘 정의된 API를 사용하므로 사내 자동화와 외부 서비스 통합을 빠르게 구현할 수 있다. - 통합 기능을 유지·보수하고 최신 상태로 업데이트하기가 상대적으로 쉽다. - 디자인 데이터를 이미지뿐 아니라 구조화된 정보로 활용할 수 있어 새로운 형태의 협업 도구를 만들 수 있다. ## 실제 활용 사례: Uber와 GitHub - **Uber** - 여러 도시에 분산된 디자인 팀의 작업을 조직 전체에 보여주기 위해 API를 활용했다. - 진행 중인 디자인을 사무실 TV에 실시간으로 표시하는 피드를 만들고 있다. - Dribbble과 유사한 내부 디자인 저장소에서 프로젝트를 탐색하는 기능도 계획했다. - **GitHub** - 아이콘 제작 과정 일부를 자동화해 반복 작업을 줄이고 효율성을 높였다. - 이러한 사례는 API가 단순한 파일 내보내기를 넘어 조직 내부의 가시성, 검색, 자동화 문제를 해결할 수 있음을 보여준다. ## 오픈소스 프로젝트와 외부 통합 - Figma는 커뮤니티가 활용할 수 있도록 여러 데모 프로젝트를 오픈소스로 공개했다. - 예시: - Figma 디자인 맞춤법 검사기 - 생성형 아트 도구 - 디자인을 Ethereum 블록체인에 기록하는 방법 - Avocode, Haiku, Zeplin, Pagedraw 등 다른 디자인·개발 도구와의 통합도 강화했다. - 플랫폼의 가치는 Figma가 모든 기능을 직접 제공하는 데보다 커뮤니티와 기업이 각자의 문제를 해결하는 데 있다. ## 향후 공개 예정 기능 - **Webhooks** - 파일이나 팀에 연결해 디자인 변경 이벤트를 콜백 형태로 전달한다. - 디자인 업데이트를 감지해 외부 시스템을 자동으로 갱신할 수 있다. - **Write API** - 초기 버전은 주로 디자인 데이터를 읽는 데 초점을 맞췄다. - 이후 외부 애플리케이션이 Figma 디자인 자체를 수정할 수 있는 쓰기 API를 제공할 계획이다. - **Extensions** - 인앱 확장 기능은 강력하지만 품질, 안정성, 예측 가능성을 떨어뜨릴 수 있다. - Figma는 개발자 자유와 제품 안정성을 함께 확보할 수 있는 모델을 마련한 뒤 확장 기능을 도입하려 했다. - 당시에는 구체적인 출시 일정이 정해지지 않았다. ## 대규모 협업에서 해결하려는 문제 - 디자인은 UI 디자이너만 사용하는 산출물이 아니라 카피라이터, 엔지니어, 연구자, 마케터, 경영진 등 여러 부서가 함께 다루는 정보가 되었다. - 전통적인 데스크톱 도구에서는: - 파일을 내보내고 업로드해야 공유할 수 있다. - 원본이 변경되면 공유된 파일이 즉시 오래된 버전이 된다. - 경영진이 실시간 작업을 보고 의견을 남기기 어렵다. - 엔지니어가 필요한 최신 에셋을 찾는 데 많은 시간을 쓴다. - 다른 팀이 이미 해결한 문제와 해결책을 발견하기 어렵다. - Figma API는 조직 전체에서 디자인을 실시간으로 공유하고, 검색하고, 모니터링하는 맞춤형 워크플로를 구축하는 기반이 된다. Figma Platform은 디자인 도구를 폐쇄적인 제작 환경에서 개방형 협업 플랫폼으로 확장하려는 시도다. 실제 도입 시에는 API로 최신 디자인 조회·렌더링·댓글 연동부터 시작하고, Webhooks와 자동화 기능을 결합해 사내 디자인 검색 및 배포 시스템으로 발전시키는 접근이 실용적이다.

web-apidesign-collaborationjsonsvg+3