engineering

Figma에서 디자인 시스템 워 (새 탭에서 열림)

eBay는 브랜드 아이덴티티와 제품 UI 사이의 간극을 좁히기 위해 Figma의 최신 기능을 활용한 차세대 디자인 시스템 'Evo'를 구축했습니다. 이들은 정적인 스타일 가이드를 넘어, 브랜드의 감성과 제품의 기능성을 동시에 수용할 수 있는 유연한 토큰 시스템을 설계하여 전사적인 일관성을 확보했습니다. 결과적으로 디자인과 개발 전반에 걸쳐 브랜드 경험을 효율적으로 확장하고 관리할 수 있는 가교를 마련했습니다. ### 브랜드와 제품 디자인의 단절 해소 * 기존에는 브랜드 마케팅 팀과 제품 디자인 팀이 서로 다른 언어와 자산을 사용함에 따라 시각적 불일치가 발생하고 협업 효율이 저하되었습니다. * 브랜드의 감성적인 '표현력(Expressiveness)'과 제품의 '기능적 제약(Functional constraints)' 사이의 균형을 맞추기 위해, 두 영역을 통합할 수 있는 시스템적 접근이 필요했습니다. * 단순한 로고 배치를 넘어, 색상, 타이포그래피, 간격 등 디자인의 기본 요소들이 브랜드의 성격(Brand DNA)을 자연스럽게 반영하도록 기획되었습니다. ### 계층형 디자인 토큰 구조 (Token Architecture) * **Global Tokens:** 원색(Palette)이나 기본 폰트 크기 등 가장 기초적인 값을 정의하며, 시스템의 원천이 되는 데이터 계층입니다. * **Semantic Tokens:** 'Action-primary', 'Background-subtle'과 같이 디자인의 '의도'와 '맥락'을 담아 추상화함으로써, 특정 값이 변경되어도 전체 시스템의 의미적 일관성을 유지합니다. * **Brand/Component Tokens:** 특정 브랜드 테마나 개별 컴포넌트에 최적화된 값을 적용하여, 동일한 구조 안에서도 다양한 시각적 변주가 가능하도록 유연성을 확보했습니다. ### Figma Variables와 Mode를 활용한 가변성 제어 * Figma의 **Variables** 기능을 도입하여 색상, 수치 등 모든 디자인 속성을 데이터화하고 이를 코드와 동기화할 수 있는 기반을 만들었습니다. * **Modes** 기능을 사용하여 'Standard(표준)'와 'Expressive(표현 중심)' 모드를 설정하고, 클릭 한 번으로 전체 UI의 분위기를 전환할 수 있는 환경을 구축했습니다. * 이를 통해 마케팅 페이지에서는 브랜드 색채가 강한 UI를 적용하고, 결제나 설정 등 기능적 페이지에서는 가독성 중심의 절제된 UI를 동일한 컴포넌트 세트로 구현합니다. ### 디자인과 엔지니어링의 워크플로우 통합 * 디자인 토큰을 코드 저장소와 직접 연결하여, 디자이너가 Figma에서 변수값을 수정하면 개발 환경에도 즉각 반영되는 '단일 진실 공급원(Single Source of Truth)'을 실현했습니다. * 엔지니어는 수치(Hard-coded values) 대신 토큰 이름을 사용함으로써 협업 과정에서의 커뮤니케이션 오류를 줄이고 유지보수성을 극대화했습니다. * 시스템 구축 초기부터 엔지니어링 팀과 긴밀히 협업하여, 실제 프로덕션 환경에서 토큰이 어떻게 소비되고 구현될지를 고려한 설계를 진행했습니다. 성공적인 디자인 시스템은 단순한 컴포넌트 라이브러리가 아니라 브랜드 가치를 제품에 투영하는 '살아있는 언어'가 되어야 합니다. 디자인 토큰을 활용한 계층 구조를 먼저 설계하고, Figma의 모드 기능을 통해 다양한 브랜드 맥락을 수용함으로써 확장 가능하고 견고한 제품 경험을 구축할 수 있습니다.

제너럴리스트 (새 탭에서 열림)

전문적인 커리어 피벗(Professional Pivot)은 단순히 직업을 바꾸는 행위를 넘어, 기존의 전문성을 기반으로 새로운 가치를 창출하는 전략적 진화 과정입니다. 이 글은 변화의 필요성을 인지하는 시점부터 위험을 관리하며 성공적으로 새로운 경로에 안착하기까지의 실천적인 가이드를 제공합니다. 결론적으로 성공적인 피벗은 현재의 강점을 레버리지하여 인접한 영역으로 점진적으로 확장할 때 가장 안정적으로 이루어집니다. **변화의 시점 포착과 내적 동기 강화** * 현재의 역할에서 성장이 정체되었다고 느끼거나, 업무에서 얻는 에너지보다 소모되는 에너지가 클 때가 피벗을 고민해야 할 신호입니다. * 무작정 퇴사하기보다는 현재 조직 내에서 새로운 기술을 익히거나 다른 팀과의 협업을 통해 관심 분야를 탐색하는 '내부 피벗'을 우선적으로 고려해야 합니다. * 자신이 진정으로 몰입할 수 있는 문제가 무엇인지 정의하고, 그 문제가 시장의 수요와 일치하는 지점을 찾는 것이 중요합니다. **인접 영역으로의 확장(The Adjacent Possible)** * 완전히 낯선 분야로 도약하는 것보다, 현재의 전문성과 맞닿아 있는 '인접 영역'으로 이동하는 것이 성공 확률을 높입니다. * 예를 들어, 엔지니어는 제품에 대한 이해도를 바탕으로 제품 매니저(PM)로, 디자이너는 논리적 사고를 기반으로 프론트엔드 개발자로 확장하는 식이 효율적입니다. * 기존의 '도메인 지식'은 유지하면서 '직무 스킬'만 변경하거나, 반대로 직무는 유지하되 도메인을 바꾸는 방식으로 리스크를 분산합니다. **실행력을 높이는 점진적 전환 전략** * 한 번에 모든 것을 바꾸려 하기보다 사이드 프로젝트나 오픈 소스 기여를 통해 새로운 분야에 대한 실무 역량을 증명해야 합니다. * 새로운 커뮤니티에 참여하여 네트워크를 형성하고, 해당 분야의 언어와 문화를 익히는 문화적 적응 기간을 가집니다. * 작은 성공(Small Wins)을 반복적으로 쌓아 자신감을 얻고, 이를 포트폴리오화하여 잠재적 고용주나 파트너에게 신뢰를 줍니다. 성공적인 피벗은 완벽한 계획보다는 실행 과정에서의 유연한 수정에 달려 있습니다. 자신의 커리어를 하나의 '제품'으로 보고, 지속적인 반복(Iteration)과 피드백을 통해 최적의 경로를 찾아가십시오. 변화를 두려워하기보다 전문성의 범위를 넓히는 확장으로 인식할 때 지속 가능한 커리어를 구축할 수 있습니다.

파블로 산체스의 예기 (새 탭에서 열림)

개발자에게 '마법 같은' 경험을 선사하는 도구는 단순한 기능의 나열이 아니라, 개발자의 워크플로우에 대한 깊은 공감과 세심한 설계에서 탄생합니다. 샤메인 리(Charmaine Lee)는 도구의 복잡성을 사용자에게 전가하지 않고, 첫 만남부터 숙련된 사용 단계까지 마찰 없는 경험을 제공하는 것이 핵심이라고 강조합니다. 결국 성공적인 개발자 도구는 기술적 우수성을 넘어 개발자의 생산성을 극대화하고 창의성을 방해하는 모든 요소를 제거하는 데 목적을 두어야 합니다. **초기 진입 장벽의 최소화와 즉각적인 가치 전달** * **Time to "Hello World" 최적화**: 개발자가 도구를 처음 접하고 첫 결과물을 내기까지의 시간을 가장 중요한 지표로 삼아야 하며, 설치와 설정 과정을 극도로 단순화해야 합니다. * **합리적인 기본값(Sensible Defaults) 제공**: 사용자가 고민하지 않고도 바로 시작할 수 있도록 최적의 설정을 기본으로 제공하되, 필요할 때 언제든 수정할 수 있는 '탈출구(Escape hatches)'를 열어두어야 합니다. * **단순함의 역설**: 사용자에게 보여지는 단순함은 사실 개발자의 엄청난 노력이 투입된 결과이며, 도구 제작자는 사용자의 복잡함을 대신 짊어지는 역할을 해야 합니다. **개발자 환경과의 조화와 성능** * **기존 워크플로우와의 통합**: 개발자가 이미 사용하고 있는 IDE, 터미널, CI/CD 환경을 존중하고 그 흐름에 자연스럽게 녹아드는 도구를 설계해야 합니다. * **성능은 핵심 기능**: 속도와 응답성은 단순한 사양이 아니라 사용자 경험(UX) 그 자체이며, 도구가 개발자의 사고 속도를 따라가지 못하면 마법 같은 느낌은 사라집니다. * **두 번째 경험의 최적화**: 첫 사용뿐만 아니라, 반복적으로 도구를 사용할 때 느껴지는 사소한 불편함을 제거하여 장기적인 생산성을 보장해야 합니다. **커뮤니케이션으로서의 도구 설계** * **에러 메시지는 UI의 일부**: 에러는 단순히 실패를 알리는 출력이 아니라, 개발자가 문제를 즉시 해결할 수 있도록 돕는 구체적이고 친절한 가이드가 되어야 합니다. * **문서화는 제품 그 자체**: 문서는 제품 개발 후 덧붙이는 부록이 아니라, 제품의 핵심 구성 요소로서 코드만큼이나 정밀하게 관리되고 설계되어야 합니다. * **인간을 위한 설계**: 기계가 이해하기 좋은 구조보다는 개발자가 직관적으로 이해하고 예측할 수 있는 명칭과 인터페이스를 지향해야 합니다. 개발자 도구를 만들 때 가장 경계해야 할 것은 '기능의 과잉'입니다. 진정으로 사랑받는 도구를 만들고 싶다면, 화려한 기능을 추가하기보다 개발자가 겪는 사소한 마찰 지점들을 하나씩 제거해 나가는 것부터 시작하시기 바랍니다. 도구가 개발자의 사고 과정을 방해하지 않고 보이지 않는 곳에서 묵묵히 지원할 때, 개발자는 비로소 마법과 같은 몰입 경험을 하게 됩니다.

Made in Figma: 국립공 (새 탭에서 열림)

이 글은 슈퍼볼 광고라는 거대한 마케팅 이벤트를 뒷받침하기 위해 고성능 랜딩 페이지를 구축한 기술적 여정을 다룹니다. 수백만 명의 동시 접속자가 발생하는 극한의 트래픽 상황에서도 중단 없는 서비스를 제공하기 위한 엔지니어링 최적화와 디자인 전략의 결합을 핵심적으로 설명합니다. 결론적으로, 철저한 사전 성능 테스트와 프레임워크 차원의 최적화가 브랜드의 신뢰도를 결정짓는 결정적 요소임을 강조합니다. **극한의 트래픽을 견디는 엔지니어링 아키텍처** * 수백만 명의 사용자가 동시에 웹사이트에 진입하는 상황에 대비하여 정적 사이트 생성(SSG) 방식을 채택, 서버 사이드 렌더링의 부하를 제거하고 응답 속도를 극대화했습니다. * 전 세계 어디서든 지연 없는 접속을 보장하기 위해 에지 컴퓨팅(Edge Computing) 기술과 글로벌 CDN 인프라를 활용하여 물리적 거리에 따른 병목 현상을 최소화했습니다. * 초기 로딩 시 필수적인 리소스만을 우선적으로 로드하고, 이미지 및 자바스크립트 에셋을 압축 및 최적화하여 1초 미만의 LCP(Largest Contentful Paint)를 달성했습니다. **브랜드 정체성과 퍼포먼스의 균형을 맞춘 디자인** * 마케팅의 핵심 메시지를 시각적으로 강렬하게 전달하면서도, 복잡한 애니메이션이 페이지 성능을 저해하지 않도록 코드로 구현된 최적화된 모션을 사용했습니다. * 다양한 기기 환경에서 일관된 경험을 제공하기 위해 반응형 레이아웃을 정교하게 설계하였으며, 사용자 인터랙션 시 즉각적인 피드백이 가능하도록 UI/UX를 구성했습니다. * 디자인 팀과 엔지니어링 팀이 프레임워크 내에서 실시간으로 협업하며, 디자인 수정 사항이 즉시 고성능 코드로 변환될 수 있는 효율적인 워크플로우를 구축했습니다. **실전 시뮬레이션을 통한 안정성 확보** * 슈퍼볼 광고 송출 시점의 예상 트래픽보다 높은 수치로 스트레스 테스트를 수행하여 시스템의 임계치를 확인하고, 발생 가능한 모든 장애 시나리오에 대비했습니다. * 자동 확장(Auto-scaling) 설정을 최적화하여 트래픽 급증 시 즉각적으로 컴퓨팅 자원을 늘릴 수 있는 유연한 인프라 구조를 확립했습니다. * 실시간 모니터링 도구를 배치하여 광고 방영 중 발생하는 미세한 오류나 성능 저하를 즉각적으로 감지하고 대응할 수 있는 관제 체계를 마련했습니다. 대규모 마케팅 캠페인을 준비하는 팀이라면 시각적 완성도만큼이나 인프라의 복원력과 프런트엔드 성능 최적화에 집중해야 합니다. 기술적 준비가 뒷받침되지 않은 마케팅은 오히려 브랜드 이미지에 타격을 줄 수 있으므로, 초기 기획 단계부터 엔지니어링과 마케팅 팀 간의 긴밀한 기술적 조율이 필수적입니다.

입력과 출력에 관한 오 (새 탭에서 열림)

피그마(Figma)의 공식 블로그인 '더 프롬프트(The Prompt)'는 디자인, 엔지니어링, AI, 조직 문화 등 피그마를 지탱하는 유무형의 지식과 통찰을 공유하는 통합 지식 플랫폼입니다. 이 블로그는 단순히 제품 소식을 전하는 수준을 넘어, 피그마가 복잡한 기술적 문제를 해결하는 방식과 제품 디자인에 담긴 철학을 외부와 투명하게 공유하여 업계의 성장을 돕는 데 목적이 있습니다. **엔지니어링과 AI를 통한 기술적 혁신** - 'Engineering' 섹션을 통해 대규모 실시간 협업 환경을 구축하며 겪은 아키텍처 고민과 성능 최적화 등 피그마의 핵심 기술 역량을 구체적으로 다룹니다. - 최신 기술 트렌드인 AI를 피그마의 생태계에 어떻게 통합하고, 이를 통해 사용자 경험을 고도화하는지에 대한 기술적 접근법과 실험 사례를 제공합니다. **디자인 리더십과 창의적 소통 철학** - 'Design' 및 'Writing' 카테고리를 통해 단순한 도구 활용법 이상의 제품 서사 구축 방식과 시각적 언어의 중요성을 강조합니다. - 'Thought leadership' 섹션에서는 업계 리더들의 인사이트를 빌려 미래의 협업 환경과 디자인 도구가 나아가야 할 전략적 방향성을 제시합니다. **피그마 내부 문화와 커뮤니티 연결** - 'Inside Figma'와 'Culture' 섹션을 운영하여 피그마 팀원들이 일하는 방식, 의사결정 프로세스, 그리고 조직의 가치관을 투명하게 공개함으로써 건강한 조직 문화를 전파합니다. - 연례 컨퍼런스인 'Config'에서 발표된 주요 기술 성과와 업데이트 내용을 체계적으로 아카이빙하여 커뮤니티와 지속적인 접점을 유지합니다. 피그마가 제품을 만드는 과정에서 얻은 실전 지식을 체계적으로 습득하고 싶다면 'The Prompt'의 엔지니어링 및 디자인 섹션을 주기적으로 탐독하는 것을 추천합니다. 특히 기술적 난제를 해결한 'Inside Figma'의 사례들은 실무자들에게 실질적인 벤치마킹 자료가 될 것입니다.

에코 체임버를 (새 탭에서 열림)

제공해주신 내용은 Figma의 기술 블로그인 **'The Prompt'의 메인 페이지 카테고리와 헤더 정보**입니다. 특정 게시글의 본문 내용이 포함되어 있지 않아, 해당 블로그가 지향하는 가치와 카테고리 구성을 바탕으로 요약해 드립니다. Figma의 기술 블로그 'The Prompt'는 디자인과 엔지니어링의 경계를 허물고, 제품 개발 과정에서의 기술적 도전과 조직 문화를 공유하는 통합 지식 허브입니다. AI 도입부터 인프라 확장, 디자인 철학에 이르기까지 Figma 내부의 혁신 사례를 전문적으로 다루며 전 세계 창작자들에게 실질적인 통찰을 제공하는 것을 목표로 합니다

디자인 시스템을 위한 올바 (새 탭에서 열림)

Figma는 'Framework' 이벤트를 통해 디자인 시스템의 운영 효율성을 극대화하고 디자이너와 엔지니어 간의 협업 간극을 좁히는 혁신적인 기능들을 공개했습니다. 이번 업데이트의 핵심은 반복적인 수정 작업을 자동화하고, 디자인 자산이 실제 코드와 일치하도록 보장하는 도구를 제공하여 대규모 조직의 제품 개발 속도를 가속화하는 데 있습니다. 결과적으로 팀은 단순 운영 업무에서 벗어나 더 수준 높은 사용자 경험을 설계하는 데 집중할 수 있는 환경을 갖추게 되었습니다. **멀티 에딧(Multi-edit)을 통한 작업 효율성 극대화** - 여러 프레임에 흩어져 있는 동일한 객체를 한 번에 선택하고 수정할 수 있는 'Multi-edit' 기능이 도입되었습니다. - 특정 레이어를 선택한 후 'Select matching layers' 기능을 사용하면 캔버스 전체에서 구조가 일치하는 요소를 즉시 찾아내어 위치, 크기, 스타일을 동시에 변경할 수 있습니다. - 텍스트 레이어 수정 시에도 여러 화면의 문구나 속성을 일괄 변경할 수 있어, 반복적인 디자인 수정에 소요되는 시간을 획기적으로 단축했습니다. **디자인 시스템 고도화 및 변수(Variables) 기능 확장** - 디자인 시스템의 핵심인 변수(Variables) 기능에 타이포그래피(Typography) 지원이 추가되어 글꼴 크기, 두께, 행간 등을 변수로 관리할 수 있게 되었습니다. - 이를 통해 다국어 대응이나 반응형 디자인 적용 시 타이포그래피 속성을 한 곳에서 제어하고 유연하게 변경할 수 있습니다. - 라이브러리 분석 도구(Library Analytics)가 강화되어, 어떤 컴포넌트가 실제 프로젝트에서 어떻게 활용되고 있는지에 대한 정밀한 데이터를 제공하여 시스템 개선의 근거를 마련해 줍니다. **엔지니어링 협업을 위한 코드 커넥트(Code Connect)** - 디자인 시스템의 컴포넌트와 실제 개발에 사용되는 코드(React, iOS, Android 등)를 직접 연결하는 'Code Connect' 기능이 강화되었습니다. - 개발자는 Figma 내에서 디자인 의도가 반영된 실제 코드 스니펫을 바로 확인하고 복사할 수 있어 구현의 정확성을 높일 수 있습니다. - Dev Mode를 통해 디자이너가 정의한 변수와 속성값이 코드 레벨에서 어떻게 매핑되는지 명확히 시각화하여 핸드오프 과정의 오해를 최소화합니다. **논리적 프로토타이핑과 인터랙션 개선** - 복잡한 상태 변화를 다수의 프레임 없이도 구현할 수 있도록 변수와 조건부 로직(Conditional Logic) 사용성이 개선되었습니다. - 실제 제품의 작동 방식과 유사한 고수준의 프로토타입을 더 적은 수의 레이어로 제작할 수 있어 성능 최적화와 관리 편의성을 동시에 잡았습니다. - 프로토타이핑 내에서의 상태 관리 및 인터랙션 흐름이 직관적으로 변하면서 테스트 및 피드백 주기가 빨라졌습니다. 이번 업데이트의 핵심인 타이포그래피 변수와 멀티 에딧 기능을 즉시 실무에 도입해 보시길 권장합니다. 특히 디자인 시스템이 실제 코드와 괴리되지 않도록 'Code Connect'를 활용해 엔지니어링 팀과의 워크플로우를 재정비한다면, 제품의 일관성을 유지하면서도 배포 속도를 크게 높일 수 있을 것입니다.

컴포넌트 스프린트의 (새 탭에서 열림)

제공해주신 텍스트는 글의 제목과 카테고리 태그 정보만 포함되어 있습니다. 해당 제목(**"The anatomy of a Super Bowl ad"**)으로 알려진 Framer의 기술 블로그 사례(슈퍼볼 광고 제작기)를 바탕으로, 요청하신 형식에 맞춰 내용을 요약해 드립니다. Framer는 단 10일이라는 극도로 짧은 기간 동안 슈퍼볼 광고를 제작하며, 복잡한 대행사 프로세스 대신 제품 자체를 주인공으로 내세운 기민한 제작 방식을 채택했습니다. 이 글은 고도의 창의성과 기술적 실행력이 결합했을 때 대규모 브랜드 캠페인을 얼마나 효율적으로 완수할 수 있는지를 보여주며, 결국 최고의 광고는 제품의 본질을 가감 없이 보여주는 것이라는 결론을 제시합니다. **10일간의 고강도 스프린트와 의사결정** * 일반적으로 수개월이 소요되는 슈퍼볼 광고 제작 공정을 단 10일로 압축하여 진행했습니다. * 기획, 디자인, 엔지니어링 팀이 실시간으로 협업하며 불필요한 승인 절차를 생략하고 즉각적인 피드백 루프를 구축했습니다. * 제한된 시간 내에 최선의 결과물을 내기 위해 '제품의 핵심 기능'이라는 명확한 테마에 집중했습니다. **제품 중심의 스토리텔링 (Product-as-Hero)** * 화려한 시네마틱 영상 대신 Framer 인터페이스 자체를 시각적 요소로 활용하여 도구의 성능과 심미성을 강조했습니다. * 실제 UI/UX 요소를 광고의 메인 그래픽으로 사용함으로써, 시청자가 광고를 보는 동시에 제품의 사용 경험을 직관적으로 이해하도록 설계했습니다. * "가장 멋진 광고를 위한 가장 멋진 사이트 제작 도구"라는 메시지를 시각적으로 증명하는 데 주력했습니다. **디자인과 엔지니어링의 유기적 결합** * 디자이너가 구상한 고안을 엔지니어가 즉시 기술적으로 구현 가능성을 검토하고, Framer 도구 자체를 활용해 광고 에셋을 제작했습니다. * 브랜딩 요소가 단순한 장식이 아닌, 실제 제품의 작동 원리를 반영하도록 정교하게 설계되었습니다. * 마케팅 팀과 프로덕션 팀 간의 경계를 허물어 기술적 디테일이 마케팅 메시지에 녹아들게 했습니다. **성공적인 캠페인을 위한 실용적 제언** 대규모 프로젝트일수록 본질에 집중하는 '단순함'이 강력한 힘을 발휘합니다. 외부 대행사에 의존하기보다 내부 팀의 제품에 대한 이해도와 기술력을 믿고, 제품 그 자체를 가장 강력한 마케팅 도구로 활용하십시오. 속도감 있는 실행력은 때로 막대한 자본 투입보다 더 혁신적인 브랜딩 결과를 만들어냅니다.

Framework by Figma에 여러분을 초대합니다 (새 탭에서 열림)

Figma는 'Framework' 이벤트를 통해 디자인과 엔지니어링 간의 간극을 줄이고 전체 개발 프로세스를 가속화하기 위한 대규모 업데이트를 발표했습니다. 이번 발표의 핵심은 디자인 시스템의 효율적 관리와 고도화된 프로토타이핑 기능을 통해 팀의 생산성을 극대화하고, 디자인 데이터를 코드로 전환하는 과정을 더욱 정교하게 만드는 데 있습니다. 결과적으로 Figma는 단순한 디자인 도구를 넘어 디자인과 개발이 긴밀하게 연결되는 통합 제품 구축 플랫폼으로 진화하고 있습니다. ### 디자인 시스템의 관리 효율화와 Multi-edit 도입 * 여러 프레임에 걸쳐 있는 동일한 객체를 한 번에 수정할 수 있는 **Multi-edit** 기능을 도입하여 디자인 시스템 유지보수에 소요되는 반복 작업을 획기적으로 단축했습니다. * 디자인 시스템의 핵심 요소인 변수(Variables) 기능을 강화하여 복잡한 테마나 상태를 더욱 체계적으로 관리할 수 있도록 지원합니다. * 라이브러리 업데이트 시 변경 사항을 시각적으로 확인하고 비교할 수 있는 기능을 제공하여 시스템의 일관성을 보장합니다. ### 엔지니어링 워크플로우 및 Dev Mode 강화 * 개발자가 디자인 의도를 정확하게 파악하고 코드를 추출할 수 있도록 **Dev Mode**의 가독성과 탐색 기능을 대폭 개선했습니다. * Figma API를 통해 디자인 토큰이나 자산을 코드 베이스와 직접 동기화하는 자동화 파이프라인 구축이 더욱 용이해졌습니다. * 플러그인 생태계를 확장하여 엔지니어링 도구와의 통합성을 높이고 디자인 시스템에서 바로 코드를 생성하는 워크플로우를 지원합니다. ### 지능형 프로토타이핑과 제품 업데이트 * 프로토타이핑 영역에도 Multi-edit 기술을 적용하여, 여러 화면의 인터랙션을 개별적으로 설정할 필요 없이 일괄적으로 연결하고 수정할 수 있습니다. * 더욱 정교한 애니메이션과 상태 전환(State transitions) 효과를 추가하여 실제 완성된 제품에 가까운 사용자 경험을 미리 검증할 수 있습니다. * 전반적인 제품 성능 최적화를 통해 대규모 디자인 파일에서도 끊김 없는 줌(Zoom)과 레이어 탐색이 가능하도록 사용자 경험을 개선했습니다. ### 내부 운영 혁신과 최신 소식 * **Inside Figma** 섹션을 통해 Figma 팀이 실제로 디자인 시스템을 어떻게 운영하고 엔지니어링 협업을 실천하고 있는지에 대한 베스트 프랙티스를 공유했습니다. * 커뮤니티와 기업 사용자를 위한 새로운 요금제 옵션 및 보안 기능 업데이트 등 비즈니스 환경에 최적화된 소식들을 발표했습니다. 이번 업데이트는 특히 대규모 팀이나 디자인 시스템을 운영하는 조직에게 큰 효용을 제공합니다. 반복적인 수정 작업을 자동화하는 Multi-edit 기능을 우선적으로 업무에 도입하고, 강화된 Dev Mode를 통해 디자이너와 엔지니어 간의 소통 비용을 줄임으로써 제품 출시 속도를 가속화할 것을 권장합니다.

원활한 핸드오프를 (새 탭에서 열림)

Figma와 Jira의 통합 솔루션은 디자이너와 개발자 간의 핸드오프(Handoff) 과정을 최적화하여 협업의 병목 현상을 해결하는 데 중점을 둡니다. Figma for Jira 앱을 활용하면 디자인 파일과 개발 티켓 사이의 맥락 전환을 최소화하고, 실시간 동기화를 통해 양측의 작업 상태를 투명하게 공유할 수 있습니다. 이를 통해 팀은 명확한 가시성을 확보하고 제품 출시 속도를 비약적으로 높이는 강력한 작업 환경을 구축하게 됩니다. **Figma 내에서의 개발 맥락 파악 (Inside Figma)** * 'Dev Mode'를 통해 디자이너가 작업 중인 환경 내에서 관련 Jira 이슈의 상태(To Do, In Progress, Done 등)를 실시간으로 확인할 수 있습니다. * 디자인 구성 요소나 섹션에 직접 Jira 티켓을 연결하여, 개발자가 디자인 의도와 기술 요구사항을 별도의 문서 확인 없이 한 곳에서 파악하도록 돕습니다. * 'Dev Resources' 위젯을 활용해 디자인 요소와 연관된 코드 저장소(GitHub 등) 링크나 관련 문서를 첨부함으로써 정보 탐색 시간을 단축합니다. **Jira 기반의 효율적인 엔지니어링 (Engineering)** * Jira 이슈 페이지 내에 Figma 디자인을 실시간으로 임베드하여, 개발자가 도구를 전환하지 않고도 최신 UI 사양과 프로토타입을 즉시 검토할 수 있습니다. * 디자인 파일의 특정 레이어, 프레임, 또는 섹션만 이슈에 핀으로 고정할 수 있어, 방대한 디자인 캔버스 내에서 개발자가 구현해야 할 대상을 정확히 지정합니다. * 디자인에 수정 사항이 발생하면 Jira 이슈 내의 프리뷰도 자동으로 업데이트되어, 구버전 디자인을 보고 작업하는 실수를 방지합니다. **디자인 의도와 프로토타입 전달 (Design & Prototyping)** * 단순한 정적 이미지가 아닌 실제 동작하는 프로토타입을 Jira 이슈에서 직접 실행해 볼 수 있어, 복잡한 사용자 흐름(Flow)에 대한 이해도를 높입니다. * 애니메이션 수치, 전환 효과, 레이아웃 속성 등 기술적인 디테일을 개발자가 직접 추출할 수 있도록 하여 소통 과정에서의 정보 왜곡을 줄입니다. **미팅 및 커뮤니케이션 효율화 (Meetings)** * 스프린트 계획이나 스크럼 미팅 시 Figma 디자인과 Jira 보드를 번갈아 띄울 필요 없이, 통합된 뷰를 통해 작업 우선순위와 디자인 진행 상황을 동시에 논의합니다. * 피드백 루프가 디자인 파일 내 댓글과 Jira의 코멘트로 유기적으로 연결되어, 의사결정 과정이 파편화되지 않고 투명하게 기록됩니다. 성공적인 협업을 위해 단순히 도구를 연결하는 것에 그치지 말고, 디자인 파일 설계 단계부터 Jira 이슈 번호를 매핑하는 워크플로우를 정착시키는 것이 중요합니다. Figma for Jira 앱을 전사적으로 도입하고 Dev Mode를 적극 활용한다면, 디자인 시스템의 일관성을 유지하면서도 엔지니어링 생산성을 극대화하는 성과를 거둘 수 있을 것입니다.

프로토타이핑 문화를 조성 (새 탭에서 열림)

피그마는 Config 2023을 통해 디자인과 개발 사이의 간극을 좁히고, 팀이 제품을 구축하는 방식을 근본적으로 재정의하고자 합니다. 단순한 디자인 도구를 넘어 개발자와 디자이너가 실시간으로 소통하며 제품을 완성해 나가는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 공간인 '데브 모드(Dev Mode)'와 디자인 시스템의 유연성을 극대화하는 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 발표의 핵심입니다. ### 개발자를 위한 전용 공간, 데브 모드(Dev Mode) * **개발 중심 인터페이스:** 디자인 파일을 개발 언어로 해석해 주는 새로운 공간으로, 개발자가 디자인 시스템을 더 쉽게 이해하고 구현할 수 있도록 돕습니다. * **코드 검사 및 익스텐션:** CSS, iOS, Android 전용 코드를 제공하며, Jira나 GitHub, Storybook과 같은 기존 워크플로우 도구와 플러그인을 통해 연결할 수 있습니다. * **Figma for VS Code:** 디자인 파일을 보기 위해 브라우저를 오갈 필요 없이, 개발 환경인 VS Code 내에서 디자인을 확인하고 변경 사항을 즉시 반영할 수 있습니다. * **준비 상태 표시:** 디자이너가 특정 섹션을 "개발 준비 완료(Ready for dev)" 상태로 표시하여 개발자가 불필요한 커뮤니케이션 없이 작업을 시작할 수 있게 합니다. ### 디자인 시스템의 진화, 변수(Variables) * **디자인 토큰화:** 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 전반에 걸쳐 일관성을 유지하고 효율적으로 관리할 수 있습니다. * **모드(Modes) 기능:** 다크 모드, 라이트 모드, 혹은 모바일과 데스크톱 환경에 따른 수치 변화를 변수 세트로 묶어 클릭 한 번으로 전체 디자인 테마를 전환할 수 있습니다. * **고급 프로토타이핑과의 연동:** 변수와 논리 연산(if/else), 수학적 표현식을 결합하여 실제 제품과 유사하게 작동하는 고충실도(Hi-fi) 프로토타입을 제작할 수 있습니다. ### 코드의 논리를 담은 오토 레이아웃(Auto Layout) 업데이트 * **줄바꿈(Wrap) 지원:** 여러 요소를 가로로 배치하다가 공간이 부족하면 자동으로 다음 줄로 넘겨주는 기능이 추가되어 응답형 레이아웃 구현이 쉬워졌습니다. * **최소/최대 너비 및 높이 설정:** 요소의 크기가 특정 범위를 벗어나지 않도록 제한할 수 있어, 실제 개발 환경에서 CSS로 제어하는 방식과 동일한 설계가 가능해졌습니다. 피그마가 도입한 '데브 모드'와 '변수'는 단순한 편의 기능이 아니라, 디자인 산출물이 곧 코드로 이어지는 '디자인-코드 일원화'를 지향합니다. 팀의 생산성을 높이기 위해서는 디자이너가 변수 기능을 적극적으로 활용하여 시스템을 구축하고, 개발자는 VS Code 익스텐션을 통해 워크플로우를 통합하는 방식의 변화를 시도해 볼 것을 권장합니다.

올해 출시된 주요 기능 Top (새 탭에서 열림)

Figma는 Config 2023을 통해 디자이너와 개발자 사이의 장벽을 허물고, 제품 개발 전체 과정을 통합하는 플랫폼으로 거듭나겠다는 비전을 제시했습니다. 새롭게 도입된 '개발자 모드(Dev Mode)'와 '변수(Variables)' 기능은 디자인 의도를 실제 코드로 구현하는 과정을 획기적으로 단축하며 협업의 효율성을 극대화합니다. 이제 Figma는 단순한 그래픽 도구를 넘어 디자인과 엔지니어링이 공존하며 함께 제품을 빌드하는 공유 작업 공간으로 진화했습니다. ### 개발자를 위한 새로운 작업 환경, 개발자 모드(Dev Mode) * 디자인 파일의 속성을 CSS, iOS(SwiftUI), Android(Compose) 등 실제 개발 언어의 코드 형태로 즉시 확인하고 복사할 수 있는 전용 공간을 제공합니다. * Jira, GitHub, Storybook과 같은 주요 개발 도구와의 위젯 연동을 지원하여 디자인 사양 확인부터 티켓 관리까지 Figma 내에서 한 번에 수행할 수 있습니다. * '검사(Inspect)' 기능을 강화하여 변경된 사항을 시각적으로 비교해주며, '섹션 상태' 표시를 통해 개발 준비가 완료된 디자인을 명확하게 구분해 소통 비용을 줄여줍니다. * VS Code용 Figma 익스텐션을 통해 개발자가 에디터를 벗어나지 않고도 디자인 사양을 확인하고 실시간으로 소통할 수 있는 환경을 구축했습니다. ### 복잡한 디자인 시스템을 제어하는 변수(Variables) * 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 정의하여 디자인 토큰(Design Tokens)을 체계적으로 관리하고 대규모 프로젝트의 일관성을 유지할 수 있습니다. * '모드(Modes)' 기능을 통해 클릭 한 번으로 전체 디자인을 라이트 모드에서 다크 모드로 전환하거나, 한국어에서 영어로 다국어 대응 레이아웃을 즉시 확인할 수 있습니다. * 변수 기능을 오토 레이아웃과 결합하여 기기별 패딩이나 간격 값을 유연하게 조절함으로써 진정한 반응형 디자인 시스템 구현이 가능해졌습니다. ### 논리적 상호작용이 가능한 고급 프로토타이핑 * 조건문(If/Else)과 수식 연산을 프로토타이핑에 도입하여, 수십 개의 프레임을 복제하지 않고도 장바구니 수량 계산이나 로그인 로직 등 실제 앱과 유사한 인터랙션을 구현할 수 있습니다. * 변수를 프로토타입에 바인딩하여 사용자의 액션에 따라 UI가 동적으로 변화하는 고해상도의 테스트 환경을 제공합니다. * 인라인 미리보기 기능을 통해 수정 사항을 즉각적으로 테스트하며 프로토타입 제작 속도를 비약적으로 향상시켰습니다. ### CSS 로직을 닮은 오토 레이아웃(Auto Layout) 업데이트 * '줄바꿈(Wrap)' 기능이 추가되어 설정된 너비를 초과하는 요소들을 자동으로 다음 줄로 넘길 수 있어, 반응형 그리드와 태그 클라우드 구현이 쉬워졌습니다. * 요소의 '최소/최대 너비 및 높이(Min/Max Width & Height)'를 설정할 수 있게 되어 CSS의 레이아웃 제어 방식과 동일한 논리로 디자인을 구성할 수 있습니다. 이번 업데이트는 디자인 결과물을 실제 코드 구현 방식에 가깝게 정렬하여 개발 생산성을 높이는 데 핵심이 있습니다. 대규모 팀일수록 '변수' 기능을 활용해 디자인 시스템을 구조화하고, '개발자 모드'를 워크플로우에 적극 도입하여 디자인과 개발 간의 핸드오프(Hand-off) 과정을 최적화할 것을 권장합니다.

코드 생성이 (진짜) (새 탭에서 열림)

제시해주신 내용은 Figma의 새로운 공식 블로그이자 지식 공유 플랫폼인 **'The Prompt'**의 런칭 소식과 주요 카테고리를 소개하고 있습니다. 이를 바탕으로 해당 플랫폼의 목적과 구성 내용을 요약해 드립니다. Figma는 제품 개발의 이면과 기술적 통찰력을 공유하기 위한 새로운 편집 공간인 ‘The Prompt’를 공개했습니다. 이 플랫폼은 Figma의 엔지니어링, 디자인 철학, AI 전략 등을 깊이 있게 다루며 업계 전반에 사고 리더십(Thought Leadership)을 전파하는 것을 목표로 합니다. 단순히 정보를 전달하는 것을 넘어 Figma의 독특한 조직 문화와 제품 빌딩 노하우를 기술 생태계와 공유하려는 의지를 담고 있습니다. **제품 및 엔지니어링 심층 분석 (Inside Figma & Engineering)** * Figma 내부의 실제 제품 개발 과정과 기술적인 도전 과제를 상세히 공유합니다. * 복잡한 디자인 도구를 클라우드 환경에서 구현하기 위한 엔지니어링 아키텍처와 최적화 기법 등 전문적인 디테일을 다룹니다. **AI와 디자인의 미래 (AI & Design)** * 인공지능이 디자인 워크플로우에 어떻게 통합되고 있으며, 이것이 창의적 작업에 어떤 변화를 가져오는지 탐구합니다. * AI 기술을 실제 제품에 적용하며 얻은 교훈과 앞으로의 디자인 도구 진화 방향에 대한 관점을 제시합니다. **조직 문화와 전문 지식의 기록 (Culture & Writing)** * 제품을 만드는 사람들의 사고방식과 Figma만의 독특한 협업 문화를 기록하여 공유합니다. * 각 분야 전문가들의 통찰을 글쓰기(Writing)라는 형식을 통해 정교하게 다듬어, 단순한 기술 공유 이상의 지적 자산으로 구축합니다. **커뮤니티 연결과 트렌드 주도 (Config & Thought Leadership)** * Figma의 연례 컨퍼런스인 ‘Config’에서 논의된 핵심 주제와 최신 업데이트를 심도 있게 보도합니다. * 디자인 및 개발 업계가 나아가야 할 방향성에 대해 질문을 던지고, 업계 표준을 선도하는 리더십 있는 콘텐츠를 제공합니다. Figma가 도구를 만드는 과정을 통해 배우고 싶거나 AI 시대의 디자인/엔지니어링 트렌드를 파악하고 싶은 전문가들에게 'The Prompt'는 필수적인 학습 자원이 될 것입니다. 각 분야의 구체적인 사례 연구(Case Study)를 확인하고 싶다면 해당 카테고리의 세부 포스트를 정기적으로 팔로우하는 것을 추천합니다.

Navigating the intersection of design and business: a conversation with Airbnb’s Brian Chesky | Figma Blog (새 탭에서 열림)

Figma는 Config 2023을 통해 디자인과 개발의 경계를 허물고, 제품 개발의 전체 과정을 하나의 플랫폼으로 통합하겠다는 강력한 비전을 제시했습니다. 특히 디자이너와 엔지니어가 동일한 언어로 소통할 수 있도록 '개발자 모드(Dev Mode)'와 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 업데이트의 핵심입니다. 이를 통해 Figma는 단순한 디자인 도구를 넘어 팀이 함께 제품을 빌드하는 통합 협업 환경으로 진화했습니다. ### 개발 생산성을 높이는 '개발자 모드(Dev Mode)' * 엔지니어가 디자인 파일에서 코드를 추출하고 구현에 필요한 정보를 더 쉽게 찾을 수 있도록 돕는 전용 인터페이스를 제공합니다. * VS Code 익스텐션을 지원하여 개발자가 브라우저와 코드 에디터를 오가지 않고도 Figma의 디자인 가이드를 코드 바로 옆에서 확인할 수 있습니다. * Jira, GitHub, Storybook과 같은 도구와 플러그인을 통해 연동할 수 있어, 디자인의 변경 사항을 개발 워크플로우 내에서 실시간으로 추적하고 관리할 수 있습니다. * 디자인의 준비 상태(Ready for Dev)를 표시하는 기능을 통해 디자이너와 개발자 간의 불필요한 커뮤니케이션 비용을 줄여줍니다. ### 유연한 디자인 시스템을 위한 '변수(Variables)' * 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 토큰(Design Tokens)을 체계적으로 관리할 수 있게 되었습니다. * 하나의 디자인 레이아웃 안에서 라이트 모드와 다크 모드, 혹은 모바일과 데스크톱 환경을 즉시 전환할 수 있는 '모드(Mode)' 기능을 지원합니다. * 디자인 시스템의 재사용성을 높이고 개발 시 코드상의 변수 구조와 일치시켜 핸드오프 시의 오차를 최소화합니다. ### 고도화된 프로토타이핑과 오토 레이아웃의 진화 * 프로토타이핑에 조건부 로직(If/Else)과 수학 연산식을 도입하여, 수많은 프레임을 만들지 않고도 복잡한 인터랙션을 정교하게 구현할 수 있습니다. * 오토 레이아웃에 '줄바꿈(Wrap)' 기능을 추가하여 CSS의 Flexbox와 유사한 반응형 레이아웃을 더 직관적으로 설계할 수 있습니다. * 요소의 최소 및 최대 너비(Min/Max Width)와 높이를 설정할 수 있어, 다양한 화면 크기에 대응하는 디자인 명세가 명확해졌습니다. 이제 Figma는 단순한 시각적 산출물을 만드는 곳이 아니라 실제 코드로 이어지는 '살아있는 명세서'의 역할을 수행합니다. 디자인 시스템을 구축할 때 새롭게 도입된 '변수' 기능을 적극 활용하고, 개발자와 함께 '개발자 모드'를 테스트하며 워크플로우를 최적화해 보시길 권장합니다.

기능 비하인드: 찾 (새 탭에서 열림)

Figma의 다크 모드 도입은 단순한 색상 변경을 넘어, 수년간 쌓인 레거시 코드의 하드코딩된 색상 값을 체계적인 디자인 토큰 시스템으로 전환하는 대규모 엔지니어링 프로젝트였습니다. 이들은 수천 개의 색상 변수를 수동으로 수정하는 대신, 의미론적(Semantic) 명명 규칙과 자동화된 코드 수정 도구를 활용해 유지보수가 용이한 아키텍처를 구축했습니다. 결과적으로 Figma는 단일 테마의 제약에서 벗어나 다크 모드를 포함한 멀티 테마를 유연하게 지원할 수 있는 기술적 기반을 마련했습니다. ### 디자인 토큰 시스템 구축 - 하드코딩된 헥스(Hex) 코드 대신 의미를 담은 '디자인 토큰'을 도입했습니다. 단순한 색상값(예: `#FFFFFF`)이 아니라 역할(예: `bg-primary`)에 기반한 이름을 부여했습니다. - 토큰 구조를 '기본 값(Base)', '의미론적 값(Semantic)', '컴포넌트 특정 값(Component-specific)'의 계층으로 나누어 관리함으로써 확장성을 높였습니다. - JSON 형식을 사용하여 디자인과 엔지니어링 팀 간의 단일 진실 공급원(Single Source of Truth)을 구축하고, 이를 통해 다양한 플랫폼에 일관된 색상을 적용했습니다. ### 하드코딩된 레거시 코드의 자동화된 마이그레이션 - 코드베이스 내에 흩어져 있던 수천 개의 하드코딩된 색상 값을 찾기 위해 정규 표현식과 추적 도구를 활용했습니다. - '코드모드(Codemods)'를 제작하여 수동 수정의 위험을 줄이고, 기존의 Hex 코드를 적절한 CSS 변수(Variable)로 자동 교체했습니다. - 단순 일대일 매칭이 불가능한 경우(같은 흰색이라도 배경인지 경계선인지에 따라 토큰이 달라지는 경우)를 해결하기 위해 엔지니어가 직접 문맥을 확인하는 프로세스를 병행했습니다. ### CSS 변수 기반의 실시간 테마 전환 - 런타임에서 테마를 즉각적으로 변경하기 위해 CSS 커스텀 프로퍼티(Custom Properties)를 사용했습니다. - 최상위 루트 요소에 테마를 결정하는 클래스(예: `.theme-dark`)를 부여하고, 하위 요소들이 해당 스코프 내의 CSS 변수 값을 참조하도록 설계했습니다. - DOM 요소뿐만 아니라 HTML Canvas와 같이 CSS 변수를 직접 사용할 수 없는 복잡한 렌더링 환경에서도 테마 시스템이 연동될 수 있도록 별도의 브릿지 로직을 구현했습니다. ### 기술적 부채 해결과 향후 확장성 - 다크 모드 프로젝트를 통해 발견된 수많은 유령 색상(사용되지 않거나 중복된 색상)을 정리하여 코드의 청결도를 높였습니다. - 새롭게 구축된 시스템은 향후 '고대비 모드'나 '브랜드 테마' 등 또 다른 테마를 추가할 때 최소한의 코드 수정만으로 대응할 수 있는 구조를 갖추게 되었습니다. **실용적인 제언** Figma의 사례는 대규모 서비스에서 다크 모드를 도입할 때 단순한 스타일 추가가 아닌 **'의미론적 토큰화'**가 선행되어야 함을 보여줍니다. 초기 구축 단계에서 자동화 도구(Codemods)를 적극 활용하고, 디자인과 엔지니어링이 공통으로 사용하는 토큰 관리 체계를 만드는 것이 장기적인 유지보수 비용을 줄이는 핵심입니다.