figma·2024년 6월 25일·3분 읽기큐레이션 요약

Config 2024 결

Figma Config 2024는 AI를 중심으로 디자인에서 개발·발표까지 이어지는 작업 흐름을 확장한 업데이트를 소개한다. 주요 발표는 Figma AI, 새 UI인 UI3, 프레젠테이션 도구 Figma Slides, Dev Mode 개선이며, 반복 작업을 자동화하고 아이디어 탐색을 빠르게 하는 데 초점을 둔다. Figma는 AI가 인터페이스를 생성하는 시대에도 차별화된 제품을 만드는 핵심은 디자인이라고 강조한다. ## Figma AI: 아이디어 탐색과 반복 작업 자동화 - **Visual Search** - 스크린샷, 선택한 프레임, 이미지, 연필로 그린 스케치를 입력해 유사한 디자인을 검색할 수 있다. - 아이콘부터 전체 디자인 파일까지 팀이 접근할 수 있는 파일 안에서 비슷하거나 동일한 디자인을 찾는다. - 개선된 Asset Search는 파일명이나 에셋 이름과 검색어가 정확히 일치하지 않아도 문맥을 이해해 관련 에셋을 찾아준다. - **반복적인 디자인 작업 자동화** - 현실적인 이미지와 문구를 생성한다. - 기존 문구를 변형하거나 다시 작성하고 번역한다. - 화면 간 프로토타입 연결을 자동으로 구성한다. - 여러 레이어의 이름을 한 번에 의미 있는 이름으로 변경한다. - 디자이너가 레이어 정리나 기본 콘텐츠 작성보다 창의적인 작업에 집중하도록 돕는다. - **Make Designs** - 새 Actions 패널에서 텍스트 프롬프트로 UI 레이아웃과 컴포넌트 초안을 생성한다. - 빈 캔버스에서 시작하기 어려울 때 여러 디자인 방향을 빠르게 탐색할 수 있다. - 생성 결과는 완성품이라기보다 초기 아이디어와 작업 출발점으로 활용하는 방식이다. - **AI 기능의 개발 방향** - Figma는 단순히 AI 유행을 따르기보다 실제 사용자 요구를 기준으로 기능을 설계한다고 설명한다. - 범용 대규모 언어 모델(LLM)을 기반으로 기능을 구축하되, 디자이너의 작업 맥락에 맞게 활용하는 데 초점을 둔다. ## UI3: 새롭게 설계된 Figma 인터페이스 - 기존 Figma 인터페이스를 재설계한 UI3를 공개한다. - AI 기능과 Actions 패널을 포함해 주요 작업을 더 쉽게 찾고 실행할 수 있도록 작업 환경을 개편한다. - UI3는 Figma AI와 함께 제한적 베타로 제공되며 단계적으로 확대된다. ## Figma Slides: 디자인과 프레젠테이션의 결합 - Figma Slides를 통해 슬라이드를 만들고, 협업하고, 발표할 수 있는 기능을 추가한다. - 디자인 도구에서 사용하던 협업 방식과 시각적 편집 경험을 프레젠테이션 제작으로 확장한다. - 제품 아이디어, 디자인 결과물, 프로젝트 진행 상황을 별도 도구로 옮기지 않고 공유·발표하는 흐름을 지원한다. ## Dev Mode: 디자인 완료에서 개발 완료까지 - Dev Mode를 크게 업데이트해 디자인과 개발 사이의 전환 과정을 개선한다. - 디자이너가 전달한 결과물을 개발자가 실제 구현으로 옮기는 과정에서 필요한 정보를 더 쉽게 확인하도록 지원한다. - 이번 업데이트는 단순히 “개발 준비 완료” 상태를 표시하는 것을 넘어, 개발 작업이 완료될 때까지의 협업 흐름을 강화하는 방향이다. ## Auto Layout·UI Kit·프로토타입 등 사용성 개선 - Auto Layout을 비롯해 기존 Figma 핵심 기능의 사용성을 개선한다. - UI Kit 활용 경험을 다듬어 더 빠르게 디자인 작업을 시작할 수 있도록 한다. - 프로토타입 뷰어를 개선해 결과물을 확인하고 공유하는 과정을 편리하게 만든다. - Figma AI뿐 아니라 자주 사용하는 기능 전반을 개선해 일상적인 작업 흐름의 마찰을 줄인다. ## 베타 제공 방식 - Figma AI와 UI3는 당시 제한적 베타로 제공된다. - Figma 화면 하단의 **“?”** 메뉴에서 **“Join UI3 + AI waitlist”**를 선택해 대기 목록에 등록할 수 있다. - 기능은 한 번에 전체 사용자에게 공개되지 않고 점진적으로 확대된다. 실무에서는 Visual Search로 기존 사내 디자인 자산을 재활용하고, Make Designs와 자동 프로토타이핑으로 초기 아이디어를 빠르게 검증하는 방식이 유용하다. 다만 AI 생성 결과를 그대로 사용하기보다 디자인 시스템, 접근성, 브랜드 기준에 맞춰 검토·수정하는 과정이 필요하다.

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

dev-modeAI디자인 시스템대규모 언어 모델+3

figma·2024년 6월 2일·3분 읽기큐레이션 요약

초안 작동 방식 업데이트 | Figma

Figma는 Starter·Professional 플랜의 Drafts를 팀과 분리된 개인 공간에서 팀 내부의 전용 Drafts 공간으로 이전한다. 이를 통해 파일 소유권과 권한을 명확히 하고, 팀 플랜 기능과 향후 결제·라이선스 관리 개선의 기반을 마련하려는 것이다. Drafts는 계속 비공개로 유지되며 무료로 생성·편집할 수 있지만, 팀으로 이동할 때 일부 협업자의 편집 권한이 변경될 수 있다. ## Drafts 이전의 배경 - 기존 Drafts는 팀에 속하지 않아 파일 소유권과 팀 연계가 불명확했다. - Starter·Professional과 Organization·Enterprise의 Drafts 구조가 달라 제품 개선이 복잡했다. - 팀과 연결되지 않은 Drafts에서는 고급 프로토타이핑, 비밀번호 보호, Dev Mode 같은 유료 기능을 사용할 수 없었다. - 개인 작업과 업무용 작업이 분리되지 않아 파일 권한, 보안, 지식재산권 관리에 문제가 생길 가능성이 있었다. ## Drafts의 새로운 구조 - 모든 Drafts는 이제 하나의 팀에 연결되어야 한다. - 사용자는 자신이 속한 각 팀 안에 개인 전용 Drafts 공간을 갖는다. - Professional 팀의 Drafts에서는 편집자에게 Professional 기능이 제공된다. - Starter 팀이 하나뿐인 사용자는 Drafts가 해당 팀의 새 Drafts 공간으로 자동 이전될 수 있다. - 팀 목록은 새 드롭다운 메뉴를 통해 확인하고 선택할 수 있다. ## 협업 권한과 요금 변화 - 팀으로 Draft를 옮겨도 파일은 기본적으로 계속 비공개다. - Draft의 기존 편집자가 해당 팀의 정식 멤버가 아니면, 예상치 못한 유료 좌석 발생을 막기 위해 자동으로 뷰어로 변경된다. - 필요한 경우 사용자 또는 관리자가 다시 편집 권한을 부여해야 한다. - Starter 팀에서는 무제한 뷰어를 초대할 수 있고, 최대 3개의 협업 파일에는 무제한 편집자를 둘 수 있다. - 개인 Drafts를 팀에 소속시키더라도 자신의 Draft를 계속 무료로 생성·편집할 수 있다. ## Drafts를 팀으로 이동하는 방법 - “Drafts to move” 공간으로 이동하면 원하는 팀의 Drafts 공간을 선택해 파일을 옮길 수 있다. - 특정 팀과 관련 없는 개인 작업은 무료 Starter 팀을 만든 뒤 그 팀으로 이동할 수 있다. - 이전 작업이 진행 중인 동안에도 기존 협업자와 Draft를 계속 편집할 수 있다. - 다만 새로운 협업자를 초대하려면 먼저 파일을 팀으로 이동해야 한다. - 현재 고정된 마감일은 없으며, 향후 이동하지 않은 Drafts는 무료 Starter 플랜으로 이전될 예정이다. 이전 전에는 별도 안내가 제공된다. ## 앞으로의 개선 방향 - 사용자가 유료 편집자 좌석으로 전환되는 시점을 더 명확히 안내할 예정이다. - 프리랜서의 프로젝트 인계와 여러 팀에 속한 사용자의 업무를 지원할 계획이다. - 관리자 대시보드와 게스트 관리 등 라이선스 관리 기능을 개선할 예정이다. - Figma의 결제 관련 사용자 경험도 전반적으로 재설계하고 있다. ## 실용적인 대응 현재 Drafts를 검토해 업무용·개인용 파일을 적절한 팀으로 분류하고, 이동 후 편집 권한이 필요한 협업자가 해당 팀의 정식 멤버인지 확인하는 것이 좋다. 어느 팀에도 속하지 않는 개인 작업은 별도의 무료 Starter 팀으로 분리하면 관리와 권한 설정이 수월하다.

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

dev-modeFigma프로토타이핑access-control+2

figma·2024년 5월 21일·3분 읽기큐레이션 요약

Code Connect의 잠재력 활용

디자인과 개발의 간극을 줄이려면 두 팀이 공유할 수 있는 언어와 단일한 작업 흐름이 필요하다. Figma의 Code Connect는 디자인 시스템의 컴포넌트 구현 정보와 문서를 Dev Mode에서 직접 제공해 개발자가 맥락을 바꾸지 않고 올바른 코드를 사용할 수 있도록 돕는다. 패널 참가자들은 작은 컴포넌트부터 시작해 점진적으로 도입하고, 디자이너와 개발자의 전문성을 서로 존중해야 한다고 강조한다. ## 디자인과 개발이 함께 쓰는 언어 만들기 - 디자이너와 개발자는 컴포넌트 이름, 속성, 구현 방식에 대해 서로 다른 용어와 기대를 가질 수 있다. - 이 차이는 다음과 같은 문제로 이어진다. - 일관되지 않은 네이밍 - 디자인과 코드의 속성 불일치 - 팀 간 요구사항과 구현 결과의 불일치 - 디자인 시스템은 공통 컴포넌트, 패턴, 용어를 정의해 두 분야를 연결하는 “제3의 언어” 역할을 한다. - 단순히 규칙을 문서화하는 것뿐 아니라, 구성원이 쉽게 찾고 실제로 적용할 수 있게 만드는 것도 중요하다. ## 단일한 기준과 개발자 워크플로 연결 - Bumble의 Raul Menezes는 디자인과 코드에서 서로 다른 기준 문서가 사용되는 것이 일관성 저하의 주요 원인이라고 설명한다. - 같은 UI 패턴을 반복해서 직접 구현하면 다음 문제가 발생한다. - 중복 코드 증가 - 커스텀 구현 확산 - 유지보수 어려움 - 디자인 시스템과 실제 제품 간의 불일치 - 디자이너는 디자인 시스템 문서를 참고하지만, 개발자는 별도의 코드 저장소나 문서를 기준으로 삼는 경우가 많다. - Code Connect는 디자인 시스템의 코드 예시와 구현 정보를 Dev Mode 안에서 제공해 개발자가 기존 코드 편집 및 개발 흐름에서 바로 참고하도록 설계됐다. ## 도입 장벽을 낮추고 작은 규모로 시작하기 - 디자인 시스템을 구축했다고 해서 자동으로 팀 전체가 사용하는 것은 아니다. 개발자가 기존 작업 방식을 크게 바꿔야 한다면 adoption이 느려질 수 있다. - 기존에는 개발자가 디자인 구현 방식을 확인하기 위해 별도의 디자인 시스템 웹사이트로 이동해야 했다. - Code Connect를 사용하면 Dev Mode에서 특정 디자인이 코드로 구현되어 있는지, 어떤 방식으로 구현하는지 확인할 수 있어 컨텍스트 전환을 줄인다. - 처음부터 모든 컴포넌트를 연결하기보다 영향도가 높고 구조가 단순한 컴포넌트부터 시작하는 것이 권장된다. - 예: 토글 같은 작은 컴포넌트 - 디자인 속성과 코드 속성을 어떻게 매핑하는지 먼저 검증 - 팀이 도구의 효과와 운영 방식을 익힌 뒤 범위 확대 - Code Connect는 완성된 최종 해법이라기보다 더 큰 디자인-코드 통합을 위한 첫 단계로 제시된다. ## 서로의 전문성 존중하기 - 디자인과 개발의 간극을 줄인다는 것은 한쪽의 방식을 다른 쪽에 강요하는 것이 아니다. - 디자이너는 사용자 경험, 시각적 일관성, 패턴 설계에 강점을 가진다. - 개발자는 컴포넌트 구조, 재사용성, 기술적 제약, 유지보수성에 전문성이 있다. - 효과적인 디자인 시스템 운영을 위해서는 두 팀이 각자의 전문성을 인정하고, 공통 언어와 도구를 통해 협업해야 한다. - Code Connect는 디자인 시스템의 의도와 실제 코드 구현을 연결해 양쪽의 지식을 공유하는 매개 역할을 한다. ## 실용적인 적용 방법 - 디자인 시스템에서 자주 사용되고 영향도가 큰 컴포넌트를 우선 선정한다. - 디자인의 컴포넌트 속성과 코드의 props·API가 어떻게 대응하는지 정의한다. - Dev Mode에서 개발자가 별도 문서 검색 없이 구현 예시를 확인할 수 있도록 연결한다. - 초기 도입 후 다음을 점검한다. - 개발자가 실제로 재사용 컴포넌트를 선택하는지 - 중복·커스텀 구현이 줄었는지 - 디자인과 코드의 명명 및 속성이 일치하는지 - 검증된 운영 방식을 바탕으로 점차 복잡한 컴포넌트와 더 넓은 제품 영역으로 확대하는 것이 바람직하다.

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

dev-modeFigma디자인 시스템design-to-code+2

figma·2024년 2월 13일·3분 읽기큐레이션 요약

원활한 핸드오프를

핸드오프는 디자인이 끝나는 한순간의 전달이 아니라, 작업 중인 디자인과 맥락·커뮤니케이션이 지속적으로 오가는 과정이다. 원활한 협업을 위해서는 개발자가 필요한 정보를 명확히 확인할 수 있도록 주석을 정리하고, 디자인·개발 간 공통 언어를 만들며, 파일 구조를 체계적으로 정리해야 한다. 특히 “Ready for dev”가 실제 구현 가능한 상태를 의미하도록 팀의 기준과 작업 방식을 맞추는 것이 중요하다. ## 주석과 콜아웃을 간결하고 명확하게 정리하기 - 주석은 디자인 결정의 의도와 개발자가 놓치기 쉬운 세부 사항을 전달하는 수단이다. - 모든 간격이나 색상을 반복해서 설명하기보다, 이미 변수나 스타일로 정의된 정보는 생략하고 다음과 같은 내용을 우선적으로 표시한다. - 새로 사용하는 컴포넌트 - 프로토타입만으로는 명확하지 않은 인터랙션 - 플랫폼별로 다르게 보여야 하는 요소 - 특정 레이어의 속성, 크기, 동작 방식 - 개발자와 먼저 어떤 정보가 유용한지 합의하면 불필요한 주석을 줄일 수 있다. - Figma의 annotations와 Dev Mode를 활용하면 스펙, 측정값, 설명을 최종 디자인에 직접 고정할 수 있다. - 주석은 디자이너와 개발자 간 대화를 대체하는 것이 아니라, 대화가 필요한 지점을 명확하게 해 커뮤니케이션을 개선한다. ## 디자인과 개발의 공통 언어 만들기 - 디자인과 개발은 서로 다른 분야이므로 같은 용어가 다른 의미로 해석될 수 있다. - 예를 들어 디자이너가 “toggle”이라고 했을 때 개발자가 “switch”를 떠올릴 수 있다. - 프로젝트 초기에 컴포넌트와 속성의 명칭을 합의하면 이후 구현 논의에서 불필요한 혼선을 줄일 수 있다. - 색상, 폰트, 간격처럼 기초적인 디자인 요소는 변수와 스타일로 관리해 디자인과 코드가 동일한 기준을 사용하도록 한다. - 개발팀에 이미 네이밍 규칙이 있다면 디자인 시스템에도 이를 반영하는 것이 좋다. - 예를 들어 `bg-primary-active`, `body text`처럼 공유된 명칭을 사용하면 특정 색상의 헥스 코드나 폰트 세부 정보를 매번 설명하지 않아도 된다. - 디자인 시스템의 색상 휠과 같은 도구를 활용하면 색조와 명도를 일관되게 선택하고 적용할 수 있다. ## 파일과 캔버스를 라벨로 정리하기 - Figma의 무한 캔버스는 아이디어를 자유롭게 펼치기 좋지만, 개발자가 처음 파일을 열었을 때 필요한 화면을 찾기 어렵게 만들 수 있다. - 브레인스토밍과 반복 작업 단계에서는 파일이 다소 복잡해도 괜찮지만, 개발에 넘길 시점에는 구조를 정리해야 한다. - 관련 디자인을 섹션으로 묶어 캔버스 내 탐색 범위를 좁힌다. - 구현이 준비된 섹션이나 프레임에는 “Ready for dev” 상태를 표시해 개발자가 우선 확인할 대상을 알 수 있게 한다. - 팀 차원에서 동일한 파일 템플릿을 사용하면 매번 구조를 새로 파악해야 하는 부담과 컨텍스트 전환을 줄일 수 있다. 실무에서는 주석을 많이 다는 것보다 필요한 정보만 남기고, 변수·스타일·공통 명칭을 디자인 시스템에 정착시키는 것이 효과적이다. 또한 개발 전달 전에는 파일을 정리하고 구현 범위를 명확히 표시해 “Ready for dev”가 팀 내에서 실제로 신뢰할 수 있는 상태가 되도록 관리하는 것이 좋다.

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

dev-modeFigma디자인 시스템디자인 토큰+3

figma·2024년 1월 30일·3분 읽기큐레이션 요약

Dev Mode에 대해 알아

Figma는 디자이너와 개발자가 하나의 파일과 협업 공간에서 더 효율적으로 제품을 만들 수 있도록 Dev Mode를 개발했고, 2024년 1월 베타를 종료했습니다. Dev Mode는 개발자에게 필요한 정보와 도구를 별도 워크스페이스로 제공하면서도 디자인 맥락과 협업은 유지하는 것이 핵심입니다. Figma는 사용자 피드백을 바탕으로 주석, 변경점 비교 등 핸드오프와 구현을 지원하는 기능을 강화했습니다. ## 개발자 중심의 작업 공간이 필요한 이유 - 개발자는 Figma 주간 활성 사용자의 약 3분의 1을 차지했습니다. - 하지만 기존 Figma는 디자인 작업에 최적화되어 있어 개발자의 워크플로, 도구 체계, 선호 사항을 충분히 지원하지 못했습니다. - Figma는 프런트엔드 개발자, 디자인 시스템 엔지니어, 콘텐츠 레이아웃 및 에셋을 다루는 개발자 등 다양한 역할을 고려해 개발자 전용 경험을 만들고자 했습니다. - 핵심 방향은 개발자가 디자인 모드의 모든 상호작용을 학습하지 않아도 되도록, 개발자에게 필요한 방식으로 Figma를 맞추는 것이었습니다. ## Visly 인수와 개발자 직관 확보 - Figma는 2021년 React UI 컴포넌트 개발 도구를 만들던 Visly 팀을 인수했습니다. - 8명의 디자이너와 엔지니어로 구성된 Visly 팀은 개발자 도구에 대한 실무 경험과 연구 결과를 보유하고 있었습니다. - Figma는 개발자와 대화하는 것만으로는 부족하며, 실제 개발 환경에 몰입해 얻는 ‘개발자 직관’이 필요하다고 판단했습니다. - Visly 팀은 개발자가 Figma를 사용하는 실제 방식과 다양한 개발 환경에 대한 관점을 제공했습니다. ## 디자인과 개발을 연결하는 통합 모드 - Dev Mode의 형태를 결정하는 과정에서 디자인 파일과 개발 파일을 완전히 분리할지, 하나로 통합할지 오랜 기간 검토했습니다. - 최종적으로 Dev Mode를 Figma 안의 별도 공간으로 구현했습니다. - 개발자는 개발에 최적화된 인터페이스를 사용하면서도 디자인 파일, 변경사항, 디자이너의 의도 같은 중요한 맥락을 그대로 확인할 수 있습니다. - 별도 도구나 파일로 전환하지 않고 디자인 공간과 개발 공간을 오갈 수 있다는 점이 핵심입니다. ## 오픈 베타와 사용자 피드백 - Dev Mode는 Config 2023에서 오픈 베타로 공개되었습니다. - 베타 기간 동안 고객 요청을 적극적으로 수집했고, 처음 두 달 동안 가장 많이 요청된 업데이트와 수정 사항 200개 이상을 배포했습니다. - 사용자 피드백은 Dev Mode의 기능 우선순위와 제품 결정에 직접 반영되었습니다. - 이후 Dev Mode는 베타를 종료하고 정식 제품 단계로 이동했습니다. ## 디자인 의도를 명확히 전달하는 주석 - 기존에는 디자이너가 개발자에게 필요한 치수와 설명을 수동으로 만들고 디자인을 별도로 정리해야 했습니다. - Dev Mode의 주석 기능은 디자인에 직접 연결된 설명, 사양, 측정값을 제공합니다. - 디자인이 변경되면 주석도 실시간으로 업데이트되어 최신 상태를 유지할 수 있습니다. - 캔버스를 복잡하게 만들지 않으면서 중요한 세부사항을 강조할 수 있습니다. - 플러그인을 이용해 주석을 자동화하거나 사용자 지정할 수 있습니다. - 클릭하고 드래그하는 방식으로 요소 간 거리를 측정할 수 있습니다. ## 개발 준비 상태와 변경점 비교 - 디자이너는 섹션을 “개발 준비 완료(ready for development)”로 표시하고 별도의 페이지나 파일 없이 개발자에게 전달할 수 있습니다. - 변경점 비교(diff) 기능을 사용하면 서로 다른 버전의 프레임을 비교할 수 있습니다. - 이를 통해 디자인 변경 사항을 확인하고, 개발자가 최신 디자인을 기준으로 작업하도록 지원합니다. - 목적은 디자인 핸드오프 과정에서 누락되는 설명이나 변경사항을 줄이고 구현 정확도를 높이는 것입니다. Dev Mode를 효과적으로 활용하려면 디자인과 개발을 별도 도구로 분리하기보다, 디자인 파일 안에서 주석·측정값·준비 상태·변경 이력을 일관되게 관리하는 것이 좋습니다. 특히 개발 전달 전에 “개발 준비 완료” 상태와 변경점을 명확히 표시하면 커뮤니케이션 비용을 줄일 수 있습니다.

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

dev-modeFigma디자인 시스템React+3

figma·2024년 1월 30일·3분 읽기큐레이션 요약

개발 모드 어노테

Figma의 Dev Mode 주석 기능은 디자이너와 개발자 사이에 흩어진 요구사항과 설계 의도를 하나의 공간에 모으기 위해 만들어졌다. 기존 주석은 작성에 시간이 많이 들고 디자인 변경에 따라 쉽게 낡으며 캔버스를 복잡하게 만든다는 문제가 있었다. Figma는 주석을 실제 디자인 속성·측정값·변수·컴포넌트와 연결하고, 캔버스 바깥에서 자동으로 배치해 최신 상태와 가독성을 함께 확보하려 했다. ## 디자이너와 개발자의 서로 다른 요구 - 디자이너는 시각적 결과만으로 표현하기 어려운 정보를 전달해야 한다. - 접근성 속성 - 인터랙션의 세부 동작 - 특정 디자인 결정을 내린 의도 - 개발자에게 디자인 파일은 정보가 지나치게 많아 실제 구현해야 할 부분을 찾기 어려울 수 있다. - 디자인 공유는 전체 파일을 전달하는 것과 다르며, 개발자가 집중해야 할 영역과 요구사항을 선별해 주는 과정이 필요하다. - Figma는 이러한 문제를 해결하기 위해 Dev Mode 안에 개발자용 사양을 큐레이션하는 전용 공간을 마련했다. - 디자이너도 Dev Mode에서 주석을 작성함으로써 개발자가 실제로 보게 될 화면과 맥락을 확인할 수 있고, 작업이 끝난 뒤 Dev Mode 링크를 공유할 수 있다. ## 기존 수동 주석의 한계 - 디자이너는 텍스트, 화살표, 치수선, 콜아웃 등을 직접 배치해야 하므로 주석 작성에 많은 시간이 든다. - 디자인이 변경되면 기존 주석이 수정되지 않아 실제 디자인과 설명 사이에 불일치가 생긴다. - 디자인 파일에 주석을 추가하려면 프레임을 옮기거나 주변 공간을 확보해야 한다. - 주석이 많아질수록 캔버스가 복잡해지고, 개발자가 필요한 정보를 찾기 어려워진다. - 작업이 완전히 확정된 뒤 “개발 준비 완료” 상태를 표시하는 방식에는 적합하지만, 지속적으로 변경되는 제품 개발 과정에는 한계가 있다. ## 디자인 속성과 연결되는 동적 주석 - Figma는 주석을 단순한 텍스트가 아니라 디자인의 실제 속성에 연결하는 방식을 고민했다. - 디자인 변경 시 연결된 주석과 치수선도 함께 갱신되도록 하면 디자이너가 정보를 반복해서 입력할 필요가 줄어든다. - 개발자는 디자이너가 계속 수정 중인 상황에서도 최신 디자인에 기반한 사양을 확인할 수 있다. - 디자인 시스템의 변수와 컴포넌트를 주석에서 직접 참조하면, 일반 텍스트보다 오류 가능성이 낮아진다. - 주석의 정보가 실제 디자인 요소 및 코드베이스와 가까워질수록 설계 사양과 구현 결과의 정합성이 높아진다. ## 캔버스를 어지럽히지 않는 위치 지정 - 기존 방식에서는 주석을 표시할 공간을 만들기 위해 프레임을 계속 재배치해야 했다. - Figma는 주석을 캔버스에 직접 차지시키지 않으면서도 개발자에게 충분히 잘 보이게 하는 방식을 탐색했다. - 최종 방향 중 하나는 주석을 자동으로 배치하고 표시하는 것이었다. - 자동 배치는 디자이너의 수동 정리 작업을 줄이고 개발자에게 더 깔끔한 화면을 제공할 수 있다. - 다만 확대·축소, 이동, 크기 조절, 최소화, 선택, 마우스 오버 등 다양한 상호작용을 고려해야 하므로 여러 프로토타입과 반복적인 조정이 필요했다. - 엔지니어링 팀은 주석 표시 로직을 조정해 다양한 화면 상태에서도 주석이 적절히 보이도록 하는 데 집중했다. ## 실용적인 시사점 Dev Mode의 주석은 디자인이 끝난 뒤 설명을 덧붙이는 문서화 도구라기보다, 변경 중인 디자인과 구현 요구사항을 지속적으로 연결하는 협업 기능에 가깝다. 주석을 작성할 때는 단순한 설명보다 접근성, 상태 변화, 인터랙션, 디자인 토큰처럼 실제 구현에 필요한 정보를 디자인 요소와 연결해 기록하는 것이 효과적이다.

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

dev-modeFigma디자인 시스템접근성+2

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

개발 모드의 향후 계획

Figma는 Dev Mode 무료 베타 종료를 앞두고 주석, 변경 사항 비교 개선, 플러그인, Jira·VS Code 연동 기능을 공개했다. 이를 통해 디자이너와 개발자 간 핸드오프에 필요한 맥락을 강화하고, 조직별 기술 스택과 디자인 시스템에 맞춘 개발 워크플로를 지원한다. Dev Mode는 2024년 1월 31일부터 무료 베타를 종료하고 유료 좌석이 필요해진다. ## 디자인과 연결되는 주석 기능 - 디자이너가 디자인 레이어에 설명, 속성, 사양, 측정값을 직접 추가할 수 있다. - 클릭과 드래그만으로 치수와 간격을 표시해 개발자에게 구체적인 구현 정보를 전달한다. - 주석이 특정 레이어에 연결되므로 디자인이 변경되면 속성이나 측정값도 함께 업데이트된다. - 확대·축소 수준에 따라 주석이 자동으로 표시되거나 숨겨져 캔버스를 복잡하게 만들지 않는다. - 플러그인 API를 이용하면 여러 레이어에 주석을 일괄 생성하고 관리할 수 있다. ## 시각적·코드 기반 변경 사항 비교 - Compare Changes 기능이 개편되어 디자인 변경 사항을 시각적 차이와 코드 차이로 모두 확인할 수 있다. - 주석 기능과 결합해 어떤 디자인 요소가 바뀌었고 구현에 어떤 영향을 주는지 파악하기 쉬워졌다. - Figma for Jira 앱을 사용하면 Jira 이슈에 디자인 맥락을 삽입할 수 있다. - 디자인이 변경될 때 Jira에서 알림을 받아 핸드오프 과정에서 업데이트를 놓치지 않도록 지원한다. ## 조직별 코드 생성과 플러그인 - 조직마다 다른 개발 환경에 맞춰 HTML, React, Tailwind, Bootstrap 등 다양한 형식의 코드를 생성할 수 있다. - 디자인 시스템 컴포넌트와 실제 코드베이스의 컴포넌트 연결 여부를 확인하는 플러그인을 만들 수 있다. - 플러그인에 내부 API 안내, 디자인 시스템 문서 링크, 사용 가능한 컴포넌트 정보 등을 포함할 수 있다. - Enterprise 관리자는 특정 플러그인을 조직 전체에 고정하고 Dev Mode에서 기본 실행되도록 설정할 수 있다. - Razorpay는 자체 Dev Mode 플러그인인 RazorSharp를 구축해 디자인에 대응하는 코드를 자동 생성했다. ## Figma for VS Code 개선 - VS Code 안에서 Figma 디자인을 탐색하고 검사할 수 있도록 확장 기능의 탐색성과 검색성이 개선됐다. - 여러 페이지와 무한 캔버스를 직접 이동하는 대신 프레임을 그리드 형태로 선택할 수 있다. - Focus View를 통해 개별 프레임을 집중해서 확인할 수 있다. - VS Code를 떠나지 않고 Figma 플러그인을 실행할 수 있어, 사내 도구나 코드 생성 플러그인을 개발 환경에서 바로 사용할 수 있다. ## Dev Mode 유료 전환 - Dev Mode는 2024년 1월 31일 무료 베타에서 정식 서비스로 전환된다. - 이후 사용하려면 플랜과 좌석 유형에 따라 유료 Dev Mode 좌석이 필요하다. - 무료 베타 기간 동안 사용자 피드백을 반영해 200개 이상의 기능과 수정 사항이 추가됐다. 조직은 디자인 시스템과 실제 코드베이스의 연결이 중요하다면 주석과 플러그인을 우선 도입하고, 개발자가 VS Code 중심으로 작업한다면 Figma for VS Code와 사내 플러그인 연동을 검토하는 것이 효과적이다. 유료 전환 전 팀별 좌석과 플러그인 운영 정책도 함께 정하는 것이 좋다.

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

dev-modeFigma디자인 시스템plugins+4

figma·2023년 12월 17일·2분 읽기큐레이션 요약

피그마와 어도비,

Figma와 Adobe는 15개월간의 규제 심사 끝에 인수합병을 중단하기로 공동 결정했다. 양사는 제품과 사업, 시장의 차이를 규제 당국에 설명했지만 승인 가능성이 없다고 판단했다. Figma는 독립 기업으로 남아 AI와 협업 기능을 강화하고, 향후 Adobe와는 사용자에게 도움이 되는 방식으로 협력할 계획이다. ## 인수합병 중단과 규제 승인 불확실성 - Figma와 Adobe는 15개월 동안 전 세계 규제 당국의 심사를 받았다. - 양사는 두 기업의 사업·제품·시장 사이에 차이가 있다는 점을 수천 시간에 걸쳐 설명했다. - 그러나 제안된 인수의 규제 승인을 받을 현실적인 경로가 없다고 판단해 거래를 종료했다. - 인수합병은 양사의 사용자 커뮤니티에 더 큰 가치를 제공하려는 목적에서 시작됐지만, 최종적으로 실현되지 못했다. ## 독립 기업으로서의 Figma - Figma는 Adobe에 인수되지 않고 독립적인 기업으로 계속 운영된다. - 인수 심사 기간의 불확실성 속에서도 제품 개발과 조직 확장을 지속했다. - 향후 Adobe와 경쟁만 하는 것이 아니라 사용자에게 도움이 되는 협력 기회를 모색할 예정이다. - 영국과 아시아에 새로운 거점을 열고, 500명 이상의 직원을 추가했다. ## 지난 15개월간의 제품 발전 - **FigJam AI 기능**을 출시해 시각적 협업과 아이디어 구상에 AI를 활용할 수 있도록 했다. - **Dev Mode**를 도입해 개발자가 디자인 파일에서 필요한 정보와 도구에 더 쉽게 접근하도록 개선했다. - **Variables**와 **Advanced Prototyping**을 추가해 디자인 시스템과 프로토타이핑 기능을 확장했다. - AI 스타트업 **Diagram**을 인수해 디자인 과정에서 AI가 담당할 수 있는 영역을 넓혔다. - Config 2023 행사를 통해 디자인과 개발이 하나의 흐름으로 연결되는 제품 방향을 제시했다. ## Figma의 장기 비전 - 창업 당시의 목표는 “상상과 현실 사이의 간극을 없애는 것”이었다. - 디지털 경제의 확대와 AI 기술의 발전으로 이 목표가 더욱 중요하고 실현 가능해졌다고 설명한다. - Figma는 누구나 하나의 멀티플레이어 캔버스에서 아이디어 구상부터 디자인, 개발, 제품 출시까지 진행할 수 있도록 만드는 데 집중할 예정이다. - 디자인 도구를 넘어 디지털 제품 제작 전 과정을 지원하는 플랫폼으로 발전하려는 방향이다. 이번 결정은 대형 인수합병보다 Figma의 독립성과 제품 혁신을 유지하는 결과로 이어졌다. 사용자 입장에서는 Figma가 AI, 개발자 도구, 협업 기능을 중심으로 계속 확장되는지 지켜보는 것이 중요하다.

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

dev-modeFigmaAI프로토타이핑+4

figma·2023년 12월 6일·3분 읽기큐레이션 요약

올해 출시된 주요 기능 Top

2023년 Figma는 디자인에서 개발까지 팀이 함께 작업하기 쉽게 만드는 기능을 대거 출시했다. 이 글은 Dev Mode, 변수, 고급 프로토타이핑 같은 대형 기능뿐 아니라 폰트 미리보기와 컴포넌트 탐색처럼 작업 흐름을 개선한 세부 업데이트까지, 올해의 대표적인 10개 기능을 소개한다. 기능의 순위를 매기기보다 제품 개발 단계별로 각 업데이트가 제공하는 정밀함과 생산성 향상에 초점을 둔다. ## 2023년 Figma 업데이트의 방향 - Config 2023에서 다음과 같은 주요 기능을 공개했다. - 개발자를 위한 새로운 작업 공간인 **Dev Mode** - 디자인 시스템과 값을 관리하는 **Variables** - **고급 프로토타이핑** 기능 - 디자인에서 구현으로 넘어가는 과정의 편의성을 높이는 다양한 품질 개선 - 연말까지 약 200개 이상의 기능과 업데이트가 출시되었으며, 최신 **Little Big Updates**에서도 42개의 개선 사항을 추가로 선보였다. - Figma는 눈에 띄는 대형 기능뿐 아니라 버그 수정과 사용성 개선도 제품 개발 과정에서 중요한 업데이트로 평가한다. ## 캔버스에서 바로 확인하는 폰트 미리보기 - 폰트 선택기에서 실제로 폰트를 적용하지 않아도 캔버스 위에 글꼴 모양을 미리 볼 수 있다. - 사용자는 폰트 목록 위에 마우스를 올리는 것만으로 텍스트가 각 서체에서 어떻게 보이는지 확인할 수 있다. - 기존처럼 폰트를 하나씩 선택하고 되돌리는 과정을 반복하지 않아도 되므로 적절한 서체를 빠르게 비교할 수 있다. - Inter 외에도 다양한 글꼴을 자연스럽게 탐색하도록 돕는, 작지만 실질적인 작업 흐름 개선이다. ## 컴포넌트 탐색을 돕는 모달과 플레이그라운드 - Assets 패널에서 컴포넌트를 클릭하면 상세 정보를 보여주는 모달을 열 수 있다. - 모달에서는 다음 정보를 확인할 수 있다. - 컴포넌트의 상세 내용 - 원본 컴포넌트가 포함된 메인 라이브러리로 이동하는 링크 - Professional 플랜 이상에서는 **Component Playground**를 사용할 수 있다. - 플레이그라운드에서 다음 항목을 미리 확인하고 실험할 수 있다. - 컴포넌트 변형(variants) - 컴포넌트 속성(properties) - 변수 모드(variable modes) - 실제 디자인에 적용하기 전에 여러 상태를 자유롭게 시험할 수 있어 반복 작업이 줄고, 디자인 시스템을 활용하는 흐름이 더 빨라진다. ## 개발자와 디자이너의 협업 강화 - Dev Mode는 개발자가 구현에 필요한 정보를 더 직접적으로 얻도록 설계된 별도 작업 공간이다. - Figma의 2023년 업데이트 전반은 디자인 결과물을 만드는 데서 끝나지 않고, 팀이 함께 빌드하는 과정까지 연결하는 데 초점을 맞췄다. - 대형 기능 출시와 세부적인 사용성 개선을 함께 추진함으로써 제품 개발의 여러 단계에서 작업 효율을 높이려 했다. Figma를 사용하는 팀이라면 Dev Mode와 Variables 같은 구조적 기능뿐 아니라 폰트 미리보기, 컴포넌트 플레이그라운드처럼 반복적인 탐색 시간을 줄이는 기능도 함께 활용하는 것이 좋다. 작은 편의 기능과 큰 협업 기능이 결합될 때 디자인-개발 전환 과정의 효율이 가장 크게 향상된다.

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

dev-modeFigma디자인 시스템프로토타이핑+3

figma·2023년 12월 6일·3분 읽기큐레이션 요약

피그마의 20

2023년을 돌아보며 Figma가 출시한 제품과 조직·업무에 관한 생각을 정리한 연말 회고 글이다. 글의 중심 주장은 협업을 단순한 업무 전달이나 최적화된 절차가 아니라, 서로 다른 역할이 지속적으로 대화하고 함께 문제를 해결하는 과정으로 봐야 한다는 것이다. Dev Mode와 FigJam AI는 이러한 협업을 강화하기 위한 도구로 소개되며, 인간 간 연결과 기술의 발전을 함께 추구해야 한다는 결론으로 이어진다. ## 2023년을 관통한 두 가지 흐름 - 2023년은 한편으로는 AI가 세상을 바꾼 해였고, 다른 한편으로는 팬데믹 이후 사람들이 다시 직접 연결되기 시작한 해로 묘사된다. - 이 두 흐름은 모순처럼 보이지만, Figma는 오히려 기술이 인간 간의 관계와 협업을 더 의미 있게 만들어야 한다고 본다. - 복잡한 세계와 자신의 생각을 이해하기 위해서는 다른 사람과의 상호작용이 필수적이라는 관점이 글 전체를 관통한다. ## ‘핸드오프’에서 지속적인 협업으로 - 제품 개발에서 핸드오프는 디자이너가 개발자에게 결과물을 넘기는 일회성 전달을 뜻하는 경우가 많았다. - 이 과정은 때때로 “벽 너머로 작업물을 던지는 것”처럼 변질되어, 디자이너와 개발자가 서로 다른 공간에서 일하는 문제를 만들었다. - Figma는 미식축구의 핸드오프처럼, 다음 담당자에게 공을 넘긴 뒤에도 플레이가 이어지는 협력적 과정으로 재해석한다. - 디자이너와 개발자는 서로 다른 관점을 갖지만 강하게 의존하는 관계이므로, 같은 작업 공간에서 지속적으로 의견을 주고받아야 한다. - 이러한 방식은 반복 작업과 피드백을 빠르게 하고, 각자의 강점을 살리며, 제품의 목표를 더 명확하게 만든다. ## Dev Mode와 개발자 관점의 디자인 도구 - Figma는 개발자가 필요한 정보를 필요한 시점에 얻을 수 있도록 Dev Mode를 새로운 작업 공간으로 도입했다. - Dev Mode는 디자인 도구 안에 개발자의 관점을 추가해, 기존의 일방적인 디자인 전달 방식을 개선하려는 기능이다. - 글에서는 핸드오프를 일회성 “배턴 패스”가 아니라 지속적인 대화로 다루면 반복 속도가 빨라지고 결과물의 품질도 향상된다고 설명한다. - 목표는 디자이너와 개발자 사이의 ‘핸드오프 장벽’을 없애고, 두 역할이 같은 경기장에서 협업하도록 만드는 것이다. ## FigJam AI와 인간 중심의 협업 - Figma는 FigJam에 AI 기능을 추가해 아이디어 발상과 시각적 협업을 지원한다. - AI는 회의와 브레인스토밍의 준비 및 정리 같은 작업을 보조해, 사람들이 더 중요한 논의와 관계 형성에 집중하도록 돕는 역할을 한다. - Figma가 말하는 “진입 장벽을 낮추고 가능성의 상한을 높인다”는 방향은 초보자도 쉽게 사용하면서 숙련자는 더 많은 일을 할 수 있게 하는 것을 의미한다. - AI가 협업자를 대체한다기보다, 인간 사이의 연결과 의사결정을 강화하는 도구로 활용되어야 한다는 시각이 드러난다. ## 협업에는 도구뿐 아니라 조직적 연습이 필요하다 - 모든 사람이 같은 역할을 하거나 같은 방식으로 일하면 협업이 오히려 경직될 수 있다. - 반복되는 아이디어와 역할 집중은 팀의 창의성과 발전을 제한할 수 있으므로, 새로운 인재와 다양한 관점이 필요하다. - 좋은 협업은 도구 하나로 완성되지 않으며, 서로의 요구를 이해하고 함께 일하는 연습과 충분한 역량의 “깊은 벤치”가 필요하다. - 글의 후반부는 이러한 관점에서 제품 출시, AI 기능, 회의, 업무 언어, 커리어 전환, 기계식 키보드 등 2023년의 주요 주제를 회고한다. ## 글에서 다루는 회고 주제 - 2023년에 출시한 주요 기능과 제품 10가지 - AI 기능을 시장에 출시하기 위해 제품 관리자가 고려한 과정 - 기술에 대한 관심과 애정을 되찾기 위한 질문들 - 더 나은 회의를 만들기 위한 멀티플레이어 협업 방식 - Slack-lash, Toggle Tax 등 변화하는 업무 용어 - 커리어에서 전문적으로 방향을 전환하는 방법 - 기계식 키보드를 통한 업무의 즐거움 실무적으로는 디자인과 개발을 분리된 단계로 운영하기보다, Dev Mode 같은 공유 환경에서 초기부터 함께 검토하는 방식이 효과적이다. AI 역시 아이디어 정리와 반복 작업에 활용하되, 최종적인 판단과 의미 있는 대화는 사람이 담당하도록 설계하는 것이 글의 방향과 맞는다.

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

dev-modeFigmaAIfigjam+2

figma·2023년 11월 21일·3분 읽기큐레이션 요약

개발 모드: 개발자를 위해 더

Figma는 개발자를 단순한 디자인 파일 소비자가 아니라 제품 개발의 핵심 사용자로 보고 Dev Mode를 구축했다. 초기에는 디자인을 코드로 자동 변환하는 codegen 중심 접근을 택했지만, 실제 조직의 다양한 기술 스택과 협업 방식에는 한계가 있음을 발견했다. 결국 Dev Mode는 코드 생성만이 아니라 디자인 탐색, 변경 비교, 개발 도구 연동 등 개발자에게 맞춘 작업 환경을 제공하는 방향으로 확장됐다. ## 디자인과 개발의 경계를 줄이려는 Figma의 목표 - Figma는 처음부터 디자이너만을 위한 도구가 아니라 제품 관리자, 개발자 등 여러 직군이 함께 문제를 해결하는 공간을 지향했다. - 2017년 프로토타이핑과 개발자 핸드오프 기능을 선보이며 디자인과 코드 사이의 협업 흐름을 개선하려 했다. - 개발자들은 디자인 작업 중인 파일을 직접 확인하고 여러 핸드오프 방식을 실험했지만, 기존 Figma는 개발자 업무에 최적화된 도구는 아니었다. - Dev Mode는 디자인을 검사하고, 변경 사항을 비교하며, VS Code에서 작업하는 기능 등을 제공하는 개발자용 환경으로 출시됐다. ## 개발자 관점을 확보한 Visly 인수 - Figma 사용자 중 개발자가 약 3분의 1을 차지했지만, 개발자의 작업 방식과 도구 선호도에 대한 실질적인 직관은 부족했다. - 2021년 Figma는 React UI 컴포넌트 개발 도구를 만들던 Visly를 인수했다. - Visly 팀은 개발자 도구에 대한 연구와 실제 개발 경험을 Figma에 가져왔고, Dev Mode 개발을 가속했다. - 인수의 핵심 효과는 개발자를 대상으로 조사하는 것에서 나아가, 개발자처럼 생각하고 제품을 설계할 수 있는 팀을 확보한 데 있었다. ## 개발자를 2차 사용자가 아닌 핵심 사용자로 설계 - 기존 개발자들은 디자인 협업 때문에 Figma에 들어오지만, Figma가 자신들을 위해 만들어졌다고 느끼기 어려웠다. - Dev Mode 팀은 개발자가 디자인 모드의 복잡한 상호작용을 배울 필요 없이, 자신의 작업 방식에 맞는 인터페이스를 사용해야 한다고 판단했다. - 개발자 중심 기능으로 다음과 같은 아이디어를 검토했다. - 컴포넌트 플레이그라운드 - 코드 스니펫 - GitHub, Storybook 등 개발 도구와의 플러그인 연동 - 개발자 전용 리소스 - 중요한 관점은 개발자가 디자인 도구 안에서 장시간 생활한다는 전제가 아니라, 기존 개발 환경과 연결되는 보조 작업 공간을 제공하는 것이었다. - 베타 사용자 피드백과 고객 요청을 지속적으로 수집해 기능 우선순위에 반영했다. ## codegen 중심 접근의 출발과 한계 - **Codegen**은 정해진 규칙이나 명세를 바탕으로 디자인에서 코드를 자동 생성하는 방식이다. - Dev Mode 초기에는 디자인을 코드로 변환하면 개발 속도가 크게 빨라질 것이라고 보고 codegen을 핵심 방향으로 삼았다. - 자동 변환이 잘 작동하는 경우 프로젝트 작업 시간을 수시간에서 수일까지 줄일 수 있었다. - 그러나 테스트 환경에서 codegen이 작동하는 것과 실제 조직의 개발 프로세스에서 유용하게 작동하는 것은 달랐다. - 기업 규모, 팀 구조, 기술 스택, 개발 워크플로가 서로 다르기 때문에 모든 조직에 동일한 코드 생성 규칙을 적용하기 어려웠다. - 따라서 Dev Mode의 가치는 완성된 코드를 일괄 생성하는 데만 있지 않고, 개발자가 디자인 의도를 이해하고 자신의 코드베이스와 방식에 맞게 구현하도록 돕는 데 있다는 방향 전환이 필요해졌다. ## 실용적인 시사점 디자인-개발 협업 도구는 자동 코드 생성만으로 문제를 해결하기 어렵다. 조직별 기술 환경과 개발자의 실제 작업 흐름을 고려해 디자인 검사, 변경 추적, 코드 정보 제공, 기존 개발 도구와의 연동을 함께 지원해야 하며, 개발자를 제품의 부차적 사용자가 아닌 핵심 사용자로 설계하는 것이 중요하다.

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

dev-modeFigmaReactgithub+3

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

Dev Mode 후속 업데이트:

Figma는 Dev Mode 오픈 베타 2개월 동안 사용자 피드백 5,000건 이상을 반영해 200개가 넘는 기능과 수정 사항을 배포했다. 이번 업데이트의 핵심은 디자인 파일을 개발자가 더 쉽게 탐색·검수하고, 코드 생성 결과를 실제 개발 환경에 가깝게 만드는 것이다. 상태 라벨, 버전 비교, 향상된 코드 스니펫, VS Code 연동 등으로 디자이너와 개발자 간 협업 효율을 높였다. ## Dev Mode에 새로 추가된 기능 - 컴포넌트, 인스턴스, 프레임, 섹션에 개발 준비 상태를 나타내는 **상태 라벨**을 추가할 수 있다. - Design Mode에서 제공되던 **레이아웃 그리드, 룰러, 아웃라인 모드**를 View 메뉴와 기존 단축키로 사용할 수 있다. - 분리(detached)된 컴포넌트를 원본 메인 컴포넌트와 비교해 변경 사항을 확인할 수 있다. - 코드 옵션으로 **Android XML과 iOS UIKit**이 다시 제공된다. - 색상 형식에서 `UIColor`를 선택할 수 있다. - 파일 이름을 클릭하면 **버전 기록의 여러 디자인 버전**을 열어 검사할 수 있다. ## 사용성 및 성능 개선 - 외부 라이브러리에서 가져온 디자인 시스템 컴포넌트의 라이브러리 이름을 표시한다. - 컴포넌트 플레이그라운드에서 중첩된 컴포넌트 속성과 컴포넌트 모드를 확인하고 실험할 수 있다. - 텍스트 속성에는 `rem` 단위를 사용하면서, 다른 속성은 픽셀 단위로 유지할 수 있다. - 캔버스에서 여러 객체를 `Shift` 클릭으로 선택하고 한 번에 내보낼 수 있다. - Figma 파일과 알림을 **VS Code 내부에서 확인**할 수 있다. - 타이포그래피 미리보기에서 스타일 이름, 글자 크기, 줄 높이 같은 속성을 확인하고 복사할 수 있다. - 텍스트의 특정 부분만 선택해 개별 속성을 검사할 수 있다. - 왼쪽 레이어 패널의 높이를 드래그로 조절할 수 있다. - 원시 값과 일치 가능성이 높은 디자인 시스템 변수를 자동으로 제안한다. - 코드 스니펫뿐 아니라 Figma 속성 형식으로도 값을 확인할 수 있다. - 디자인에 포함된 이미지 등의 소스 파일을 다운로드할 수 있다. - 대체 단위 설정을 일반 환경설정 메뉴에서 쉽게 찾을 수 있다. - 섹션을 선택하면 프레임별 링크를 모아서 확인할 수 있다. ## 코드 생성 개선 - `Shift` 키를 누른 채 모든 코드 스니펫을 한 번에 복사할 수 있다. - 하나의 패딩 값만 설정된 경우에도 CSS에서 `padding-top`, `padding-bottom`, `padding-left`, `padding-right`를 생성한다. - 코드에 `font-style`, `line-height`, `font-weight`를 항상 표시한다. - `line-height`를 백분율과 픽셀 값으로 함께 제공한다. - CSS 코드 생성에서 다음 OpenType 기능을 지원한다. - `font-feature-settings` - `font-variant-numeric` - `font-kerning` - 오토 레이아웃의 `min-width`, `max-width`, `min-height`, `max-height`와 줄바꿈 레이아웃의 세로 간격에 변수를 사용할 수 있다. - 여러 문단이나 서로 다른 텍스트 스타일이 섞인 텍스트 레이어는 스타일별 CSS 코드를 개별적으로 표시한다. - 커뮤니티에는 Tailwind, React, Vue 등을 위한 약 80개의 코드 생성 플러그인이 제공된다. ## 버그 수정 및 탐색 개선 - 탭 키 내비게이션으로 Design Mode와 Dev Mode 사이를 전환할 수 있다. - 힌트와 툴팁 전반에서 대체 단위를 올바르게 표시한다. - 텍스트 그라디언트 표시를 개선하는 등 시각적 품질 문제를 수정했다. 이번 업데이트는 Dev Mode를 단순한 디자인 검사 도구가 아니라, 디자인 시스템 확인·코드 생성·파일 관리·개발 환경 연동을 아우르는 협업 작업 공간으로 발전시키는 데 초점을 맞췄다. 팀에서는 상태 라벨과 버전 기록을 개발 핸드오프 과정에 적극 활용하고, 생성된 CSS나 플랫폼 코드는 실제 프로젝트 규칙과 비교해 검토하는 것이 좋다.

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

dev-modeFigmaReactCSS+4

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

피그마 오픈 베타 출시의

Figma의 Dev Mode 오픈 베타 사례는 출시일을 끝이 아니라 제품 생애의 첫날로 보고, 이후 2주를 집중적인 사용자 조사 기간으로 활용해야 한다고 주장합니다. 제품·마케팅·지원팀이 역할을 나누되 긴밀히 협업하면서 사용 데이터, 여론, 버그 및 개선 요청을 종합해야 합니다. 성공 여부는 사전에 정의한 핵심 지표와 기준선으로 판단하고, 얻은 피드백을 우선순위와 제품 개선으로 연결하는 것이 결론입니다. ## 출시 후 2주는 집중적인 사용자 조사 기간 - Dev Mode는 Figma 안에서 개발자를 위해 설계된 별도 작업 공간입니다. - 브라우저 인스펙터처럼 캔버스 위 요소를 확인하며 치수, 스펙, 에셋 등의 정보를 얻을 수 있습니다. - 오픈 베타 기간에는 2023년 말까지 모든 Figma 사용자가 무료로 이용할 수 있도록 해 대규모 사용 데이터를 확보했습니다. - 출시 후 2주 동안 다음을 확인하는 것이 목표였습니다. - 사용자가 실제로 Dev Mode를 사용하는가 - 어떤 기능이 유용하게 받아들여지는가 - 어떤 버그와 불편이 즉시 해결되어야 하는가 - 제품이 개발자 커뮤니티의 요구를 충족하는가 ## 제품·마케팅·지원팀의 역할 분담 - **제품팀** - 기능별 사용량과 사용자 행동을 추적했습니다. - 어떤 기능이 실제 워크플로에 사용되는지 분석했습니다. - **마케팅팀** - 소셜 미디어와 공개 반응을 통해 제품에 대한 전반적인 여론을 파악했습니다. - **지원팀** - 버그 신고, 개선 요청, 고객 문의를 집중적으로 수집했습니다. - 각 팀은 담당 영역을 나누었지만, 중요한 트윗이나 반복적으로 발생하는 문제를 공유하며 지속적으로 소통했습니다. - 제품 관리자는 여러 출처의 정보를 종합하고, 실행 항목의 우선순위를 정하며, 후속 조치를 조율하는 역할을 맡았습니다. ## 사전에 정의한 성공 지표 - Dev Mode의 **북극성 지표(north star metric)** 는 개발자 역할을 가진 주간 활성 사용자 중 Dev Mode를 사용하는 비율이었습니다. - 출시 전에 측정 기준과 대시보드를 준비해, 출시 전후의 변화를 비교할 수 있도록 했습니다. - 기준선이 없으면 수치가 좋은지 나쁜지 판단하기 어렵기 때문에, 베타 결과를 해석하려면 사전 벤치마크가 중요합니다. ## 기능 채택과 사용자 반응 측정 - **기능 채택** - Inspect 패널 - 변경 사항 비교(Compare changes) - 관련 링크(Related links) - 그 밖의 Dev Mode 기능별 사용률 - 기능별 사용량을 비교해 사용자가 가장 매력적으로 느끼는 기능과 활용도가 낮은 기능을 구분했습니다. - **도달률과 반응** - 소셜 미디어 게시물 노출 수 - 이메일 오픈율 - 제품 내부 메시지 노출 수 - 소셜 미디어의 긍정·부정 분위기 - Config 행사 중 실시간 청중 반응 - 단순히 사용자에게 도달했는지뿐 아니라, 어떤 기능이 관심과 기대를 유발했는지도 함께 살폈습니다. ## 버그와 개선 요청 수집 - 사용자가 겪는 문제를 파악하기 위해 다양한 접점을 활용했습니다. - Help Center 문서 조회 수 - 제품 내 피드백 버튼 제출 내용 - 고객 지원 티켓 - 여러 채널에서 들어오는 요청을 한곳에 모아 반복되는 문제와 우선적으로 해결해야 할 개선 사항을 파악했습니다. - 비공개 베타 기간에 개발자와 디자이너의 워크플로 및 고충을 인터뷰한 결과도 출시 후 분석의 기반으로 활용했습니다. - 이러한 사전 학습을 통해 핵심 기능을 수정하고, 협업 방식에 맞게 기능을 조정하며, 처음에는 예상하지 못했던 요구도 반영할 수 있었습니다. 출시를 성공시키려면 발표 당일의 화제성보다 이후 데이터를 어떻게 측정하고 피드백을 어떻게 실행으로 전환하는지가 중요합니다. 오픈 베타를 진행할 때는 담당 팀과 지표를 미리 정하고, 출시 전 기준선을 확보한 뒤, 사용량·여론·지원 요청을 통합해 빠르게 우선순위를 결정하는 것이 좋습니다.

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

dev-modeFigmadesign-toolsuser-research+3

figma·2023년 6월 20일원문

Config 2023 다시 보기 (새 탭에서 열림)

Figma는 Config 2023을 통해 단순한 디자인 도구를 넘어 디자인과 개발의 경계를 허물고 전체 제품 개발 팀이 함께 협업할 수 있는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 워크스페이스인 '개발 모드(Dev Mode)'와 코드의 논리를 디자인에 이식하는 '변수(Variables)', 그리고 실질적인 제품 작동 방식을 구현하는 '고급 프로토타이핑' 기능을 새롭게 도입했습니다. 이번 업데이트는 디자인 결과물이 실제 제품 코드로 전환되는 과정을 가속화하고, 팀 간의 소통 방식을 근본적으로 재정의하는 데 목적이 있습니다. ### 개발자 경험을 최적화하는 개발 모드(Dev Mode) * **개발자 전용 워크스페이스:** 무한한 캔버스 내에서 개발자가 작업에 필요한 구조와 기능을 직관적으로 파악할 수 있는 별도의 모드를 제공합니다. * **코드 번역 및 검사:** 디자인 요소를 코드로 더 빠르게 변환할 수 있으며, Jira, GitHub, Storybook과 같은 주요 개발 도구 및 코드베이스와 플러그인을 통해 직접 연결됩니다. * **VS Code 통합:** 'Figma in VS Code'를 통해 개발 환경을 벗어나지 않고도 에디터 바로 옆에서 디자인 파일을 검사하고 협업할 수 있습니다. * **배포 추적:** 어떤 디자인 요소가 프로덕션에 반영되어야 하는지 상태를 추적하여 디자인과 개발 간의 누락을 방지합니다. ### 디자인 시스템의 유연성을 극대화하는 변수(Variables) * **디자인 토큰의 코드화:** 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 저장하여 디자인 시스템을 코드의 언어와 일치시킵니다. * **모드(Modes) 지원:** 라이트 모드와 다크 모드, 혹은 다양한 테마 간의 전환을 변수 값을 통해 손쉽게 토글하며 테스트할 수 있습니다. * **확장성 있는 관리:** 에일리어싱(Aliasing) 및 스코핑(Scoping)을 지원하며, REST API와 플러그인을 통해 변수 생성 및 관리 프로세스를 자동화할 수 있습니다. ### 논리적 흐름을 구현하는 고급 프로토타이핑 * **조건부 로직 및 표현식:** "특정 변수가 X일 때 프레임 2로 이동"과 같은 조건문이나 수학적 표현식을 활용하여 실제 앱과 유사한 복잡한 상호작용을 구현할 수 있습니다. * **효율적인 프로토타입 제작:** 수많은 화면을 직접 연결할 필요 없이 변수를 활용해 동적인 변화를 줄 수 있어 프로토타입 제작 시간이 단축됩니다. * **인라인 프리뷰:** 디자인 편집 화면과 프로토타입 미리보기 화면을 동시에 띄워두고 수정한 내용을 즉각적으로 확인할 수 있어 반복 작업의 효율이 높아졌습니다. ### 워크플로우 개선을 위한 편의 기능(Quality of Life) * **오토 레이아웃 고도화:** 요소가 넘치면 다음 줄로 넘겨주는 '줄 바꿈(Wrap)' 기능과 최소/최대 너비 및 높이 설정 기능이 추가되었습니다. * **글꼴 선택기 업그레이드:** 글꼴 이름을 해당 서체로 미리 볼 수 있는 기능과 검색 및 필터링 기능이 강화되어 원하는 폰트를 더 빠르게 찾을 수 있습니다. * **파일 브라우저 업데이트:** 외부 팀과 공유된 프로젝트나 파일을 더 쉽게 찾을 수 있도록 인터페이스가 개선되었습니다. ### AI 기술을 통한 디자인의 미래 확장 * **Diagram 인수:** AI 기반 디자인 도구를 개발해온 Diagram을 인수하여 Figma 플랫폼 전반에 AI 기능을 통합할 계획입니다. * **창작 보조 및 가속:** AI가 시각적 표현을 돕고 워크플로우를 가속화하며, 누구나 수준 높은 초안을 만들 수 있도록 지원함으로써 디자인의 진입장벽을 낮추고자 합니다. Figma의 이번 업데이트는 디자이너와 개발자가 서로 다른 언어를 사용하는 문제를 해결하는 데 집중하고 있습니다. 개발 모드를 통해 개발자는 디자인 의도를 명확히 파악하고, 디자이너는 변수와 로직을 활용해 실제 제품에 가까운 설계를 할 수 있게 되었습니다. 팀의 생산성을 높이기 위해 현재 베타 버전으로 제공되는 개발 모드를 프로젝트에 적극적으로 도입하고, 기존 디자인 시스템을 변수(Variables) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.

dev-modeFigma디자인 시스템프로토타이핑+4

figma·2023년 6월 20일원문

Figma의 새로운 개발자 모드를 (새 탭에서 열림)

피그마가 디자이너와 개발자 간의 간극을 좁히고 제품 개발 효율성을 극대화하기 위해 개발자 전용 공간인 'Dev Mode'를 출시했습니다. 브라우저 인스펙터와 유사한 인터페이스를 통해 개발자가 디자인 사양을 직관적으로 확인하고 코드로 변환할 수 있도록 지원하는 것이 핵심입니다. 이를 통해 개발팀은 디자인 도구 내에서 고유한 워크플로우를 유지하며 더 빠르고 정확하게 결과물을 구현할 수 있게 되었습니다. ### 개발자 중심의 작업 환경, Dev Mode * 디자인 파일을 브라우저의 '개발자 도구(Inspector)'와 유사한 방식으로 탐색할 수 있는 전용 워크스페이스를 제공합니다. * 디자인 요소(레이어, 그룹 등)를 개발 개념(코드, 아이콘, 토큰)과 밀접하게 연결하여 필요한 정보를 즉각적으로 추출할 수 있습니다. * 디자인 시스템의 맥락을 유지하면서 치수, 스펙, 에셋 등을 손쉽게 확인하고 내보낼 수 있는 환경을 구축했습니다. ### 코드 구현 속도를 높이는 최적화 기능 * 언어별로 맞춤 설정이 가능한 코드 스니펫 기능을 제공하며, 단순히 코드를 나열하는 것이 아니라 개발의 시작점으로 활용할 수 있게 설계되었습니다. * CSS 박스 모델, 트리 뷰(Tree View) 형태의 현대적 구문, 코드베이스에 맞춘 단위 토글 기능을 통해 코드 가독성을 높였습니다. * 디자인 시스템의 변수(Variables)를 디자인 토큰으로 활용하여 코드와 디자인 간의 일관성을 강화합니다. ### 워크플로우 통합과 강력한 플러그인 생태계 * GitHub, Jira, Linear와 같은 프로젝트 관리 도구를 연동하여 피그마 내에서 이슈와 풀 리퀘스트(PR) 상태를 바로 확인할 수 있습니다. * Storybook 플러그인을 통해 코드베이스에 실제 구현된 컴포넌트의 상태를 디자인 파일 안에서 참조할 수 있습니다. * AWS Amplify Studio, Google Relay, Anima 등의 코드 생성 플러그인을 활용하거나 팀 고유의 워크플로우에 맞는 커스텀 플러그인을 구축할 수 있습니다. ### IDE에서 직접 확인하는 VS Code 확장 프로그램 * 개발자가 코드 에디터를 벗어나지 않고도 디자인을 검토하고, 변경 사항 및 댓글 알림을 확인할 수 있는 VS Code용 확장 프로그램을 지원합니다. * 디자인 사양에 기반한 코드 자동 완성(Autocomplete) 기능을 제공하여 코딩 속도를 획기적으로 향상시킵니다. * 디자인 파일과 코드 편집기 사이를 오가는 컨텍스트 스위칭 비용을 줄여 개발 집중도를 높입니다. 단순히 디자인을 보는 것을 넘어, 실제 구현 단계에서의 생산성을 높이고 싶다면 Dev Mode와 VS Code 확장 프로그램을 워크플로우에 적극 도입해 보시기 바랍니다. 디자인 시스템의 토큰 관리와 에디터 내 자동 완성 기능을 결합하면 디자인과 코드 사이의 정렬(Alignment)을 훨씬 수월하게 유지할 수 있습니다.

dev-modeFigma디자인 시스템github+4