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 같은 구조적 기능뿐 아니라 폰트 미리보기, 컴포넌트 플레이그라운드처럼 반복적인 탐색 시간을 줄이는 기능도 함께 활용하는 것이 좋다. 작은 편의 기능과 큰 협업 기능이 결합될 때 디자인-개발 전환 과정의 효율이 가장 크게 향상된다.

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

Figma디자인 시스템프로토타이핑dev-mode+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 역시 아이디어 정리와 반복 작업에 활용하되, 최종적인 판단과 의미 있는 대화는 사람이 담당하도록 설계하는 것이 글의 방향과 맞는다.

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

FigmaAIfigjamdev-mode+2

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

커리어 전환의 기술 | Figma

커리어 피벗은 반드시 직업을 완전히 바꾸는 극적인 전환일 필요가 없으며, 관점·역할·환경을 조정하는 작은 변화도 큰 결과를 만들 수 있다. 이 글은 제품 개발 분야의 창작자 6명이 경험한 피벗을 재구성(reframe), 복귀(boomerang), 자기 탐색(unfolding), 확장(stretch), 급격한 전환(hard left), 경험의 결합(blend)으로 나누어 설명한다. 공통적으로 피드백을 받아들이고, 낮은 위험의 실험을 거치며, 기존 경험을 새로운 방식으로 활용하는 것이 성공적인 전환의 핵심이다. ## 커리어 피벗을 바라보는 관점 - 피벗은 삶과 커리어에서 반복적으로 일어나는 방향 전환이다. - 기술 업계에서는 ‘빠르게 움직이고 과감히 바꾸는 것’이 강조되지만, 실제 커리어 변화는 점진적 조정부터 완전한 전환까지 다양한 형태를 가진다. - 피벗의 목적은 단순히 직함을 바꾸는 것이 아니라 다음을 찾는 데 있다. - 기존 기술을 더 효과적으로 활용하기 - 관심사와 직업의 접점 넓히기 - 새로운 환경에서 영향력 키우기 - 자신에게 맞는 일의 방식 발견하기 ## 관점을 바꾸는 재구성(Reframe) 재구성은 직업이나 분야를 완전히 바꾸지 않고, 문제를 바라보고 전달하는 방식을 바꾸는 피벗이다. - UX 라이터 Ry Reid는 핀테크 기업 고객지원에서 UX 라이팅으로 전환한 뒤, Pinterest와 Spotify에서 글쓰기 역량을 쌓았다. - Uber Eats에서는 문서와 글로 아이디어를 설득하려 했지만, 아이디어가 제대로 받아들여지지 않았다. - 승진에서 탈락한 뒤 디자인 매니저에게 “아이디어를 설명하지 말고 시각화해보라”는 조언을 받았다. - Ry는 펜과 종이로 대략적인 화면을 만들고, 이후 Google Slides로 시안을 제작해 Slack에 공유했다. - 디자이너와 프로덕트 매니저가 즉시 반응했고, 제안한 UX가 실제 방향으로 채택되었다. - 핵심은 라이터가 디자이너가 된 것이 아니라, 글 중심의 커뮤니케이션에 저충실도 시각화를 추가해 영향력을 확장한 것이다. - 최종적인 픽셀 단위 완성도는 전문 디자이너의 역할이지만, 좋은 아이디어를 시각적으로 제안하는 일은 누구나 시도할 수 있다. ### 재구성이 필요한 신호 - 현재 일을 좋아하지만 같은 문제에 계속 부딪히는 경우 - 승진이나 성장의 정체가 오래 지속되는 경우 - 불편하지만 동시에 기대감을 주는 조언을 받은 경우 ### 재구성을 실행하는 방법 - 승진 탈락이나 비판적인 피드백을 방어적으로만 받아들이지 않는다. - 자신의 직무와 인접한 분야의 멘토에게 조언을 구한다. - 처음부터 큰 변화를 시도하지 말고, 펜·슬라이드·간단한 프로토타입처럼 실패 비용이 낮은 방식으로 실험한다. - 익숙하지 않은 방법을 시도할 때 느끼는 불편함 자체를 변화의 신호로 받아들인다. ## 익숙한 회사에서 새로운 역할을 맡는 복귀(Boomerang) 복귀는 이미 알고 있는 회사로 돌아가거나, 익숙한 조직 안에서 완전히 다른 역할을 맡는 방식이다. - 회사와 조직문화에 대한 이해를 유지하면서 직무는 크게 바꿀 수 있다. - 새로운 분야를 처음부터 시작해야 하는 위험을 줄이고, 기존 네트워크와 신뢰를 활용할 수 있다. - 글에 소개된 Erica Simunovic은 로스앤젤레스의 애드테크 기업 Tatari에서 처음에는 피플 오퍼레이션을 이끌었다. - 이후 제품 디자인 부트캠프를 수료하고 약 5년 뒤 같은 회사로 돌아와 디자이너로 일하게 되었다. - 이 사례는 회사는 그대로 유지하되 전문 분야를 HR에서 디자인으로 전환하는 피벗을 보여준다. ## 글에서 제시하는 다른 피벗 유형 - **자기 탐색(Unfolding)**: 외부 직함보다 자신의 관심과 정체성을 깊이 탐색하며 새로운 방향을 발견하는 방식 - **확장(Stretch)**: 기존 역량을 바탕으로 새로운 기회와 책임에 도전하는 방식 - **급격한 전환(Hard left)**: 기존 경력과 전혀 다른 분야로 크게 방향을 바꾸는 방식 - **경험의 결합(Blend)**: 여러 직무 경험, 기술, 관계망을 조합해 새로운 역할이나 사업을 만드는 방식 작은 시각화 실험처럼 낮은 위험의 변화를 먼저 시도하고, 인접 분야의 사람에게 피드백을 구하는 것이 실용적인 출발점이다. 현재의 직무를 버리기 전에 기존 경험을 새로운 방식으로 재구성할 수 있는지 살펴보면, 더 안전하면서도 영향력 있는 커리어 전환을 설계할 수 있다.

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

Figma사용자 경험프로덕트 디자인slack+2

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

다 함께: 훌륭

회의는 단순한 정보 전달이나 이메일 대체 수단이 아니라, 의도적으로 설계된 협업 경험이어야 한다. 성공적인 회의를 위해서는 목적, 준비, 참여, 후속 조치라는 네 가지 요소가 필요하며, 진행자와 참석자 모두 회의 품질에 책임이 있다. 특히 회의 전 목표와 의제를 명확히 하고, 참석자들이 사전에 의견을 준비할 수 있도록 해야 한다. ## 회의를 목적에 맞게 설계하기 - 회의를 소집하기 전에 먼저 달성하려는 목표를 명확히 해야 한다. - 진행 상황을 점검하는 자리인지 - 중요한 결정을 내리는 자리인지 - 여러 팀에 인사이트를 공유하는 자리인지 구분한다. - 회의 목적에 따라 회의 유형과 운영 방식도 달라져야 한다. - 글에서는 회의를 다음 세 가지 유형으로 나눈다. - **Cadence(정기 운영)**: 전체 회의, 스탠드업, 프로젝트 동기화 - **Catalyst(촉진·결정)**: 의사결정 회의, 제품 리뷰, 디자인 크리틱 - **Context(맥락 공유)**: 올핸즈, 오프사이트, 온보딩, 일대일 미팅 - 목적과 유형을 먼저 정하면 회의에서 답해야 할 질문과 필요한 참여 방식을 구체화할 수 있다. ## 사전 준비와 의제 작성 - 참석자들이 회의 전에 내용을 파악하고 생각을 정리할 수 있도록 의제를 미리 공유해야 한다. - 의제에는 다음과 같은 사전 자료를 포함하는 것이 좋다. - 프로젝트 브리프 - 관련 문서 - 디자인 스케치 - 논의에 필요한 배경 정보 - 자료는 가능하면 회의 하루 전에 전달한다. 업무가 시작된 뒤에는 참석자들이 별도로 회의 준비 시간을 확보하기 어렵기 때문이다. - 의제에는 단순한 안건 목록뿐 아니라 각 주제에서 얻고자 하는 결과와 논의할 질문도 포함하는 것이 효과적이다. ## 템플릿으로 참여 장벽 낮추기 - 회의를 준비할 때 빈 문서나 빈 캔버스에서 시작하는 ‘blank canvas problem’이 발생할 수 있다. - 이를 해결하려면 검증된 회의 템플릿을 활용하거나 팀의 목적에 맞는 사용자 정의 템플릿을 만든다. - FigJam과 같은 협업 도구에서는 다음 활동을 회의 전에 미리 진행할 수 있다. - 참석자들의 사전 의견 수집 - 궁금한 점과 우려 사항 기록 - 회의 주제에 대한 초기 아이디어 작성 - 토론을 유도하는 질문이나 문제 제시 - 팀에 잘 맞는 회의 형식을 찾으면 템플릿으로 저장해 반복적으로 사용할 수 있다. - AI를 활용해 회의 목적에 맞는 맞춤형 템플릿을 생성하는 방법도 제안된다. ## 진행자와 참석자의 공동 책임 - 좋은 회의는 진행자 혼자 만드는 것이 아니라 모든 참석자가 함께 만든다. - 진행자는 회의의 목적과 구조를 설계하고, 참석자는 사전 자료를 검토하고 의견을 준비해야 한다. - 회의의 주요 문제가 목적·준비·참여·후속 조치 중 하나라도 부족해서 생긴다는 점이 글의 핵심 진단이다. - 따라서 참석자 역시 질문을 미리 남기고, 논의에 필요한 정보를 보완하며, 회의가 목적에서 벗어나지 않도록 참여해야 한다. 회의를 생산적으로 만들려면 먼저 “왜 모이는가”를 정의하고, 하루 전 의제와 자료를 공유한 뒤, 참석자들이 사전에 의견을 남길 수 있는 구조를 마련하는 것이 좋다. 반복되는 회의는 템플릿화해 준비 비용을 낮추고, 진행자와 참석자가 함께 결과를 만들어가는 방식으로 운영해야 한다.

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

FigmaAIfigjamcoda+2

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

Headspace와 함께 살아

Headspace는 제품·파트너십·브랜드 확장에 대응하려면 수작업과 플러그인 중심의 디자인 시스템을 확장 가능한 구조로 전환해야 했다. 이를 위해 Figma의 변수와 디자인 토큰을 도입하고, 단일 브랜드용 시스템을 여러 브랜드와 플랫폼을 지원하는 시스템으로 재구축했다. 그 결과 디자인·엔지니어링 팀이 공유할 수 있는 소스 오브 트루스를 마련하고, 반복적인 색상·타이포그래피 변경 작업을 크게 줄일 수 있었다. ## 확장에 한계가 있던 기존 디자인 시스템 - Headspace는 앱, 웨어러블, VR, 다양한 브랜드 협업 등 100개국 이상에서 여러 접점을 운영하고 있었다. - 기존 시스템은 수작업과 플러그인에 크게 의존해 규모가 커질수록 유지보수가 어려웠다. - 색상이 고정된 hex 코드로 관리되어 동일한 색상에 여러 값이 생겼고, 화면과 제품 간 사용자 경험이 일관되지 않았다. - 색상 팔레트처럼 단순한 변경에도 디자인 시스템 담당자가 몇 시간에서 며칠을 소비해야 했다. - 플러그인은 임시 해결책이었지만 다음과 같은 문제가 있었다. - 디자이너가 자주 사용하지 않으면 학습 비용이 높았다. - Figma의 스타일을 수정할 때마다 플러그인을 다시 설정해야 했다. - 디자인·엔지니어링 팀이 신뢰할 수 있는 단일 기준점을 제공하지 못했다. ## 여러 브랜드를 위한 시스템으로 전환 - 2021년 Ginger와의 합병이 발표되면서 Headspace는 단일 브랜드용 시스템의 한계를 해결해야 했다. - 새 시스템은 Headspace뿐 아니라 Headspace Care와 향후 파트너 브랜드까지 수용할 수 있어야 했다. - 기존 시스템을 감사한 뒤 컴포넌트와 패턴을 다시 구축해 디자이너와 엔지니어가 쉽게 찾고 참조할 수 있도록 했다. - 이 과정에서 Headspace 최초의 디자인 토큰 시스템을 만들었다. - 색상, 타이포그래피 등 반복적으로 사용되는 디자인 속성을 추상화해 브랜드별로 재사용하고 변경할 수 있는 기반을 마련했다. ## Figma 변수와 디자인 토큰 도입 - Headspace는 기존 플러그인 중심 워크플로를 Figma의 네이티브 변수 기능으로 대체했다. - 색상 값을 직접 입력하는 대신 의미 기반 토큰으로 관리했다. - 예: 특정 hex 코드가 아니라 배경색, 텍스트색, 강조색과 같은 역할 중심 이름을 사용 - 변수에 값을 연결하면 하나의 값을 변경해 이를 사용하는 여러 컴포넌트와 화면에 일괄 반영할 수 있다. - 테마와 브랜드가 달라져도 같은 컴포넌트 구조를 유지하면서 변수 값만 교체할 수 있다. - Steven은 약 2년 동안 플러그인 기반 시스템을 구축했지만, 변수 도입 후 색상 토큰과 타이포그래피를 하루 만에 변수로 구현했다고 설명한다. - 변경 사항은 한 달 이내에 디자이너와 엔지니어에게 배포되었다. ## 디자인·엔지니어링 협업 개선 - 토큰과 컴포넌트를 명확하게 구조화해 디자인과 코드 사이의 대응 관계를 쉽게 만들었다. - 디자이너는 반복적인 스타일 수정 대신 제품 경험과 시스템 개선에 집중할 수 있게 되었다. - 엔지니어는 임의의 색상값이나 스타일을 해석하는 대신 공유된 토큰을 기준으로 구현할 수 있다. - 디자인 시스템이 브랜드 가이드 문서에 머무르지 않고 실제 제품 제작 과정에서 작동하는 소스 오브 트루스가 되었다. - 여러 제품과 플랫폼이 늘어나도 동일한 원칙과 컴포넌트를 재사용할 수 있는 확장성을 확보했다. Headspace 사례는 디자인 시스템을 단순히 컴포넌트 모음으로 관리하기보다, 변수와 토큰을 활용해 브랜드·테마·플랫폼 변화를 흡수하는 구조로 설계해야 한다는 점을 보여준다. 특히 제품과 조직이 빠르게 성장한다면 하드코딩된 스타일과 플러그인 의존성을 줄이고, 의미 기반 토큰과 네이티브 변수부터 정비하는 것이 실용적인 출발점이다.

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

Figma디자인 시스템디자인 토큰design-variables+2

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

변수에 관한 모든 궁금증 해결

Figma의 변수(Variables)는 단순한 디자인 토큰을 넘어 여러 상태와 플랫폼에 따라 디자인 값을 동적으로 바꾸고, 디자인과 코드를 더 밀접하게 연결하는 기능이다. 이번 업데이트로 효과, 선 두께, 투명도, 레이아웃 그리드, 모서리 반경, 중첩된 컴포넌트 인스턴스까지 변수로 제어할 수 있게 되어 반응형·다중 플랫폼 디자인의 유연성이 크게 향상됐다. Figma는 앞으로 타이포그래피 영역까지 변수 활용을 확장할 계획이다. ## 변수의 확장된 활용 - 변수는 색상이나 간격 같은 고정된 토큰을 대체하는 데 그치지 않고, 모드에 따라 값이 달라지는 유연한 설계 단위로 사용된다. - 데스크톱·모바일, 라이트·다크 모드, 브랜드별 테마 등 서로 다른 조건에 맞춰 디자인을 한 번에 조정할 수 있다. - Headspace처럼 디자인 시스템의 일관성을 유지하면서도 다양한 제품 상황과 협업 요구에 대응하는 데 활용할 수 있다. - 변수의 개방적인 구조 덕분에 일반적인 디자인 시스템뿐 아니라 Figma 안에서 게임과 인터랙티브 작품을 만드는 등 창의적인 용도로도 사용된다. ## 효과와 시각적 속성의 반응형 제어 - 블러 크기, 드롭 섀도의 색상, 오프셋 거리 등 효과의 다양한 속성에 변수를 바인딩할 수 있다. - 모드가 바뀌면 효과 값도 함께 변경되므로, 플랫폼이나 테마에 맞는 시각적 표현을 자동으로 적용할 수 있다. - 레이어의 불투명도 역시 변수로 제어할 수 있으며, 불투명도 필드를 마우스 오른쪽 버튼으로 클릭해 변수를 연결한다. - 개별 모서리 반경을 변수에 연결해 네 모서리를 동일하게 처리하지 않고 각각 세밀하게 조정할 수 있다. ## 플랫폼별 반응형 디자인 - 선 두께를 변수로 관리해 데스크톱과 모바일 등 플랫폼별로 다른 스트로크 값을 적용할 수 있다. - 레이아웃 그리드도 변수와 모드에 따라 변경할 수 있어 화면 크기나 기기별 레이아웃을 더욱 정밀하게 설계할 수 있다. - 동일한 컴포넌트 구조를 유지하면서 모드만 전환해 픽셀 단위로 최적화된 디자인을 만들 수 있다. ## 중첩된 컴포넌트 인스턴스 제어 - 컴포넌트 내부에 포함된 다른 컴포넌트 인스턴스의 변형(variant)에도 변수를 연결할 수 있다. - 이를 통해 복잡한 컴포넌트 구조에서도 내부 요소의 상태와 속성을 상위 시스템에서 유연하게 제어할 수 있다. - 여러 단계로 중첩된 디자인 시스템을 구성할 때 반복적인 수동 수정이 줄어든다. ## 변수와 스타일의 관계 - 스타일은 특정 색상, 텍스트, 효과 등을 재사용하는 데 적합한 반면, 변수는 조건이나 모드에 따라 값이 바뀌는 동적 상황에 더 적합하다. - 변수는 기존 스타일을 대체하기보다는 스타일과 함께 사용해 디자인 시스템을 확장하는 방식으로 이해할 수 있다. - 변수의 활용 범위가 넓어지면서 디자인 파일의 값과 실제 코드에서 사용하는 토큰 사이의 연결도 더 자연스러워진다. ## 디자인과 코드의 연결 강화 - 변수 기반으로 디자인 값을 관리하면 개발자가 사용하는 플랫폼별 토큰 및 테마 값과 디자인 시스템을 맞추기 쉬워진다. - 모드와 변수 구조를 코드의 상태값이나 디자인 토큰 구조에 대응시킬 수 있어 핸드오프 과정의 불일치를 줄일 수 있다. - Figma는 이러한 연계를 앞으로 타이포그래피까지 확장하려 하며, 글꼴 크기·행간·문자 간격 등도 더 유연하게 관리할 가능성을 제시한다. 실무에서는 먼저 색상과 간격처럼 반복 사용이 많은 값을 변수화한 뒤, 라이트·다크 모드나 모바일·데스크톱 모드를 구성하는 것이 좋다. 이후 효과, 투명도, 그리드, 컴포넌트 상태로 범위를 넓히면 디자인 시스템의 일관성과 반응형 설계 효율을 함께 높일 수 있다.

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

Figma디자인 시스템디자인 토큰반응형 디자인+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의 가치는 완성된 코드를 일괄 생성하는 데만 있지 않고, 개발자가 디자인 의도를 이해하고 자신의 코드베이스와 방식에 맞게 구현하도록 돕는 데 있다는 방향 전환이 필요해졌다. ## 실용적인 시사점 디자인-개발 협업 도구는 자동 코드 생성만으로 문제를 해결하기 어렵다. 조직별 기술 환경과 개발자의 실제 작업 흐름을 고려해 디자인 검사, 변경 추적, 코드 정보 제공, 기존 개발 도구와의 연동을 함께 지원해야 하며, 개발자를 제품의 부차적 사용자가 아닌 핵심 사용자로 설계하는 것이 중요하다.

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

FigmaReactgithubdev-mode+3

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

피그마 + 어도비

2022년 발표된 Figma의 Adobe 인수합병은 협업형 디지털 제품 개발 도구와 Adobe의 창작 도구가 결합해 소비자에게 더 큰 혜택을 줄 수 있다는 취지로 설명됐다. Figma는 자신이 그래픽·마케팅 디자인 도구가 아니라 앱과 웹사이트를 팀 단위로 설계·개발하는 플랫폼이며, 경쟁 시장도 매우 역동적이라고 강조했다. 다만 규제 당국의 승인을 받지 못해 2023년 12월 양사는 인수합병을 포기했다. ## Figma가 해결하는 문제 - Figma는 디지털 제품을 만드는 팀을 위한 웹 기반 디자인 도구다. - 주요 사용자는 디자이너뿐 아니라 개발자, 제품 관리자 등 제품 개발에 참여하는 모든 구성원이다. - 제품 개발 과정 전체를 지원한다. - **FigJam**: 아이디어 발상과 브레인스토밍 - **Figma**: UI 설계와 프로토타이핑 - **Dev Mode**: 디자인과 프로토타입을 개발자가 코드로 구현하도록 지원 - 규제 당국이 Figma의 사업과 시장 위치를 잘 이해하지 못했기 때문에, 회사는 이를 설명하는 데 수천 시간을 들였다고 밝혔다. ## 그래픽 디자인과 디지털 제품 개발의 차이 - 전통적인 그래픽 디자인은 광고, 포스터, 일러스트처럼 시각적 결과물을 만드는 데 초점을 둔다. - Figma의 고객은 상호작용하는 앱과 웹사이트를 구축한다. - 디지털 제품 개발에는 디자인뿐 아니라 개발, 기획, 프로토타이핑 등 다양한 역할과 도구가 필요하다. - 따라서 Figma는 단순한 이미지 제작 도구가 아니라 여러 직군이 함께 제품을 설계하는 협업 플랫폼으로 포지셔닝됐다. ## 경쟁 시장의 확대 - 제품 개발 도구 시장에는 여러 유형의 경쟁자가 존재한다. - 종합 디자인 도구: Sketch, Figma, Penpot - 특화 도구: Miro, Flinto, Anima, ProtoPie, Zeplin - 로우코드 플랫폼: Salesforce 등 - 앱과 웹사이트가 기업과 사용자에게 필수 요소가 되면서 관련 도구 시장도 크게 성장했다. - AI 발전으로 제품 개발 도구의 혁신 속도도 빨라지고 있다. - 새로운 스타트업과 서비스가 지속적으로 등장해 경쟁 구도가 빠르게 변하며, 규제 당국에 제시한 경쟁사 목록조차 몇 주 만에 outdated될 정도라고 설명한다. ## Adobe와 Figma의 차이 - Adobe는 과거 Figma와 경쟁하려고 Adobe XD를 운영했지만, 새로운 기능 개발을 중단하고 유지보수 모드로 전환했다. - Photoshop과 Illustrator는 사진 편집과 고급 일러스트레이션에 강점을 가진다. - 반면 Figma는 팀 협업, 웹·앱 UI 설계, 프로토타이핑과 개발 연계에 특화돼 있어 두 회사의 핵심 제품과 사용 목적이 다르다고 주장했다. ## 인수합병의 기대 효과 - Figma는 협업형 제품 디자인과 개발에 집중한다. - Adobe는 전 세계 수억 명이 사용하는 창작 도구와 기술을 보유하고 있다. - 양사의 강점이 상호보완적이므로 결합하면 다음과 같은 효과가 가능하다고 설명했다. - 디자인과 창작 도구 간 연결 강화 - 더 많은 사용자를 위한 제품 개발·창작 기능 제공 - AI와 Adobe의 기술을 활용한 새로운 디자인 경험 - 디지털 제품 제작과 시각적 창작 영역의 통합 - 그러나 이러한 기대는 규제 승인이라는 전제에 달려 있었고, 결국 15개월간의 심사 끝에 승인 가능성이 없다고 판단해 거래가 종료됐다. 실질적으로 이 글은 인수합병의 장점을 설명하는 Figma의 입장을 담은 FAQ이지만, 최종적으로는 거래가 무산됐다는 후속 결과까지 함께 고려해야 한다.

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

FigmaAI프로토타이핑프로덕트 디자인+4

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

Config 202

Figma는 커뮤니티 중심의 컨퍼런스인 Config 2024를 더 많은 참여와 원활한 경험을 제공하는 행사로 발전시키겠다고 밝혔다. 2024년 6월 26~27일 샌프란시스코에서 열리며, 디자인·AI·개발·디자인 시스템 등을 주제로 75명 이상의 연사가 참여한다. 참가자 피드백을 반영해 세션 예약제, 개발자 콘텐츠 확대, 교류 시간 확보, 다국어 지원 등을 도입한다. ## 커뮤니티 중심의 컨퍼런스 - Config는 단순한 제품 발표회가 아니라 다음을 위한 행사로 소개된다. - 커뮤니티 구성원 간의 교류 - 실무 중심의 학습과 아이디어 공유 - 제품을 만드는 사람들의 작업과 전문성에 대한 축하 - 2020년 첫 오프라인 행사에서 약 1,000명의 Figma 사용자를 모은 이후, Figma와 커뮤니티의 성장에 맞춰 행사의 규모와 범위를 확장해 왔다. - 팬데믹 이후 첫 대규모 오프라인 Config에서 얻은 경험을 2024년 행사 운영에 반영한다. ## 세션 예약제로 좌석 보장 - 참가자는 원하는 브레이크아웃 세션을 사전에 예약할 수 있다. - 예약한 세션에 제시간에 도착하면 좌석을 보장받는다. - 매우 얼리버드 티켓 구매자는 다른 참가자보다 24시간 먼저 세션을 예약할 수 있다. - 인기 세션의 긴 대기 줄과 좌석 부족 문제를 줄이려는 개선이다. ## 개발자를 위한 프로그램 확대 - 제품 제작에 참여하는 모든 직군을 지원하기 위해 개발자 대상 콘텐츠를 늘린다. - 구체적인 세부 프로그램은 추후 공개될 예정이지만, 기존 디자인 중심 구성에서 개발 관련 트랙을 강화하는 방향이다. - 디자인 시스템, 개발, AI 등 여러 분야를 아우르는 발표가 예정되어 있다. ## 교류와 현장 경험 개선 - 참가자들이 네트워킹하거나 휴식할 수 있도록 일정에 더 많은 여유 시간을 배치한다. - 행사 공간을 확장해 다음과 같은 현장 문제를 개선한다. - 대기 줄 단축 - 이동 및 좌석 공간 확대 - 참가자 동선 개선 - 전반적인 행사 운영의 원활함 향상 - 강연을 연속해서 듣는 데 그치지 않고 커뮤니티와 직접 교류할 수 있는 경험을 강화한다. ## 글로벌 참가자를 위한 다국어 지원 - 온라인 참가자에게 영어, 프랑스어, 독일어, 일본어, 한국어, 스페인어 자막을 제공한다. - 오프라인 참가자를 위해 동시통역과 번역을 지원한다. - 향후 더 많은 언어를 행사에 추가해 글로벌 커뮤니티의 접근성을 높일 계획이다. ## 리더십 트랙 확대 - 전년도 긍정적인 반응을 바탕으로 임원 및 리더 대상 프로그램인 Leadership Collective를 확대한다. - 새로운 임원 브리핑 센터를 마련한다. - 리더를 위한 콘텐츠와 네트워킹 기회를 늘린다. - 등록 과정에서 초대 전용 트랙에 지원할 수 있다. ## 참가 및 발표자 모집 - 얼리버드 티켓은 수량이 제한되어 있으며, 자격 요건을 충족하는 참가자를 위한 장학금도 제공한다. - 참가자 의견과 발표자 제안을 이메일이나 소셜미디어로 받고 있다. - 발표 또는 세션 진행을 원하는 사람은 2023년 12월 31일까지 발표자 모집에 지원할 수 있었다. - 행사는 2024년 6월 26~27일 샌프란시스코에서 개최될 예정이었다. Config 2024는 규모만 키우는 대신 좌석 예약, 개발자 콘텐츠, 다국어 지원, 네트워킹 시간처럼 참가자의 실제 불편을 해결하는 방향으로 설계된 행사다. 비슷한 컨퍼런스를 기획한다면 참가자 피드백을 운영 방식에 직접 반영하고, 학습·교류·접근성을 균형 있게 강화하는 것이 핵심이다.

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

FigmaAI디자인 시스템software-development+1

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

2023년 피그

지난 3년간 업무 방식이 크게 바뀌었지만, 디자이너의 전반적인 직무 만족도는 오히려 높아진 것으로 나타났다. Figma가 유럽·아시아태평양 지역 디자이너 470명을 조사한 결과, 원격·하이브리드 근무와 협업 방식의 변화가 생산성과 관계 개선에 기여했으며 디자인의 조직 내 가치와 고용 전망도 상승했다. 특히 개인 기여자와 경영진의 적극적인 디자인 참여가 긍정적인 인식과 연결됐다. ### 조사 목적과 범위 - Figma는 변화한 근무 환경이 디자이너에게 미친 영향을 파악하기 위해 ‘State of the Designer’ 보고서를 작성했다. - 유럽과 아시아태평양 지역의 디자이너 470명을 대상으로 최근 3년간의 변화를 조사했다. - 주요 조사 항목은 다음과 같다. - 원격·하이브리드 근무가 협업과 생산성에 미친 영향 - 업무 방식 변화에 따른 직무 만족도 - 긍정적인 비즈니스 성과와 연결되는 협업 행동 - 디자이너가 업무에서 행복과 성취감을 느끼는 요인 ### 디자이너의 직무 만족도는 상승 - 응답자의 **69%가 팬데믹 이전보다 현재 직무 만족도가 높아졌다**고 답했다. - 조사한 모든 직급 중에서는 **개인 기여자(IC)의 82%가 긍정적인 변화**를 경험했다고 답해 가장 높은 비율을 보였다. - 디자이너들은 자신이 일하는 장소와 방식을 더 많이 통제할 수 있다고 느꼈다. - 원격 근무 비중이 높아졌음에도 업무 흐름과 디지털 제품의 품질이 개선됐다고 인식했다. ### 원격 근무를 가능하게 한 협업 방식의 변화 - 디자이너들은 원격 환경에서 협업을 유지하기 위해 협업 습관 자체를 바꾸고 있다. - 팀 회의에서 단순히 진행 상황을 공유하는 대신, 여러 사람이 함께 디자인하고 문제를 해결하는 방식이 활용되고 있다. - 디자이너들은 이러한 공동 작업 방식이 원격 근무의 한계를 줄이고 업무 효율을 높였다고 평가했다. - 변화한 협업 방식은 디자이너들이 원격 근무를 효과적으로 정착시키는 데 중요한 역할을 했다. ### 디자인의 조직 내 가치와 고용 전망 상승 - 디자인 직업에 대해 긍정적으로 느끼는 디자이너가 부정적으로 느끼는 디자이너보다 **약 5배 많았다**. - 기업과 리더들이 디자인을 단순한 실행 부서가 아니라 비즈니스 전략과 문제 해결을 위한 사고방식으로 보기 시작한 점이 영향을 미쳤다. - 응답자의 **69%는 자신의 고용 선택지가 ‘개선됐다’ 또는 ‘크게 개선됐다’**고 평가했다. - 유명 기업의 CEO들이 디자인의 전략적 가치를 강조하는 사례가 늘면서 디자이너의 역할에 대한 자신감도 커졌다. ### 경영진의 디자인 참여가 주는 효과 - 디자이너들은 경영진과 리더가 디자인 업무에 직접 참여할 때 자신의 역할이 더 중요하게 인정받는다고 느꼈다. - 긍정적인 사례로 다음과 같은 행동이 언급된다. - 경영진이 디자인 파일에 직접 참여 - 디자인 결과물에 구체적인 피드백 제공 - 제품 개발 과정을 직접 경험 - 이러한 참여는 디자인을 조직의 핵심 의사결정 과정과 연결하고, 디자이너의 직무 만족도와 소속감을 높이는 신호로 작용한다. 조직은 원격 근무를 단순한 장소의 변화로 보지 말고, 함께 디자인하고 피드백하는 협업 구조까지 재설계해야 한다. 또한 경영진이 디자인 과정에 직접 참여하고 디자인을 비즈니스 전략의 일부로 인정할수록 디자이너의 만족도와 조직 내 영향력을 함께 높일 수 있다.

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

Figma사용자 경험collaborative-designdesign-thinking+2

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

Little Big Updates: 위대한 도약

Figma는 화려한 신기능뿐 아니라 사용자가 매일 반복하는 작은 불편을 줄이는 품질 개선이 제품에 더 큰 영향을 줄 수 있다고 주장한다. 특히 하루 수백 번 사용하는 동작을 한 번 덜 클릭하게 하거나 버그를 해결하는 일은 발표 무대에 오를 만한 기능보다 실제 업무 흐름을 크게 바꿀 수 있다. 이를 체계적으로 실천하기 위해 Figma는 매년 ‘Little Big Updates’라는 개선 활동을 진행한다. ## 사용자의 반복 작업에 집중하는 이유 - 디자이너들은 일주일에 40시간 이상 Figma를 사용하며, 도구를 익히는 과정 자체가 전문성을 쌓는 일과 비슷하다. - 사용자가 제품에 많은 시간과 노력을 투자하는 만큼 Figma는 지속적으로 도구를 개선할 책임이 있다고 본다. - 사용자가 자주 반복하는 작은 행동을 개선하면, 사용 빈도가 낮은 대형 기능보다 더 큰 누적 효과를 낼 수 있다. - 작은 변화는 사용자가 처음부터 요구하지 않았더라도 실제 사용 경험을 크게 향상시킬 수 있다. ## ‘Little Big Updates’의 시작 - Figma는 초기부터 디자이너들의 의견을 듣고 가능한 한 자주 업데이트를 출시했다. - 평소에는 매주 한 번 업데이트했지만, 네 가지 업데이트를 월요일부터 목요일까지 하루에 하나씩 공개한 일이 계기가 됐다. - 사용자들은 매일 새로운 선물을 받는 것처럼 느꼈고, 이 방식이 ‘Little Big Updates’라는 이름으로 발전했다. - 각각의 작은 개선에 주목할 기회를 제공하면 사용자가 그 변화의 가치를 더 잘 인식할 수 있다. ## 작은 개선이 만드는 큰 영향 - 기능 추가는 제품에 새로운 능력을 부여하는 일이지만, 품질 개선은 기존 기능을 더 빠르고 편하게 만드는 일이다. - “한 번 덜 클릭하게 만들었다”와 같은 변화는 홍보하기 어렵지만, 사용자가 반복해서 경험하기 때문에 영향력이 크다. - Figma의 사례: - 과거에는 붙여넣기 결과가 화면의 임의 위치에 나타나 불편했지만, 이를 개선해 반복적인 좌절을 없앴다. - 프레임을 전환할 때 텍스트를 선택하려고 여러 번 더블클릭해야 하는 문제를 줄였다. - 붙여넣기처럼 하루에도 수백 번 사용하는 동작의 개선은 화려한 신기능보다 사용자의 작업 흐름에 더 큰 효과를 줄 수 있다. ## 대형 기능과 작은 기능의 우선순위 결정 - AI for FigJam 같은 대형 기능은 다른 개선 사항과 어떻게 결합되는지, 제품 전체 전략에 어떻게 들어맞는지를 신중하게 검토해야 한다. - 대형 기능은 자동차에 큰 여행 가방을 먼저 싣는 것처럼 선행 조건과 전체적인 배치가 중요하다. - 반대로 작은 기능은 지나치게 중앙집중적으로 우선순위를 정할 필요가 없다. - 각 팀은 자신이 담당하는 기능과 사용자의 불편을 가장 잘 이해하므로, 품질 개선의 우선순위를 팀에 분산하는 것이 효과적이다. - 조직 전체가 품질의 중요성을 공유하되, 구체적으로 무엇을 개선할지는 현장 팀이 결정하도록 해야 한다. ## 실용적인 적용 방향 - 기능의 신규성보다 사용 빈도와 반복되는 불편의 크기를 기준으로 개선 대상을 찾는다. - 오류, 불필요한 클릭, 어색한 선택 방식처럼 작아 보이는 문제를 사용자 피드백과 실제 사용 사례로 평가한다. - 작은 개선도 별도로 공개하고 기록해 팀과 사용자가 그 가치를 인식하도록 한다. - 대형 기능은 전략적으로 통합하고, 세부적인 사용성 개선은 각 팀이 빠르게 실행하도록 권한을 위임하는 것이 좋다.

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

FigmaAIfigjam프로덕트 디자인+2

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

주목하고 좋아하게

피그마 Creator Fund는 커뮤니티를 위해 무료 위젯·플러그인·템플릿 등을 만드는 창작자를 지원하며, 13명에게 약 30만 달러를 지원했다. 이 글은 그중 실용적이고 어려운 문제를 해결한 프로젝트들을 소개하고, 창작자가 명확한 비전과 시각 자료를 바탕으로 자신이 관심 있는 아이디어를 발전시키라고 권한다. 제공된 본문에는 세 프로젝트 중 **Figma to Code** 사례가 중심적으로 포함되어 있다. ## Creator Fund의 목적과 성과 - Figma Community에서 누구나 사용할 수 있는 무료 리소스 제작을 지원한다. - 2023년 3월 시작 이후: - 수백 건의 지원서를 접수했다. - 9개국 13명의 창작자에게 약 30만 달러를 지원했다. - 디자인 시스템 튜토리얼, Figma 개발자 플랫폼 학습 플러그인 등 다양한 결과물이 나왔다. - Figma는 단순히 흥미로운 프로젝트보다 다음과 같은 프로젝트를 선호한다. - 해결하기 어려운 문제를 다루는 프로젝트 - 사용자의 시간을 절약하는 실용적인 도구 - 커뮤니티 전체가 무료로 사용할 수 있는 리소스 ## Creator Fund 지원서 작성 시 고려할 점 - 만들고 싶은 것이 무엇인지 명확한 비전을 제시해야 한다. - 몇 문장으로 급하게 작성하기보다 아이디어와 목표를 충분히 구체화해야 한다. - 추가 설명을 요청받을 수 있으므로 시각 자료를 준비하는 것이 좋다. - 심사위원이 원하는 것을 추측하기보다 자신이 실제로 관심 있는 문제를 선택해야 한다. - 지원 프로그램은 단순한 자금 제공을 넘어, 창작자가 프로젝트를 완성하도록 돕는 역할을 한다. ## Figma to Code: 디자인을 코드로 변환 - 브라질 쿠리치바의 Bernardo Ferrari가 만든 프로토타이핑 플러그인이다. - Figma 레이아웃을 다음 형식의 코드로 변환한다. - HTML - Tailwind - Flutter - SwiftUI - 디자인 시안을 실제 프론트엔드 코드로 빠르게 옮길 수 있어 프로토타이핑과 초기 개발 과정을 단축한다. - 디자인을 기반으로 제품을 만들고 사업화하려는 창작자에게 특히 유용하다. ## 코로나19 프로젝트에서 시작된 플러그인 - Bernardo는 코로나19 확산 정보를 제공하는 브라질 지역 웹사이트의 유지보수를 맡으며 플러그인을 구상했다. - 웹 개발 경험이 2015년 이후 거의 없었기 때문에 Figma에서 디자인한 화면을 직접 코드로 재현하는 방식으로 작업했다. - 기존 디자인-코드 변환 플러그인에는 다음과 같은 한계가 있었다. - 코드 생성 속도가 느림 - 여러 단계를 거쳐야 함 - 전체 기능을 사용하려면 유료 결제가 필요함 - Figma API 지원 범위가 좁고 오토 레이아웃 같은 기능이 빠짐 - 하나의 언어나 프레임워크만 지원함 - 반응형 디자인과 접근성을 충분히 고려하지 않음 - 이를 해결하기 위해 약 두 달 동안 플러그인을 개발했고, 2020년 7월 출시했다. ## Creator Fund를 통한 기능 개선 - 출시 후 몇 년 동안 Figma와 웹 프레임워크가 크게 바뀌었지만, 플러그인은 이를 따라가지 못했다. - 초기 버전은 다음과 같은 제한이 있었다. - 패딩을 수직·수평 방향으로만 설정 가능 - 오토 레이아웃에서 `min`과 `fixed` 정도만 지원 - Creator Fund 지원을 계기로 플러그인을 유료화하지 않고 대대적으로 개선할 기회를 얻었다. - Figma의 새로운 Dev Mode를 지원하는 작업도 진행했으며, 2023년 Config에서 업데이트를 공개했다. - 지원금은 기존 프로젝트를 유지하는 데 그치지 않고, 최신 Figma 기능과 개발 환경에 맞춰 제품을 발전시키는 촉진제가 되었다. ## 실용적인 시사점 - 디자인-코드 변환 도구는 단순한 코드 생성뿐 아니라 반응형 레이아웃, 접근성, 최신 Figma API 지원까지 고려해야 한다. - 무료 도구를 지속적으로 유지하려면 개발 비용과 기능 업데이트를 지원하는 구조가 필요하다. - Creator Fund에 지원하려는 창작자는 명확한 문제 정의, 구체적인 해결 방법, 실제 사용자가 얻는 이점을 함께 제시하는 것이 좋다. - 제공된 글 본문은 Figma to Code 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.

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

Figmadesign-to-codeHTMLfigma-plugins+3

figma·2023년 10월 25일원문

디자인과 창의성의 미래 (새 탭에서 열림)

피그마와 어도비는 15개월에 걸친 규제 검토 끝에, 당국의 승인을 얻을 수 있는 현실적인 경로가 없다는 판단하에 인수 합병 계약을 공식적으로 종료하기로 합의했습니다. 이번 결정은 양사의 기술적 결합이 가져올 혁신적인 디자인 생태계에 대한 비전을 뒤로한 채 각자의 길을 걷게 됨을 의미합니다. 비록 합병은 무산되었으나, 피그마는 실시간 협업과 생성형 AI, 그리고 도구 간의 심리스한 연결성이 주도할 미래 디자인 워크플로우의 청사진을 제시하며 창의성의 미래를 향한 의지를 밝혔습니다. **합병 중단 배경과 규제 환경** * 2023년 12월 18일, 피그마와 어도비는 시장 독점 및 경쟁 저해를 우려하는 규제 당국의 높은 벽을 넘지 못하고 인수 포기를 선언함. * 양사는 장기간의 검토 과정 끝에 더 이상 승인 가능성이 없다는 점에 상호 동의하며 15개월간의 인수 절차를 마무리함. **멀티플레이어 협업 기술의 확장** * 피그마의 강점인 실시간 멀티플레이어 환경을 어도비의 전문 저작 도구(예: 3D 디자인)에 이식하여 협업 효율 극대화 추진. * 한 디자이너가 3D 모델을 구축하는 동안 다른 디자이너가 실시간으로 조명이나 텍스처를 조정하는 동시 작업 환경 구상. * 전문 툴 학습 시 숙련자가 초보자와 같은 파일 내에서 실시간 가이드를 제공하는 교육적 효과 기대. **심리스한 에셋 연동과 디자인 시스템 통합** * Adobe Substance 3D에서 제작한 에셋을 피그마 목업에 배치하고, 원본 수정 시 피그마 내 에셋도 자동으로 최신화되는 실시간 동기화 기술. * 피그마의 제품 디자인과 어도비 에셋 간의 디자인 시스템(컬러 팔레트, 폰트 등) 공유 및 Adobe Fonts의 피그마 내 직접 활용. * 완성된 피그마 프로토타입을 마케팅 영상에 직접 삽입하여, 제품 디자인 변경이 영상 소스에 즉각 반영되는 워크플로우 구축. **생성형 AI '파이어플라이'와의 기술적 융합** * 어도비의 생성형 AI 모델인 '파이어플라이(Firefly)'를 피그마 워크플로우에 통합하여 UI 컨셉에 맞는 배경을 즉석에서 생성. * 반응형 디자인 대응을 위해 이미지를 자연스럽게 확장하는 '제너레이티브 필(Generative Fill)' 기능의 피그마 내 구현. * 브레인스토밍 단계의 스티키 노트를 지능적으로 분석하여 순식간에 시각화된 스토리보드로 전환하는 자동화 기능 구상. 기업 간의 물리적 합병은 멈추었으나, 피그마가 제시한 '도구 간의 경계 없는 연결'과 '실시간 협업의 확장'이라는 방향성은 향후 디자인 도구 시장의 중요한 표준이 될 것입니다. 디자이너들은 개별 툴의 숙련도를 넘어, AI와 실시간 협업 기능을 활용해 아이디어에서 프로토타입까지의 도달 시간을 단축하는 효율적인 워크플로우 구축에 주목해야 합니다.

Figma디자인 시스템프로토타이핑생성형 AI+4

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

Figma, 유럽 자동차 산업

Figma는 유럽 자동차 업계의 정보보안 표준인 TISAX 평가에 참여했다고 발표했습니다. 이를 통해 자동차 업계 고객이 Figma에서 관리하는 디자인 데이터가 업계 기준에 따라 안전하게 보호되고 있음을 확인할 수 있다고 강조합니다. 이번 참여는 EU Cloud Code of Conduct 인증과 EU 내 파일 호스팅 옵션 등 Figma의 유럽 시장 보안·규제 대응 전략의 일부입니다. ## TISAX와 유럽 자동차 산업의 정보보안 - TISAX(Trusted Information Security Assessment Exchange)는 독일자동차산업협회(VDA)를 대신해 ENX Association이 운영하는 정보보안 평가 체계입니다. - 특히 독일을 포함한 유럽 자동차 산업에서 데이터 보안과 보호 수준을 판단하는 기준으로 활용됩니다. - 자동차 제품 디자이너와 기업 고객은 TISAX 참여를 통해 Figma가 디자인 작업물을 업계 보안 요구사항에 맞게 관리한다는 점을 확인할 수 있습니다. - TISAX는 일반 대중을 위한 인증 결과 공개 체계가 아니며, 관련 결과는 ENX 포털을 통해 확인하도록 안내됩니다. ## Figma의 TISAX 평가 참여 정보 - **회사명:** Figma, Inc. - **Scope ID:** S3XH77 - **Assessment ID:** AV01AK-2 - 공식 참여 결과는 ENX의 TISAX 평가 결과 포털에서 조회할 수 있습니다. - Figma는 이번 참여를 통해 단순한 디자인 협업 도구를 넘어 기업의 보안·규제 준수 요구까지 지원하겠다는 입장을 밝혔습니다. ## 유럽 고객을 위한 추가 보안 및 데이터 거버넌스 - Figma는 TISAX 참여 외에도 EU Cloud Code of Conduct 인증을 획득했습니다. - 해당 인증은 클라우드 서비스의 데이터 보호와 규정 준수 체계를 검토하는 유럽 차원의 프로그램입니다. - Figma와 FigJam 파일을 **유럽연합 내에서 호스팅할 수 있는 옵션**도 제공하고 있습니다. - 이러한 조치는 유럽 고객의 데이터 지역성, 보안, 규제 준수 요구에 대응하기 위한 것입니다. ## 기업 고객을 겨냥한 보안 신뢰성 강화 - Figma는 기술, 금융, 패션, 자동차 등 다양한 산업의 디자인·엔지니어링·제품 팀을 대상으로 서비스를 제공합니다. - 산업별로 민감한 제품 정보와 설계 데이터가 오가는 만큼, 협업 기능뿐 아니라 저장·관리 과정의 보안도 중요한 경쟁 요소입니다. - TISAX 참여는 특히 자동차 제조사와 협력사처럼 엄격한 공급망 보안 기준을 적용받는 조직의 도입 검토에 긍정적으로 작용할 수 있습니다. 자동차 업계에서 Figma를 도입하려는 기업은 ENX 포털에서 제공되는 TISAX 참여 정보를 확인하고, 실제 계약 전에는 필요한 평가 범위와 데이터 호스팅 지역이 조직의 보안 정책에 부합하는지 별도로 검토하는 것이 좋습니다.

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

Figmainformation-securitycompliancecloud-hosting+1

figma·2023년 10월 17일원문

FedRAMP를 향한 (새 탭에서 열림)

피그마(Figma)는 미국 연방 정부의 보안 인증 제도인 FedRAMP(Federal Risk and Authorization Management Program) 'Moderate' 등급의 인증 절차를 본격적으로 시작하며 공공 부문으로의 확장을 공식화했습니다. 이번 인증 추진은 공공 부문의 디지털 전환과 사용자 경험 개선을 지원하기 위한 핵심 단계로, 이를 통해 정부 기관은 피그마의 협업 기능을 안전하게 활용하여 더 나은 공공 서비스를 설계할 수 있게 됩니다. 피그마는 전담 팀을 구성하고 보안 표준을 강화함으로써 공공 분야에서도 민간 수준의 혁신적인 디자인 협업 환경을 구축하는 것을 최종 목표로 하고 있습니다. ### FedRAMP 인증 추진 배경과 의미 * 미국 정부 데이터를 다루는 애플리케이션에 필수적인 보안 인증인 FedRAMP 'Moderate' 등급 획득을 위한 '진행 중(in process)' 상태로 Marketplace에 등재되었습니다. * 이는 피그마가 연방 정부의 엄격한 보안 및 개인정보 보호 표준을 준수하기 위한 기술 감사를 거쳤으며, 최종 인증을 위한 마지막 단계에 진입했음을 의미합니다. * 팬데믹 이후 가속화된 공공 부문의 원격·하이브리드 근무 환경에서, 보안이 담보된 클라우드 기반 협업 도구에 대한 수요를 충족시키기 위한 결정입니다. ### 공공 부문에 제공하는 기술적 가치 * 정부 기관, 계약업체 및 공공 프로젝트 수행자들이 피그마 내에서 직접 소프트웨어를 설계하고 신속하게 프로토타입을 테스트할 수 있는 환경을 제공합니다. * 플랫폼에 구애받지 않는 브라우저 기반 협업 특성을 통해, 기술 도입이 늦었던 정부 조직 내에서도 부서 간 장벽을 허물고 디자인 반복 주기를 단축할 수 있습니다. * 더 접근성 높고 포용적인 디자인을 가능하게 함으로써, 궁극적으로 정부 애플리케이션의 UI/UX를 개선하고 대국민 서비스의 신뢰도를 높이는 데 기여합니다. ### 조직 역량 강화 및 향후 전략 * Zscaler, Datadog 등에서 공공 분야 경험을 쌓은 전문가를 영입하여 민간 부문의 성공 사례를 공공 부문의 요구사항에 맞춰 이식하는 0 to 1 전략을 실행 중입니다. * 내부적으로 상업용 팀과 정부 전담 팀 간의 양방향 지식 공유 체계를 구축하여, 서로 다른 규제 환경에서도 최적의 사용자 경험을 제공할 수 있도록 역량을 결집하고 있습니다. * 인증 완료 이후에는 연방 정부 규모의 대규모 데이터를 안전하게 호스팅하고, 복잡한 이해관계자들이 참여하는 공공 프로젝트의 효율성을 극대화할 예정입니다. 피그마의 이번 행보는 보안이 최우선인 공공 영역에서도 현대적인 협업 디자인 도구가 필수적임을 시사합니다. 공공 서비스 관련 프로젝트를 운영하거나 준비 중인 조직이라면, 피그마의 FedRAMP 인증 완료 이후 제공될 고수준의 보안 환경을 활용해 정부 표준에 부합하는 디지털 혁신을 계획해 볼 수 있습니다.

Figma프로토타이핑사용자 인터페이스security+4