web-apps

2 개의 포스트

figma

Figma Make를 이제 모든 사용 (새 탭에서 열림)

Figma Make가 베타를 종료하고 모든 사용자가 사용할 수 있는 정식 버전으로 출시됐다. 자연어 프롬프트만으로 고해상도 인터랙티브 프로토타입과 웹 앱을 만들 수 있으며, Figma 라이브러리와 Supabase 연동으로 디자인 일관성과 데이터 기반 기능을 강화했다. 이를 통해 디자이너·엔지니어·PM이 기술적 배경과 관계없이 아이디어를 빠르게 실험하고 협업할 수 있다는 것이 글의 핵심 주장이다. ## Figma Make의 정식 출시와 주요 기능 - Figma Make는 아이디어를 프롬프트로 입력해 인터랙티브하고 높은 완성도의 프로토타입을 제작하는 도구다. - 베타 기간 이후 다음 기능이 추가됐다. - **기존 Figma 라이브러리 가져오기** - 색상 팔레트와 사용 가이드 - 타이포그래피 - 핵심 스타일 요소 - 이를 활용해 프로토타입과 웹 앱의 시각적 일관성 유지 - **Supabase 연동** - 백엔드 데이터베이스와 연결 - 단순한 화면 시연을 넘어 데이터가 동작하는 프로토타입과 웹 앱 제작 가능 - Figma Make 외에도 Make and Edit Image, Boost Resolution 등 Figma AI 기능이 정식 제공으로 전환됐다. - Figma Make 파일의 **퍼블리싱 기능은 여전히 베타**다. ## 요금제별 사용 범위와 AI 크레딧 - **Full seat 사용자** - Figma Make와 AI 기능을 전면적으로 사용할 수 있다. - Figma Make 파일을 퍼블리시하거나 비공개로 공유할 수 있다. - **View·Collab·Dev seat 사용자** - 초안 상태의 Figma Make 파일을 무제한 생성할 수 있다. - 각 요금제에서 제공되는 AI 기능을 사용할 수 있다. - **Starter 플랜 사용자** - 초안 상태의 Figma Make 파일을 무제한 생성할 수 있다. - 팀과 최대 3개의 Figma Make 파일을 공유할 수 있다. - 기타 AI 기능은 유료 플랜에서만 제공된다. - 모든 seat에 AI 크레딧이 포함된다. - 향후 파워 유저를 위한 추가 AI 크레딧 구매 기능이 도입될 예정이다. - Full seat의 크레딧 한도는 당분간 엄격하게 적용하지 않지만, Starter 및 View·Collab·Dev seat에는 일일·월간 제한이 적용된다. - Full seat 기준 월간 크레딧은 다음과 같다. - Professional: 3,000크레딧, 약 50~70회 Make 프롬프트 - Organization: 3,500크레딧, 약 60~80회 프롬프트 - Enterprise: 4,250크레딧, 약 80~100회 프롬프트 ## 제품 개발 전 과정의 협업 방식 변화 - Figma Make는 단순히 결과물을 만드는 도구가 아니라 제품 개발 과정 전체의 탐색과 논의를 촉진한다. - 디자이너는 복잡한 인터랙션을 직접 테스트할 수 있다. - 엔지니어는 높은 완성도의 디자인 아티팩트를 만들 수 있다. - PM은 아이디어 검증을 위한 기능성 목업을 제작할 수 있다. - 여러 직군이 정적인 문서나 설명 대신 실제로 작동하는 결과물을 바탕으로 논의할 수 있다. - Figma는 이를 새로운 해결책을 시도하고 위험을 감수하며 더 창의적인 방향을 탐색하는 업무 방식의 변화로 설명한다. ## 자연어로 프로토타이핑의 문턱을 낮추다 - 아이디어를 말로 설명하는 것만으로는 화면의 모양과 사용감을 정확히 전달하기 어렵다. - 기존 프로토타입 제작은 시간이 많이 들고, 제작 역량에 따라 접근성이 달라질 수 있다. - Figma Make는 자연어 프롬프트를 사용해 누구나 현실적인 프로토타입을 만들 수 있도록 한다. - 결과물을 빠르게 확인하고 반복 수정할 수 있어 아이디어 탐색과 팀 내 합의가 쉬워진다. ## Survey Traffic Calculator 사례 - Figma의 연구원 Rie McGwier는 Figma의 8개 제품에서 진행되는 약 30개 설문조사의 트래픽을 관리하기 위한 계산기를 Figma Make로 제작했다. - 모델에는 다음과 같은 데이터가 반영됐다. - 주간 활성 사용자 비율 - 트래픽 제약 조건 - 설문 대상 간 중복 - 응답률 - 재접촉 제한 기간 - 목표 표본 수 - 이 수학적 모델을 기반으로 대시보드를 만들고, 슬라이더와 지표를 통해 설문 트래픽을 조정할 수 있도록 했다. - 정적인 다이어그램 대신 실제 데이터를 입력하고 결과를 확인하는 방식으로 개선하면서, 특정 사용자 집단에 설문이 과도하게 배정되는 문제를 줄이는 데 활용했다. Figma Make는 빠른 아이디어 검증과 직군 간 협업이 중요한 팀에 특히 유용하다. 다만 AI 크레딧과 파일 공유·퍼블리싱 제한을 먼저 확인하고, 초기에는 작은 기능이나 내부 검증용 프로토타입부터 적용하는 것이 현실적이다.

figma

플러그인 비하인드 (새 탭에서 열림)

재키 추이는 Microsoft의 UX 디자이너이자 Figma API와 플러그인 베타 초기 사용자로, 디자이너의 작업을 더 빠르고 효율적으로 만드는 도구를 개발해왔다. 그는 접근성 기능을 만들기 위한 해커톤에서 Figma API를 접한 뒤 플러그인 개발에 매료되었고, 개인 프로젝트를 커뮤니티용 플랫폼으로 확장했다. 이 인터뷰는 디자이너와 개발자의 경계가 가까워지는 흐름과 Figma 플러그인 생태계의 가능성을 보여준다. ## 디자이너이자 도구 제작자가 된 배경 - 어린 시절 LEGO로 무언가를 만들고 발명하는 것을 좋아했던 경험이 UX 디자인과 개발에 대한 관심으로 이어졌다. - UX 디자이너로 일하면서 코딩을 익혀 자신이 설계한 제품을 직접 구현할 수 있게 되었다. - 다른 사람들이 만든 작업을 관찰하고, 서로 다른 아이디어를 연결해 자신의 프로젝트에 적용하는 방식으로 영감을 얻는다. - 디자인과 개발을 함께 수행하며 아이디어가 실제 결과물로 완성되는 과정을 중요하게 여긴다. ## Figma API를 접한 계기 - 2018년 Microsoft OneWeek Hackathon에서 팀원들과 디자인 도구에 접근성 기능을 추가하는 프로젝트를 진행했다. - Figma가 웹 기반으로 만들어졌다는 점에 흥미를 느껴 Figma 플랫폼과 API를 탐색하기 시작했다. - API를 이용해 사용자 동작을 프로그래밍 방식으로 시뮬레이션할 수 있다는 사실을 발견하면서 본격적으로 플러그인 개발에 빠져들었다. - 기능을 하나씩 발견할 때마다 새로운 가능성이 열린다고 느꼈으며, 공식 API의 사용 편의성과 안정성을 높이 평가했다. ## 개발한 Figma 플러그인 - **Find and Replace** - Figma 커뮤니티를 위해 만든 대표적인 플러그인이다. - 디자인 파일 안의 텍스트나 요소를 찾아 일괄적으로 변경하는 작업을 지원한다. - **Paste to Fill** - 복사한 콘텐츠를 디자인 요소의 채우기 영역에 적용하는 도구다. - **Button Resizer** - 버튼의 크기를 보다 쉽게 조정할 수 있도록 돕는다. - 이외에도 Microsoft의 업무와 일반 Figma 사용자 모두에게 유용한 다양한 플러그인을 제작했다. ## Figma Plus로 확장된 개인 프로젝트 - 초기에는 브라우저에서만 동작하는 Chrome 확장 프로그램 형태로 플러그인을 만들었다. - 커뮤니티의 긍정적인 반응을 통해 Figma 데스크톱 앱에서도 사용할 수 있는 도구에 대한 수요를 확인했다. - Mirko Santangelo, Ahmad Al Haddad와 협업해 자신들이 알고 있던 Figma API 지식을 통합하는 플랫폼을 개발했다. - 작은 프로젝트로 시작했지만 다음 요소를 포함한 완전한 시스템으로 발전했다. - 자체 API - 플러그인 스토어 - 플러그인 게시 및 배포 프로세스 - Figma가 공식적으로 플러그인 베타를 시작하자 팀도 베타 프로그램에 참여했다. - 추이는 여러 플러그인 중에서도 역설적으로 이 대규모 시스템 프로젝트인 **Figma Plus**를 가장 자랑스럽게 여긴다. ## 디자인과 개발의 미래 - 앞으로 5년 동안 디자이너와 개발자는 업무 과정에서 더욱 긴밀하게 협업하게 될 것으로 전망한다. - 미래의 디자인 도구는 현재 존재하는 디자인과 개발 사이의 간극을 줄일 것이다. - 디자이너가 기본적인 코딩 역량을 갖추고 직접 도구를 제작하는 흐름이 이런 변화를 촉진할 수 있다. ## Figma 커뮤니티를 위한 개발 - Microsoft에서 Figma가 주요 디자인 도구로 자리 잡았기 때문에, 팀의 업무 흐름을 개선하는 플랫폼 위에서 개발하는 것이 자연스러운 선택이었다. - 내부 업무용 도구를 만드는 데서 멈추지 않고, 더 넓은 Figma 커뮤니티에 공개해 다른 사용자에게도 혜택을 주려 했다. - 2019년 8월 1일부터 추이의 플러그인들이 Figma 커뮤니티에 공개될 예정이었다. 디자이너가 자신의 반복 작업과 불편을 직접 관찰하고 Figma API로 해결책을 구현하면, 업무 효율을 높이는 동시에 커뮤니티 전체에 기여할 수 있다. 이 사례는 디자인 도구를 단순히 사용하는 것을 넘어, 필요한 기능을 직접 만들고 공유하는 방식이 Figma 생태계를 확장한다는 점을 보여준다.