Figma/디자인 시스템

246 개의 포스트

figma3분 읽기큐레이션 요약

듀오링고 메소드:

Duolingo Math 팀은 디자인과 엔지니어링을 분리해 순차적으로 넘기는 전통적인 핸드오프 대신, 처음부터 함께 아이디어를 만들고 프로토타입을 반복 검증하는 방식을 택한다. 디자이너·엔지니어·PM이 실시간으로 협업하며 실제 작동하는 경험을 바탕으로 결정하기 때문에, 새로운 제품에서도 빠르게 방향을 찾고 완성도를 높일 수 있다. 핵심은 완벽한 설계를 먼저 확정하는 것이 아니라, 만들고 보여주고 수정하는 과정을 팀 전체의 공동 작업으로 만드는 데 있다. ## 선형적인 핸드오프의 한계 - 디자인에서 엔지니어링으로 작업을 한 번에 넘기는 방식은 제품 개발이 실제로 진행되는 방식과 맞지 않는다. - 특히 Duolingo Math처럼 새로운 학습 모듈과 게임을 처음부터 만들어야 하는 팀은 기존 템플릿이나 검증된 청사진을 활용하기 어렵다. - 상호작용과 애니메이션이 많은 기능은 문서나 정적인 화면만으로 구현 난이도와 사용자 경험을 정확히 판단하기 어렵다. - 따라서 디자인과 엔지니어링이 초기 단계부터 지속적으로 연결되어야 한다. ## 초기 단계부터 함께 아이디어 구상 - 디자이너가 혼자 작업을 시작하지 않고, 디자이너·엔지니어·제품 관리자가 공유된 FigJam 파일에서 함께 아이디어를 낸다. - 방향이 정해지면 디자이너가 Figma에서 화면과 동작, 모션을 구체화한다. - 엔지니어도 이 단계에 적극 참여해 복잡한 상호작용과 애니메이션을 미리 검토한다. - 구현하기 어려운 부분은 Figma 댓글 등으로 조기에 지적해 불필요한 설계 수정을 줄인다. - Jira를 Figma와 직접 연결해 도구 간 맥락 전환을 줄이고, 디자인과 개발 작업의 흐름을 유지한다. ## 빠른 프로토타이핑과 반복 실험 - 디자인 시안에 합의한 뒤 엔지니어가 Duolingo 디자인 시스템의 컴포넌트를 활용해 초기 프로토타입을 빠르게 만든다. - 디자이너와 엔지니어가 작동하는 프로토타입을 만든 후 팀 회의에서 직접 테스트하고 피드백을 받는다. - Slack 채널에서 디자이너는 Figma 파일을, 엔지니어는 구현된 프로토타입을 공유하며 질문과 의견을 주고받는다. - 각 기능마다 다음 순환을 반복한다. - 프로토타입 제작 - 팀 테스트 - 피드백 수집 - 수정 및 재검증 - Duolingo의 “말로 설명하기보다 직접 보여준다(show don’t tell)”는 원칙에 따라, 아이디어의 타당성을 논의만 하지 않고 실제 경험으로 확인한다. - 프로토타입은 설계를 미리 완성하기 위한 결과물이 아니라, 제품이 실제로 어떻게 느껴지는지 확인하고 핵심 결정을 내리기 위한 도구다. ## 함께 다듬고 출시하기 - 지속적인 협업을 통해 개발 중에도 빠르게 의사결정을 내리고 기능을 다듬을 수 있다. - 속도가 중요할 때는 애니메이션을 단순화하는 등 기능을 핵심 경험 위주로 축소한다. - 교육용 게임의 시장 적합성을 확인할 때도 처음부터 완성도 높은 게임 두 개를 만드는 대신, 단순한 디자인과 최소한의 메커니즘을 가진 게임부터 빠르게 제작했다. - 어떤 기능을 우선할지 미리 정한 뒤, 일곱 가지 프로토타입을 반복적으로 제작하며 사용자에게 어떤 경험이 반응을 얻는지 확인했다. - 이 방식은 대규모 기능을 장기간 개발한 뒤 실패하는 위험을 낮추고, 초기 학습을 제품 방향에 빠르게 반영하게 한다. ## 실무에 적용할 때의 시사점 - 디자인 완료 후 개발을 시작하기보다, 초기 기획부터 디자이너와 엔지니어를 함께 참여시킨다. - 정적 시안보다 작동하는 작은 프로토타입을 우선 제작한다. - 기능별로 짧은 제작·테스트·수정 주기를 운영한다. - 속도와 학습이 중요한 초기 단계에서는 부가 기능보다 핵심 사용자 경험에 집중한다. - 협업 도구를 연결하고 공유 채널을 마련해 작업 맥락과 피드백을 실시간으로 유지한다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

두 매개변수 구조

Figma는 변수(variables)와 컴포넌트 속성(component properties)을 서로 다른 구조로 구축했지만, 두 시스템이 같은 레이어 속성에 동시에 연결될 수 있어 렌더링 불일치와 학습·유지보수의 어려움이 발생했습니다. 이를 해결하기 위해 두 기능을 하나의 파라미터 아키텍처로 통합했고, 그 결과 사용자 경험의 일관성, 개발 속도, 향후 제품 확장성을 개선했습니다. ## 파라미터 시스템의 역할 - Figma의 반응형 디자인, 타이포그래피, 애니메이션, 상태 머신 등은 값을 한 곳에서 설정하고 여러 요소에 전파하는 파라미터 개념을 기반으로 합니다. - 값이 변경되면 해당 값을 참조하는 레이어의 속성이 즉시 갱신됩니다. - 변수와 컴포넌트 속성은 모두 “한 번 설정하고 여러 곳에 적용하는” 기능이지만, 서로 다른 문제를 해결하기 위해 별도로 발전했습니다. ## 컴포넌트 속성: 범위가 제한된 파라미터 - 컴포넌트 속성은 2022년에 출시됐으며, 디자인과 코드 사이의 간극을 줄이기 위한 목적이었습니다. - 특정 컴포넌트 내부 레이어에만 적용되는 **범위 제한형 파라미터(scoped parametrization)** 를 제공합니다. - 디자인 시스템 작성자는 버튼 등의 컴포넌트에 Boolean, 텍스트, 인스턴스 교체 등의 속성을 정의할 수 있습니다. - 사용자는 컴포넌트 내부 구조를 직접 훼손하지 않고, 공개된 속성만 수정할 수 있습니다. - 코드에서 컴포넌트의 props를 사용하는 방식과 유사해 디자이너와 개발자가 동일한 mental model을 공유할 수 있게 됐습니다. - 이 구조는 Figma Sites, Figma Make, Code Connect처럼 디자인을 실제 웹·코드 결과물로 연결하는 기능의 기반이 됐습니다. ## 변수: 전역적이고 문맥을 지원하는 파라미터 - 변수는 컴포넌트 내부에 국한되지 않고 프로젝트 전반에서 사용할 수 있는 더 넓은 범위의 파라미터입니다. - 색상, 크기 등 다양한 타입을 지원하며 디자인 토큰을 표현하는 데 적합합니다. - 라이트 모드와 다크 모드처럼 하나의 변수에 여러 문맥별 값을 정의할 수 있습니다. - 예를 들어 배경색 변수 하나에 기본, 보조, 강조 값과 각 모드의 실제 색상을 연결할 수 있습니다. - 이러한 특성 덕분에 디자인 시스템의 토큰을 중앙에서 관리하고 여러 화면에 일관되게 적용할 수 있습니다. ## 두 아키텍처를 분리했을 때의 문제 - 변수와 컴포넌트 속성이 서로 다른 내부 구조를 사용하면서 기능 간 동작이 일관되지 않았습니다. - 하나의 레이어 속성에 변수와 컴포넌트 속성이 동시에 연결되는 상황이 발생할 수 있었습니다. - 이 경우 편집기에서 어떤 값이 우선하는지 예측하기 어렵고 렌더링 결과가 일치하지 않을 수 있었습니다. - 사용자 입장에서는 비슷한 기능을 서로 다른 방식으로 배워야 했습니다. - 개발팀 역시 기능을 추가할 때 두 아키텍처를 각각 수정하고 호환성을 검토해야 했습니다. - 다른 Figma 제품에 파라미터 기능을 확장하려 해도 기존의 기술적 복잡성을 함께 가져가야 했습니다. ## 단일 파라미터 아키텍처로의 통합 - Figma는 변수와 컴포넌트 속성을 공통된 내부 파라미터 모델 위에서 동작하도록 통합했습니다. - 두 기능의 사용자-facing 개념은 유지하면서도, 값의 정의·바인딩·전파를 처리하는 기반 구조를 공유하게 했습니다. - 동일한 레이어 속성에 여러 파라미터가 연결되는 경우도 일관된 규칙으로 처리할 수 있게 됐습니다. - 공통 아키텍처를 통해 편집기 내 예상치 못한 동작과 렌더링 불일치를 줄였습니다. - 새로운 파라미터 기능이나 제품을 개발할 때 기존 시스템을 각각 구현할 필요가 없어져 개발 속도도 향상됐습니다. ## 통합이 가져온 확장성 - 컴포넌트의 구조적 제어와 변수의 전역적·문맥적 제어를 하나의 기반에서 조합할 수 있습니다. - 디자인 토큰, 컴포넌트 속성, 코드 생성 기능을 더 일관된 방식으로 연결할 수 있습니다. - 향후 Figma의 다른 제품에서도 동일한 파라미터 개념과 동작 규칙을 재사용할 수 있습니다. - 이번 작업은 단순한 내부 리팩터링이 아니라, 디자인 도구 전반에서 파라미터화를 확장하기 위한 기반을 마련한 사례입니다. 실무적으로는 컴포넌트의 외부에 노출할 사용자 조정 항목에는 컴포넌트 속성을, 여러 화면과 모드에서 공유할 디자인 토큰에는 변수를 사용하는 것이 적절합니다. 두 기능이 통합된 아키텍처 위에서 동작하더라도 각 기능의 범위와 목적은 여전히 다르므로, 재사용 범위에 따라 선택하는 것이 좋습니다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

제품 아이콘의 제작 과정

Figma의 제품 아이콘은 단순한 장식이 아니라 각 제품의 정체성과 기능을 작은 공간에 압축한 상징이다. 디자이너 Tim Van Damme는 일관된 제작 규칙을 바탕으로 제품의 본질을 탐구하고, 수십~수백 개의 시안을 반복 실험해 최종 아이콘을 완성한다. 정해진 공식은 창의성을 제한하는 것이 아니라, 다양한 아이디어를 하나의 제품군으로 묶는 기반이 된다. ## 일관성을 만드는 아이콘 제작 가이드라인 - Figma에 공식적인 아이콘 시스템이 없던 상황에서 Tim이 직접 제작 원칙을 수립했다. - 주요 규칙은 다음과 같다. - 선 두께는 1픽셀로 통일한다. - 내부 컷아웃도 1픽셀 두께를 유지한다. - 선의 끝부분은 둥글게 처리한다. - 아이콘이 주어진 공간을 최대한 균형 있게 채우도록 구성한다. - 다양한 사용 환경을 고려해 세 가지 크기로 제작한다. - 아이콘은 툴바뿐 아니라 대형 광고판과 마케팅 자료에도 사용되므로, 확대·축소했을 때도 형태가 명확해야 한다. - 축소했을 때 선이 뭉개지거나 요소 간 구분이 어려우면 초기 단계에서 해당 시안을 폐기한다. ## 제품의 본질에서 출발하기 - 아이콘은 브랜드 전체의 규칙뿐 아니라 개별 제품의 시각적 정체성도 표현해야 한다. - 작은 공간에 많은 의미를 담기 위해 디자인·제품 팀이 제품과 관련된 핵심 개념과 단어를 먼저 브레인스토밍한다. - Figma Community의 경우 다음과 같은 개념에서 출발했다. - 커뮤니티를 통한 연결 - 동료 간 지식 교환 - 함께 배우는 경험 - 이러한 키워드에서 사람, 나무, 책 같은 상징을 도출하고 다양한 형태로 발전시켰다. - Figma Buzz는 마법, 창작, AI 이미지 생성 같은 주제를 바탕으로 유리 구슬, 별, 마법을 연상시키는 형태를 탐색했다. ## 수십~수백 개의 시안으로 아이디어 발전시키기 - 초기 개념을 정한 뒤에는 하나의 아이디어를 빠르게 확정하지 않고, 아이콘 가족 전체를 반복적으로 변형한다. - 나무가 얼굴이 되고, 얼굴이 만다라가 되며, 추상적인 형태가 회전하고 얽히는 식으로 자유롭게 시각적 연상을 확장한다. - Tim은 창의적 감각을 유지하기 위해 의도적인 “창의적 방황”을 즐긴다고 설명한다. - Figma Make 아이콘을 만들 때는 움직임과 변형을 표현하기 위해 바퀴, 나비, 나침반, 피젯 스피너 등을 실험했다. - Figma Buzz에서는 날개 모양, 선, 더듬이 길이가 다른 벌 아이콘을 하루 동안 수백 개 제작했다. - 반복 작업은 Figma의 가변 폭 선(variable width stroke)과 여러 벡터 레이어 동시 편집 기능을 활용해 효율화했다. ## 규칙과 실험의 균형 - 아이콘 제작에는 선 두께, 크기, 균형 같은 명확한 제약이 있지만, 그 안에서 상징과 형태를 자유롭게 탐험한다. - 따라서 일관된 시스템은 결과를 획일적으로 만드는 공식이 아니라, 창의적인 실험이 브랜드 전체와 조화를 이루도록 돕는 틀이다. - 기존 제품 아이콘을 재설계하고 신규 제품 아이콘을 추가하면서도 전체 제품군이 하나의 시각적 체계로 보이도록 조정했다. 제품 아이콘을 설계할 때는 먼저 일관된 시각 규칙을 정하고, 제품의 핵심 가치를 키워드로 구체화한 뒤, 충분한 수의 변형을 실험하는 접근이 효과적이다. 최종 결과보다 탐색 과정에서 많은 가능성을 비교하고, 실제 사용 크기에서 명확성과 균형을 검증하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma IPO 추진을 위한 로드

Figma가 클래스 A 보통주 IPO를 위한 로드쇼를 시작한다고 발표했다. 회사는 1,247만 주를 직접 발행하고, 기존 주주들은 2,464만 주를 매각할 예정이며 공모 희망가는 주당 25~28달러다. 뉴욕증권거래소에 `FIG`라는 종목명으로 상장 신청했지만, SEC 등록신고서가 아직 효력을 발휘하지 않아 실제 매각은 승인 이후 가능하다. ## IPO 공모 구조 - Figma가 신규 발행하는 주식: **12,472,657주** - 기존 주주가 매각하는 주식: **24,646,423주** - 초기 공모 물량은 총 **37,119,080주** - 기존 주주 매각분에 대해서는 Figma가 대금을 받지 않는다. - 인수단은 초과배정 물량을 충당하기 위해 최대 **5,540,561주**를 추가 매입할 수 있는 30일 옵션을 부여받는다. ## 공모 가격과 상장 계획 - 공모 희망 가격: **주당 25~28달러** - 상장 예정 거래소: **뉴욕증권거래소(NYSE)** - 예정 티커: **FIG** - 희망 가격 기준 Figma가 신규 주식 발행으로 조달할 수 있는 금액은 대략 **3억 1,200만~3억 5,000만 달러** 수준이다. 이는 수수료와 할인 등을 반영하기 전의 단순 추산이다. ## IPO 주관사 - 공동 대표 주관사: - Morgan Stanley - Goldman Sachs - Allen & Company - J.P. Morgan - 대표 주관사: - BofA Securities - Wells Fargo Securities - RBC Capital Markets - 공동 주관사: - William Blair - Wolfe | Nomura Alliance ## SEC 등록과 법적 유의사항 - Figma는 해당 증권에 대한 등록신고서를 SEC에 제출했다. - 그러나 발표 시점에는 등록신고서가 아직 효력을 갖지 않았다. - 따라서 효력 발생 전에는 주식을 판매하거나 매수 제안을 받을 수 없다. - 이번 발표문 자체는 주식 매수 제안이나 매도 권유를 의미하지 않으며, 실제 공모는 최종 투자설명서를 통해 진행된다. ## Figma의 사업 정체성 - 2012년 설립된 Figma는 초기 디자인 도구에서 출발했다. - 현재는 아이디어 구상, 디자인, 개발, 출시를 연결하는 협업 플랫폼으로 확장했다. - AI 기능을 포함한 연결형 플랫폼을 통해 제품 개발 과정 전반의 협업과 효율성을 높이는 것을 목표로 한다. Figma의 IPO는 회사가 비상장 기업에서 공개 기업으로 전환하는 공식적인 단계에 들어섰다는 의미다. 다만 실제 투자 판단을 위해서는 SEC 최종 투자설명서에서 공모 후 지분 구조, 재무 실적, 위험 요인, 주식 희석 및 자금 사용 계획을 확인해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

좋은 기업들과 함께: 소매

리테일 기업은 Figma를 활용해 고객 여정을 매끄럽게 만들고, 여러 디지털 접점에서 일관된 브랜드 경험을 구축하고 있다. Nuuly는 고객용·렌탈 운영용 디자인 시스템을 분리해 복잡한 의류 대여 과정을 단순화했으며, Figma 도입으로 협업과 개발 핸드오프를 개선했다. 글은 Ruggable과 GitHub 사례를 통해서도 디자인 시스템과 부서 간 협업이 전자상거래 경험을 강화한다고 설명한다. ## 변화하는 전자상거래 경험 - 오늘날 전자상거래는 단순한 상품 판매를 넘어 다음 요소를 함께 요구한다. - 고객 신뢰 형성 - 원활한 구매·이용 여정 - 여러 디지털 채널에서의 일관된 브랜드 경험 - 직원과 운영 조직의 업무 효율 - Nuuly, Ruggable, GitHub 등의 기업은 Figma를 중심으로 디자인·마케팅·개발·운영 조직의 협업을 강화하고 있다. - 디자인 시스템과 프로토타이핑 도구를 활용해 고객 접점뿐 아니라 내부 업무용 제품까지 체계적으로 설계한다. ## Nuuly의 의류 렌탈 경험 단순화 - 2019년 시작한 Nuuly는 특별한 날뿐 아니라 일상에서도 의류를 대여하는 문화를 확산시키려 한다. - 의류 렌탈에는 고객 경험 외에도 다음과 같은 복잡한 운영 과정이 필요하다. - 순환 재고 관리 - 의류 세탁 - 수선 및 재사용 - Nuuly는 서로 다른 목적을 가진 두 개의 디자인 시스템을 구축했다. - 고객이 사용하는 렌탈 서비스용 시스템 - 재고·세탁·수선 등을 관리하는 렌탈 운영용 시스템 - 색상과 타이포그래피를 토큰화해 계절과 브랜드 변화에 맞춰 쉽게 교체할 수 있도록 설계했다. ## 복잡한 렌탈 상태를 직관적으로 표현 - Nuuly는 복잡한 물류 기술을 고객에게 직접 노출하기보다, 렌탈 과정을 최대한 단순하고 직관적으로 보여주는 데 집중했다. - `My Nuuly` 기능은 고객의 Nuuly 가방을 중심으로 현재 상태와 다음 단계를 안내한다. - 이 기능은 26개가 넘는 렌탈 상태를 고객이 이해하기 쉬운 흐름으로 연결한다. - 물리적인 의류 배송 경험과 디지털 화면을 하나의 연속적인 고객 여정으로 통합한 사례다. ## Figma를 통한 디자인 시스템 통합 - Figma 도입 전 Nuuly의 디자인 시스템은 파일 크기와 서버 동기화 제약 때문에 여러 파일로 분산되어 있었다. - 총 16개 파일을 관리해야 했고 성능도 느렸다. - 2023년 Figma로 이전하면서 시스템을 재구축해 두 개의 단순한 Figma 라이브러리로 통합했다. - 그 결과: - 디자인 작업 속도가 빨라짐 - 네이티브 프로토타이핑으로 인터랙션 의도를 개발자에게 명확히 전달 - 디자인·개발 간 핸드오프 개선 - 조직 전체의 민첩성과 협업 수준 향상 ## 여러 부서로 확장된 협업 - Figma 도입은 UX 팀에만 국한되지 않고 콘텐츠 디자인팀과 스튜디오 사진팀으로 확산됐다. - FigJam과 Figma Slides를 통해 더 넓은 조직이 다음 업무에 참여했다. - 아이디어 발상 - 고객 여정 개선안 검토 - 신규 기능 논의 - 대표적인 사례로 구독자가 대여하지 않고 바로 구매할 수 있는 최종 판매 상품을 제공하는 `The Thrift Shop`이 소개된다. - 도구 통합으로 팀은 반복적인 파일 관리보다 협업과 창의적 탐색, 고객 중심 사고에 더 많은 시간을 쓸 수 있게 됐다. ## Ruggable과 GitHub 사례 - Ruggable은 소셜 미디어 광고, 홈페이지, 상품 상세 페이지 등 여러 디지털 표면에서 일관된 경험을 구축하는 사례로 소개된다. - GitHub는 Design Business Company와 협업해 개발자를 위한 전자상거래 스토어를 설계한 사례로 언급된다. - 두 사례 모두 전자상거래가 단일 웹페이지의 문제가 아니라 마케팅·브랜드·제품 경험을 연결하는 통합적인 디자인 과제임을 보여준다. Nuuly 사례는 복잡한 내부 운영을 고객에게는 간단한 경험으로 전달하려면, 고객용 화면과 운영 시스템을 함께 설계해야 한다는 점을 보여준다. 실무적으로는 디자인 토큰과 공유 라이브러리를 도입하고, 프로토타입과 협업 도구를 디자인·개발·마케팅 전반에 활용하는 것이 일관된 브랜드 경험과 빠른 개선에 효과적이다.

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

피그마, 라틴 아 (새 탭에서 열림)

Figma가 중남미 디자인 및 개발자 커뮤니티와의 접점을 넓히기 위해 라틴 아메리카 스페인어 현지화 버전을 공식 출시했습니다. 이번 업데이트는 단순한 번역을 넘어 문화적으로 최적화된 UI와 전용 지원 시스템을 포함하며, 전 세계 활성 사용자의 85%가 미국 외 지역에 거주하는 Figma의 글로벌 확장 전략의 일환입니다. 이를 통해 중남미 지역 기업들은 디자인 시스템을 더 효율적으로 확장하고 제품 개발 생산성을 높일 수 있게 되었습니다. ### 라틴 아메리카 시장의 성장과 현지화 배경 * **다섯 번째 현지화 언어:** 일본어, 스페인어(본토), 한국어, 브라질 포르투갈어에 이어 라틴 아메리카 스페인어가 Figma의 다섯 번째 공식 현지화 언어로 채택되었습니다. * **폭발적인 커뮤니티 성장:** 지난 한 해 동안 라틴 아메리카 지역에서만 1,000만 개 이상의 Figma 파일이 생성되었을 정도로 해당 지역의 창의적 에너지가 높습니다. * **주요 고객사 확보:** iFood, Mercado Libre, Nubank 등 중남미를 대표하는 유니콘 기업과 대형 금융기관들이 이미 Figma를 통해 디자인과 엔지니어링 워크플로우를 통합하고 있습니다. * **문화적 최적화:** 단순 텍스트 번역에 그치지 않고, 지역 사용자의 문화적 특성을 반영한 인터페이스와 전담 고객 지원을 통해 현지 기업들이 더 원활하게 제품을 설계할 수 있도록 돕습니다. ### 글로벌 플랫폼으로서의 데이터와 지표 * **압도적인 해외 사용자 비중:** 2024년 4분기 기준, Figma 월간 활성 사용자(MAU)의 약 85%가 미국 이외의 지역에 분포하고 있습니다. * **글로벌 매출 구조:** 2024년 전체 매출의 50% 이상이 미국 이외의 글로벌 시장에서 발생하며 명실상부한 글로벌 플랫폼으로 자리 잡았습니다. * **다양해진 사용자 직군:** 전체 사용자의 약 30%가 스스로를 개발자로 정의하고 있으며, 전통적인 디자이너 역할을 넘어 협업에 참여하는 비중이 전체 MAU의 2/3에 달합니다. ### 협업 환경에 주는 시사점 * **직군 간 장벽 완화:** 현지어 지원은 디자이너뿐만 아니라 제품 매니저, 개발자 등 다양한 이해관계자들이 디자인 시스템에 더 쉽게 접근하고 소통하게 만듭니다. * **글로벌 표준화 가속:** 전 세계 어디서든 동일한 수준의 현지화된 도구를 사용할 수 있게 됨에 따라, 다국적 기업 내에서의 협업 생산성이 더욱 향상될 것으로 기대됩니다. * **디자인 경쟁력 강화:** 현지 문화를 반영한 제품 제작이 쉬워지면서, 각 지역 기업들이 차별화된 사용자 경험(UX)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

figma3분 읽기큐레이션 요약

훌륭한 파트너: 에

에이전시와 프리랜서는 원격 협업과 전문 역할의 융합을 바탕으로, 클라이언트와 더 긴밀하게 공동 창작하는 방식으로 변화하고 있다. Figma 같은 협업 도구는 아이디어 공유부터 피드백, 결과물 제작까지의 경계를 허물며 보다 유연하고 투명한 작업을 가능하게 한다. 글은 여러 스튜디오의 사례를 통해 규모보다 민첩성, 일방적 전달보다 지속적인 협업이 중요해졌다고 설명한다. ## 에이전시 업무 방식의 변화 - 원격 근무로 팀이 여러 지역과 시간대에 분산되면서 실시간·비동기 커뮤니케이션의 중요성이 커졌다. - 대형 종합 에이전시 중심의 시장에서 소규모 부티크 에이전시와 프리랜서가 전문성과 민첩성을 앞세워 성장하고 있다. - 디자인 프로세스를 외부에 공개하지 않는 방식에서 벗어나, 에이전시와 클라이언트가 과정 전체를 함께 만드는 방식으로 전환되고 있다. - 에이전시 내부에서도 디자이너, 개발자, 전략가의 역할 경계가 흐려지고 있다. - Design Business Company 공동창업자 Judson Collier는 다양한 분야를 이해하는 제너럴리스트 역량이 다시 중요해졌다고 말한다. ## Figma를 활용한 공동 창작 - Figma는 디자인 시안뿐 아니라 의견 교환, 리뷰, 수정, 의사결정을 하나의 작업 공간에서 진행하게 한다. - 클라이언트에게 Figma 링크를 공유하면 클라이언트가 편한 시간에 댓글을 남기고, 에이전시가 이를 바탕으로 계속 아이디어를 발전시킬 수 있다. - 과거처럼 인쇄된 PDF를 회의실에서 일방적으로 발표하는 대신, 더 비공식적이고 빈번한 상호작용이 가능해졌다. - 클라이언트가 디자인 도구와 디자인 언어에 익숙해지면서, 에이전시와 클라이언트의 관계도 수직적 전달 구조에서 파트너십으로 바뀌고 있다. ## Human의 유연한 팀 구조 - 디지털 스튜디오 Human은 프로젝트 수요에 따라 팀 규모를 6~10명 사이에서 조정한다. - 이 구조는 프리랜서 수준의 민첩성과 대형 에이전시의 경험·안정성을 동시에 확보하려는 방식이다. - 디자이너와 개발자가 클라이언트와 긴밀하게 협업해, 조직 내부 팀과 외부 에이전시 사이에서 발생하는 단절을 줄인다. - 클라이언트가 외부 파트너를 내부 팀의 일부처럼 받아들이는 추세와도 잘 맞는다. ## Jimini Health의 브랜드 개발 - Human은 정신건강 AI 기업 Jimini Health의 새로운 시각 아이덴티티와 웹사이트를 제작했다. - 프로젝트의 스프린트 과정에서 양측은 브랜드가 어떤 가치와 감정을 표현해야 하는지 먼저 논의했다. - Jimini의 브랜딩 시스템은 인간 감정의 폭넓은 스펙트럼을 시각적으로 표현한다. - 다양한 정신건강 주제를 구분할 수 있도록 견고하고 ADA를 준수하는 색상 팔레트를 구축했다. - 사진, 소셜 미디어, 웹사이트, 앱 등 여러 접점에서 일관된 시각 정체성을 유지하도록 설계했다. - Figma Slides를 활용해 브랜드 방향성과 아이디어를 공유하고, 양 팀이 시각적 결과물을 보며 구체적인 합의를 만들어 갔다. ## 실무에 적용할 수 있는 시사점 - 클라이언트를 최종 검수자가 아니라 초기 기획부터 참여하는 공동 제작자로 설정한다. - 문서나 발표 자료를 일방적으로 전달하기보다 Figma 링크와 댓글을 활용해 지속적인 피드백 루프를 만든다. - 프로젝트별로 필요한 인력을 유연하게 구성하되, 디자인과 개발 등 핵심 역할 간 협업 구조는 긴밀하게 유지한다. - 브랜드 아이덴티티를 만들 때 색상, 사진, 앱, 웹, 소셜 미디어 등 실제 사용 환경까지 함께 설계해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Sites로 웹

Figma Sites는 Figma 안에서 웹사이트를 디자인하고, 반응형 동작과 인터랙션을 적용한 뒤 바로 게시할 수 있는 올인원 도구다. 기존의 디자인·프로토타이핑·개발·배포로 이어지는 선형 작업을 하나의 반복적인 흐름으로 통합해, 개발 도구나 별도 협업 과정 없이 실제 웹사이트를 제작하도록 돕는다. 템플릿과 디자인 시스템 연동, 반응형 레이아웃, 다양한 애니메이션 기능을 통해 디자이너와 소규모 팀도 표현력 있는 사이트를 만들 수 있다. ## 디자인부터 게시까지 하나의 작업 흐름 - 기존 웹 제작은 Figma에서 디자인한 뒤 프로토타입을 만들고, 브레이크포인트를 설정하며, 디자인을 코드로 변환하고 테스트·배포하는 수작업과 도구 전환이 필요했다. - Figma Sites에서는 Figma를 떠나지 않고 디자인, 인터랙션 구현, 반응형 조정, 웹 게시를 수행할 수 있다. - 포트폴리오, 이벤트 사이트, 제품 랜딩 페이지 등 다양한 목적의 실제 동작하는 웹사이트를 제작할 수 있다. - 템플릿, 반응형 웹 요소, 사전 제작된 인터랙션을 제공해 디자인·개발 인력이 제한적인 팀도 빠르게 시작할 수 있다. - 향후 Figma Make 기반의 채팅-투-코드 기능을 통해 원하는 애니메이션이나 인터랙션을 자연어로 설명하고 생성할 수 있게 될 예정이다. ## 템플릿과 디자인 시스템 연동 - Inserts 패널을 통해 게시된 디자인 라이브러리를 사이트에 연결할 수 있다. - 팀의 컴포넌트와 스타일을 재사용해 제작 속도와 일관성을 높일 수 있다. - 별도의 디자인 시스템이 없는 경우에도 내비게이션, 히어로 섹션, 전체 페이지 같은 기본 블록을 활용할 수 있다. - 디자인 시스템을 처음부터 구축하지 않아도 검증된 구성 요소를 조합해 사이트를 만들 수 있다. ## 다양한 화면에 대응하는 반응형 디자인 - 레이아웃, 텍스트, 디자인이 화면 크기와 브레이크포인트에 맞춰 자동으로 조정된다. - Multi-edit 기능으로 여러 화면 크기의 요소를 한 번에 수정할 수 있다. - 텍스트 스타일마다 브레이크포인트별 글자 크기와 간격을 설정할 수 있으며, 별도의 변수를 사용하지 않아도 된다. - 자동 조정 기능을 기반으로 하면서도 세부 요소는 수동으로 조정해 정교하게 다듬을 수 있다. - 미리보기 창의 크기를 바꾸면서 레이아웃 재배치와 브레이크포인트 전환을 확인할 수 있다. ## 웹사이트 수준의 프로토타이핑과 검수 - 협업자에게 인터랙티브한 라이브 웹사이트 미리보기를 공유하고 피드백을 받을 수 있다. - 미리보기는 HTML과 CSS로 렌더링되므로 일반적인 Figma 프로토타입보다 실제 게시 환경에 가까운 결과를 확인할 수 있다. - 반응형 동작뿐 아니라 웹사이트에 특화된 인터랙션도 게시 전에 테스트할 수 있다. ## 기본 제공되는 애니메이션과 인터랙션 - 마우스 패럴랙스: 커서 움직임에 따라 객체를 이동시킨다. - 라이트박스: 이미지를 강조하고 배경을 어둡게 처리한다. - 스핀: 객체를 무한 회전시킨다. - 드래그 가능 요소: 페이지 안의 요소를 자유롭게 이동시킨다. - 타자기 효과: 텍스트를 한 글자씩 표시한다. - 스크램블 텍스트: 문자를 무작위로 보여준 뒤 원래 텍스트를 드러낸다. - 마키, 리빌, 스크롤 패럴랙스 같은 사전 제작 효과도 제공된다. ## Figma Sites만의 확장 기능 - Figma Design에는 아직 없는 스크롤 패럴랙스와 스크롤 변환 기능을 지원한다. - 인터랙티브 컴포넌트를 별도로 만들지 않아도 호버 상태와 눌림 상태를 구현할 수 있다. - 향후 코드 레이어를 사용해 플러그인이나 외부 도구 없이 더 복잡한 인터랙션을 추가할 수 있다. - AI 채팅을 이용해 드래그 가능한 목록이나 실제 지리 정보를 반영한 시계처럼 복잡한 동작을 설명만으로 생성할 수 있게 될 예정이다. - 생성한 코드 레이어는 Figma Design의 라이브러리처럼 재사용·공유 가능한 컴포넌트와 인스턴스로 만들 수 있다. Figma Sites는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Make를 소개

Figma Make는 자연어 프롬프트를 이용해 정적인 디자인을 실제로 조작 가능한 앱과 프로토타입으로 바꾸는 기능이다. 기존 Figma 프레임의 구조와 메타데이터를 유지하면서 애니메이션, 데이터, 반응형 동작 등을 빠르게 실험할 수 있으며, 디자이너와 제품팀이 코드 작성 없이 아이디어를 검증하도록 돕는다. Figma는 이를 디자인을 대체하는 도구가 아니라, 디자인 의도를 보존한 채 탐색과 구현을 가속하는 도구로 설명한다. ## 디자인에서 바로 시작하는 프롬프트 기반 제작 - 사용자는 빈 화면에서 시작할 필요 없이 Figma Design의 기존 프레임을 Figma Make로 복사할 수 있다. - 복사 과정에서 디자인의 구조와 메타데이터가 보존되어 원래 의도와 컴포넌트 계층을 유지한다. - 이후 “설정 패널을 열고 닫을 때 애니메이션을 추가해줘”처럼 자연어로 원하는 동작을 설명한다. - 현재 Figma Make는 Claude 3.7 Sonnet을 사용하며, 향후 다른 모델도 도입할 예정이다. ## 정적 디자인을 인터랙티브 프로토타입으로 전환 - 버튼, 애니메이션, 실시간 피드백 등을 추가해 정적인 화면을 실제 사용 가능한 프로토타입으로 바꿀 수 있다. - 파일 업로드나 정보 시각화처럼 동적 데이터를 사용하는 기능도 시험할 수 있다. - 모바일 앱 디자인을 데스크톱 화면으로 확장하는 등 다양한 폼팩터에 맞춘 반응형 디자인을 검증할 수 있다. - 향후 서드파티 데이터베이스와 디자인 시스템 연동도 지원할 계획이다. ## 실시간 협업과 역할 장벽 제거 - Figma 플랫폼 안에 통합되어 있어 여러 팀원이 같은 파일에서 실시간으로 탐색하고 수정할 수 있다. - 디자이너, 제품 관리자 등 기술 배경이 다른 구성원도 기능 추가, 데이터 적용, 인터랙션 모델 테스트에 참여할 수 있다. - 별도의 코딩 도구나 컨텍스트 전환 없이 하나의 작업 공간에서 아이디어 정의부터 반복 개선까지 진행한다. - 이를 통해 팀의 공통 기준점인 단일 소스 오브 트루스를 유지한다. ## 포인트 앤 프롬프트 방식의 정밀한 편집 - 특정 요소를 직접 선택한 뒤 변경 내용을 자연어로 지시할 수 있다. - 예를 들어 버튼에 애니메이션을 연결하거나, 특정 요소가 스크롤에 반응하도록 만들 수 있다. - 디자인 의도와 실제 동작 구현 사이의 간극을 줄이는 것이 목표다. - 구조화된 편집 방식은 디자인 시스템과 컴포넌트 계층을 보존해 기능을 추가하면서도 시각적 충실도를 유지한다. ## 캔버스에서 코드와 게시까지 이어지는 흐름 - Figma Make는 Figma Design 및 Figma Sites와 직접 연결된다. - 초기 아이디어를 디자인하고, 인터랙티브 프로토타입으로 검증한 뒤, 게시 가능한 사이트로 발전시키는 과정을 하나의 흐름으로 통합한다. - 별도 도구로 작업물을 다시 만들거나 맥락을 전환할 필요를 줄인다. ## 디자인 가능성의 확장 - Figma Make의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다. - 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다. - 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다. 실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

폴라로이드가 다음 혁

폴라로이드는 디지털 사진 시대에 대응하기 위해 즉석카메라·포토프린터·모바일 앱으로 사업을 확장하고, 디자인·개발 프로세스도 현대화하고 있다. Figma를 중심으로 디자인 시스템을 구축해 브랜드 일관성과 협업 효율을 높였으며, 고도화된 프로토타입과 사용자 테스트로 제품의 완성도를 개선했다. 그 결과 폴라로이드는 전통적인 아날로그 감성을 유지하면서도 새로운 세대의 디지털 경험을 제공하고 있다. ## 아날로그 유산을 디지털 시대로 확장 - 폴라로이드는 1937년 에드윈 랜드가 설립한 뒤 1948년 즉석카메라를 선보이며 사진 문화를 바꿨다. - 앤디 워홀, 안셀 아담스, 데이비드 호크니 등 예술가들이 폴라로이드 카메라와 필름을 활용하면서 브랜드는 문화적 아이콘으로 자리 잡았다. - 디지털 사진의 확산으로 2008년 네덜란드의 마지막 필름 공장 폐쇄를 발표하는 등 존립 위기를 겪었다. - 이후 열성적인 즉석사진 애호가들이 설립한 임파서블 프로젝트가 공장을 인수하고 필름 화학식을 재개발해 필름 생산을 이어갔다. - 현재는 즉석카메라뿐 아니라 사진 프린터와 모바일 앱을 통해 디지털 시대에 맞는 제품군을 구축하고 있다. ## Figma를 통한 단일 디자인 기준 구축 - Figma 도입 전에는 디자이너들이 각자 별도의 파일과 도구를 사용해 중복 작업과 비효율이 발생했다. - 중앙화된 디자인 시스템과 재사용 가능한 컴포넌트가 없어 수정과 반복 작업이 느렸다. - 이런 제약 때문에 폴라로이드는 iOS 앱만 설계하고 Android 지원은 충분히 확장하지 못했다. - Figma의 클라우드 기반 환경을 통해 디자이너, 개발자, 다른 부서 구성원이 작업 과정 전반에 참여할 수 있게 됐다. - 원격 근무 환경에서도 디자인 파일과 논의를 공유할 수 있어 부서 간 투명성과 협업이 향상됐다. ## 디자인 토큰과 변수로 플랫폼·테마 확장 - 디자인 토큰과 변수를 활용해 색상, 글꼴, 컴포넌트 등의 규칙을 체계적으로 관리했다. - 라이트 모드와 다크 모드를 지원하고, iOS와 Android에 맞춰 기본 글꼴을 다르게 적용했다. - 카메라 연결 화면에서는 사용자가 보유한 기기만 표시하도록 사용자 경험을 단순화했다. - 앱 테마가 연결된 카메라의 색상 구성과 자동으로 맞춰지도록 개선했다. - Figma UI 키트를 초기 설계의 출발점으로 활용하고, Autoflow 플러그인으로 사용자 여정을 시각화해 설계 전에 흐름을 점검했다. ## 더 빠르고 현실적인 프로토타이핑 - Figma 프로토타입을 통해 디자인 초기 단계에서 사용자의 불편과 문제점을 발견할 수 있게 됐다. - 기존 방식보다 사용자가 설정을 변경하거나 화면을 자유롭게 이동하는 등 실제 제품에 가까운 상호작용을 테스트할 수 있었다. - 사용자 테스트를 통해 추측이 아니라 실제 행동을 바탕으로 제품을 검증했다. - 더 많은 프로토타입을 짧은 시간에 높은 품질로 제작할 수 있게 됐다. - 개발 후반에 발생할 수 있는 대규모 수정과 비용을 줄이고, 제품 완성도와 개발 효율을 함께 높였다. ## 실용적인 시사점 폴라로이드의 사례는 브랜드의 역사적 정체성을 유지하면서도 디자인 시스템, 변수, 재사용 컴포넌트, 프로토타이핑을 통해 디지털 제품을 확장한 사례다. 여러 플랫폼과 팀이 함께 제품을 만드는 조직이라면 Figma 같은 중앙화된 작업 환경과 조기 사용자 테스트를 도입하는 것이 일관성, 속도, 비용 절감에 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

놀이의 힘 | 피그마 블로그

디자인은 효율과 완성도만 추구하는 작업이 아니라, 예상 밖의 시도와 놀이를 통해 창의성을 확장하는 과정이기도 하다. Laura Fehre는 Figma 안에 디지털 네일 살롱 ‘Mani Mansion’을 만들며 완벽주의를 내려놓고, 문제를 놀이의 기회로 재해석했다. 결국 체계와 구조는 창의성을 제한하는 것이 아니라, 오히려 자유로운 실험을 가능하게 하는 기반이 되었다. ## 일상에서 발견한 영감 - 어린 시절 즐겼던 게임 **Barbie Nail Designer**와 실제 네일숍 방문 경험에서 프로젝트의 아이디어를 얻었다. - 효율적인 업무 도구가 아니라, 사용자가 시간을 잊고 즐길 수 있는 경험을 만들고자 했다. - 주변 네일숍을 직접 관찰하며 다음과 같은 감각적 요소를 수집했다. - 네일 드릴 소리와 사람들의 대화 - 아몬드 향 네일 클렌저 - 푹신한 좌석, 네온사인, 광택 있는 카운터 - 1990년대풍의 분위기 - 스케치북에 수집한 인상을 기록하고, 이를 디지털 공간의 질감·소리·분위기·인터랙션으로 번역했다. ## 무질서한 창작과 구조의 필요성 - 실제 네일처럼 모든 손톱 모양을 서로 다르게 만들기 위해 Figma 벡터 도구로 각각의 형태를 직접 제작했다. - 그러나 모든 요소가 고유하면 레이어링과 조합이 어려워지고, 동일한 요소의 중복이 끝없이 늘어나는 문제가 생겼다. - 처음에는 디자인 시스템과 반대되는 자유롭고 무질서한 결과물을 만들려 했지만, 프로젝트를 진행할수록 일정한 구조가 필요하다는 사실을 깨달았다. - 즉, 구조는 창의성을 억누르는 장벽이 아니라 요소를 쉽게 조합하고 반복 실험할 수 있게 하는 기반이 되었다. ## 완벽주의에서 놀이로의 전환 - 기대했던 화려한 일러스트와 완성도 높은 네일 살롱을 빠르게 구현하지 못하자, 자신의 디자인 역량이 부족해졌다고 느꼈다. - 동료 디자이너 애드버킷 Miggi Cardona와 함께 네일 형태와 패턴을 실험하며 막힌 상태를 돌파했다. - 두 사람은 결과물의 실용성이나 타인의 평가보다, 작업 과정 자체를 즐기는 데 집중했다. - 실패와 예상 밖의 결과를 결함이 아니라 성장과 실험의 기회로 바라보면서 창작의 즐거움을 되찾았다. - 다른 사람을 감탄시키려는 목표보다, 자신을 기쁘게 하는 결과물을 만드는 것이 중요하다는 점을 깨달았다. ## 무드보드와 체계적인 조합 - 실제 네일 디자인을 만들기 전, Figma 파일 안에 무드보드를 구성했다. - 디스코 볼의 반짝임, 1980년대 베르사체 스타일, 강렬한 ‘baddie’ 분위기, 검정색, 발렌타인데이의 하트 등을 시각적 재료로 모았다. - 네일 스테이션에서는 색상과 형태를 조합하고, 각각의 손톱에 서로 다른 디자인을 적용했다. - 처음 시도했던 완전히 독창적인 손톱 형태 대신, 일정한 시스템 안에서 다양한 요소를 조합하는 방식을 선택했다. - 이 체계적인 접근 덕분에 오히려 더 빠르고 자유롭게 창의적인 디자인을 실험할 수 있었다. - 완성한 디자인은 네일 테크니션에게 그대로 복사해 달라고 전달한 것이 아니라, 새로운 창작을 위한 영감으로 활용하도록 공유했다. 디자인 작업에서는 구조와 자유 중 하나만 선택할 필요가 없다. 반복 가능한 시스템을 먼저 마련하면 실험 비용을 줄이면서 더 과감하게 놀 수 있으므로, 완벽한 결과를 서두르기보다 호기심을 따라 작은 시도를 반복하는 것이 실용적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma에서 디자인 시스템 워

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다. ## 모드와 컬렉션을 안전하게 재정렬 - 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다. - 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다. - 재정렬해도 모드 ID와 연결 정보가 유지된다. - 기본 모드도 간단히 변경할 수 있다. - 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다. ## 작업 흐름을 개선하는 9가지 업데이트 - 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다. - 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다. - 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다. - 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다. - 변수 모달의 헤더 전체를 드래그할 수 있다. - 변수 변경 사항이 자동 저장된다. - 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다. - 편집 버튼 정렬이 개선됐다. - 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다. ## 색상 팔레트와 색상 토큰 만들기 - **CSS color-mix()** - CSS의 `color-mix()`를 활용해 색상 팔레트와 그라디언트를 생성한다. - **Colorbox** - 전체 색상 램프를 빠르게 만든다. - **The Genome Color Tool** - WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다. - 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다. - 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다. ## 타이포그래피와 변수 문서화 - **Peppercorn** - 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다. - **Print Variables** - 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다. - **Auto Documentation** - 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다. - **Variables and Styles List** - 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다. - 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다. ## 컴포넌트 구조와 스펙 정리 - **Propstar** - 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다. - **Specs** - 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다. - **Similayer** - 특정 레이어나 속성을 기준으로 요소를 필터링한다. - **Style Finder** - 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다. - 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다. ## 변수와 디자인 토큰을 코드로 연결 - **CTRL Var** - 변수를 일괄적으로 이름 변경할 수 있다. - **Export Import Variables** - Figma 안팎으로 변수를 가져오고 내보낸다. - **Handoff** - CSS 변수를 즉시 복사해 개발 전달을 단순화한다. - **Variables Converter** - Figma 변수를 코드 형식으로 변환한다. - **Shaper** - 토큰 아키텍처를 관리하고 CSS 코드를 생성한다. - 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다. ## 디자인 시스템 구축 단계별 접근 - **기초 설계** - 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다. - **문서화** - 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다. - **구현과 핸드오프** - 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다. - Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다. 실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

개발자 핸드오프

디자이너와 개발자의 핸드오프는 디자인을 전달하는 마지막 단계가 아니라, 제품의 방향과 구현 방식을 함께 조율하는 협업 과정이다. 개발자는 성능·안정성·기술적 제약을, 디자이너는 일관성과 사용 경험을 중시하므로, 초기부터 소통하고 공통의 언어를 만들어야 한다. 특히 아이디어가 유연한 초기에 개발자를 참여시키는 것이 시행착오와 구현 비용을 줄이는 핵심이다. ## 협업의 기본 원칙 - 디자인은 “원하는 것(what we want)”, 개발은 “실제로 가진 것(what we have)”에 가깝다. - 두 직군의 간극을 줄이려면 다음이 필요하다. - 서로의 관점에 대한 호기심 - 지속적이고 열린 커뮤니케이션 - 좋은 결과물의 기준에 대한 공통된 관점 - 글은 효과적인 핸드오프를 위해 다음 네 가지 영역을 제시한다. 1. 무엇을 만들지 합의하기 2. 어떻게 만들지 결정하기 3. 공통 언어 만들기 4. 개발자 경험을 고려해 의도 명확히 하기 ## 무엇을 만들지 먼저 합의하기 - 초기 와이어프레임 단계부터 개발자를 참여시킨다. - 개발자는 다음과 같은 기술적 문제를 조기에 발견할 수 있다. - 단순해 보이는 디자인이 실제로는 복잡한 기술 로직을 요구하는 경우 - 데이터 계층에서 발생하는 제약이나 처리 비용 - 기존 기능을 재사용하거나 확장해 더 적은 개발 노력으로 해결할 수 있는 기회 - 아이디어가 아직 바뀔 수 있는 단계에서 피드백을 받을수록 수정 비용이 낮다. - 초기 협업의 목표는 다음과 같다. - 프로젝트 범위 정렬 - 기술적 제약 이해 - 잠재적 문제와 새로운 기회 식별 ## 와이어프레임으로 사용자 흐름 구체화하기 - Figma나 FigJam에서 화면 흐름을 와이어프레임으로 표현하면 추상적인 아이디어를 구체화할 수 있다. - Figma는 보다 구체적인 시각 자료를 만들 때 적합하다. - FigJam은 다음과 같은 상황에 유용하다. - 아이디어를 자유롭고 개략적으로 표현할 때 - 외부 협업자에게 중립적인 피드백 공간을 제공할 때 - 완성도 높은 비주얼을 일부러 배제하면 색상이나 스타일보다 전체 흐름과 핵심 문제에 집중할 수 있다. - 개발자는 화면 순서에서 빠진 상태나 예외 흐름을 발견하고, 디자이너는 이를 반영해 요구사항을 보완할 수 있다. ## 개발자에게 구체적인 질문하기 - 개발자는 질문을 받지 않으면 디자이너가 놓친 부분을 알기 어렵기 때문에, 의도적인 질문이 필요하다. - 다음 내용을 질문하면 협업의 깊이를 높일 수 있다. - 구현상의 제약은 무엇인가? - 데이터 계층에서 복잡성을 높이는 요소가 있는가? - 현재 화면 흐름에서 빠진 상태나 예외 상황은 무엇인가? - 제품의 다른 영역에서 재사용할 수 있는 패턴이나 기능이 있는가? - 이러한 질문은 중복 작업을 줄이고, 기존 기능과 디자인 시스템을 활용하게 해준다. - 개발자는 단순히 디자인을 구현하는 역할을 넘어, 기능 구조와 제품 경험을 개선할 기회를 제안할 수 있다. ## 개발자의 작업 방식에 맞춰 협업하기 - 개발자는 여러 작업 사이를 오가며 집중 상태를 유지해야 하므로, 개발자의 실제 워크플로에 맞추는 것이 신뢰 형성에 도움이 된다. - 필요한 정보와 피드백을 개발자가 사용하는 도구와 흐름 안에서 제공하면 커뮤니케이션 비용을 줄일 수 있다. - GitHub 사례처럼 FigJam의 코드 블록을 활용해 디자인 시스템 문서에서 컴포넌트 API를 함께 정의하는 방식도 가능하다. - 디자인과 코드의 연결 지점을 명확히 하면 컴포넌트의 동작, 재사용성, 구현 의도를 더 쉽게 공유할 수 있다. ## 실용적인 적용 방법 - 프로젝트 초기에 개발자를 리뷰에 초대한다. - 화면 디자인 전에 사용자 흐름과 주요 상태를 와이어프레임으로 정리한다. - “구현 가능한가?”보다 구체적으로 “어떤 제약이 있는가?”, “재사용할 수 있는 기능은 무엇인가?”라고 질문한다. - 정상 상태뿐 아니라 로딩, 오류, 빈 상태, 권한 제한 등 모든 화면 상태를 함께 검토한다. - Figma·FigJam·코드 문서 등 양쪽 팀이 실제로 사용하는 도구에서 정보를 관리한다. - 핸드오프를 일회성 전달이 아니라 설계와 구현이 반복적으로 조정되는 협업 과정으로 운영하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

정부를 위한 피그마에 대해

Figma는 미국 연방정부의 보안·개인정보 기준인 FedRAMP Moderate 인증을 획득하고, 공공기관용 서비스인 Figma for Government를 제공한다. 이를 통해 연방기관은 FigJam, Figma, Dev Mode를 활용해 시민 대상 웹사이트와 애플리케이션을 안전하게 기획·설계·개발할 수 있다. 글은 부서 간 협업과 디자인 시스템을 강화해 더 일관되고 접근성 높은 디지털 공공서비스를 만드는 것이 이 서비스의 목표라고 설명한다. ## FedRAMP Moderate 인증과 Figma for Government - Figma for Government는 미국 연방정부의 엄격한 보안 및 개인정보 보호 기준을 충족하는 FedRAMP Moderate 인증을 받았다. - 제공 대상 제품은 다음과 같다. - **Figma**: 인터페이스 설계, 프로토타이핑, 디자인 리뷰 - **FigJam**: 브레인스토밍, 프로젝트 계획, 사용자 여정 맵 작성 - **Dev Mode**: 디자인과 개발 간 협업 - **Figma Slides**: 추후 제공 예정 - 인증을 통해 연방기관이 민감한 공공서비스를 설계하고 구축할 수 있는 보안 환경을 제공한다. ## 공공서비스 디지털화의 필요성 - 시민들은 의료, 정부 지원, 여권·비자 등 공공서비스를 온라인에서 쉽고 빠르게 이용하기를 기대한다. - 연방 정책에 따라 디지털 서비스는 다음 조건을 갖춰야 한다. - 간결하고 사용하기 쉬운 경험 - 접근성 - 일관된 디자인 - 적절한 도구가 없으면 디자인, 개발, 기획 업무가 조직별로 분리되어 효율성과 결과물의 사용성이 떨어질 수 있다. - 따라서 무엇을 출시하는지뿐 아니라, 여러 팀이 **어떻게 협업하고 출시하는지**도 중요하다고 강조한다. ## Figma for Government가 해결하는 문제 - 100개가 넘는 정부기관과 계약업체가 이미 Figma를 활용해 업무를 현대화하고 있다. - 아이디어 구상부터 디자인 반복 작업, 프로토타이핑, 최종 구현과 개선까지 하나의 플랫폼에서 연결할 수 있다. - 링크 하나로 조직 내 구성원이 작업물을 확인하고, 수정하고, 피드백을 남길 수 있다. - 이를 통해 부서 간 사일로를 줄이고 최신 작업물을 공유하는 단일 기준점(single source of truth)을 만든다. - 정부기관이 민간의 선도적인 조직과 유사한 협업 도구를 보안 환경에서 사용할 수 있도록 설계됐다. ## 공공기관 활용 사례 - **미국 국립공원관리청(NPS)**은 431개 국립공원과 기념물 정보를 제공하는 앱을 제작했다. - 기존 공원 안내 책자의 디자인 언어를 디지털 인터페이스에 적용했다. - **Amtrak**은 2만 명 이상의 직원과 2,800만 명의 승객을 지원하는 시스템을 효율화했다. - 미국 웹 디자인 시스템(USWDS)의 공식 Figma 디자인 키트도 제공된다. - 변수(variables)와 스마트 레이아웃을 활용한 42개 컴포넌트로 구성됐다. - 국무부의 여권·비자 시스템, 국세청의 온라인 납세 서비스, 시민권·이민 서비스국의 시민권 업무 등에도 활용되고 있다. ## FigJam을 활용한 공동 기획 - 여러 지역과 시간대에 분산된 팀이 실시간 또는 비동기 방식으로 협업할 수 있다. - FigJam에서 다음 작업을 한곳에서 진행할 수 있다. - 브레인스토밍 - 프로젝트 로드맵 작성 - 사용자 여정 맵 작성 - 전략 및 정보 공유 - 모든 구성원이 의견을 남기고 다른 사람의 생각을 확인할 수 있어 초기 아이디어를 정렬하는 데 유용하다. ## Figma를 활용한 디자인 협업과 표준화 - 최신 디자인 파일을 모든 이해관계자와 공유해 와이어프레임, 프로토타입, 리뷰, 수정 과정을 단축한다. - 디자이너뿐 아니라 개발자, 제품 관리자, 경영진 등도 디자인 과정에 참여할 수 있다. - 조직은 디자인 시스템을 만들고 관리해 다음을 달성할 수 있다. - 화면 간 일관성 유지 - 높은 품질의 인터페이스 제작 - 기관의 브랜드 정체성 강화 - 시민에게 신뢰감 있는 경험 제공 ## Dev Mode를 통한 디자인-개발 연결 - 디자인과 엔지니어링 팀 간 소통이 부족하면 디자인 의도 확인, 변경사항 비교, 디자인과 코드 연결에 불필요한 시간이 든다. - Dev Mode는 디자이너와 개발자가 같은 작업 공간에서 협업하도록 지원해 이러한 단절을 줄이는 역할을 한다. - 전체 개발 과정에서 디자인 결과물을 구현 단계로 원활하게 전달하는 것이 핵심이다. ## 실용적인 결론 공공기관은 Figma for Government를 활용해 아이디어 구상부터 개발까지의 협업 흐름을 하나로 통합하고, 디자인 시스템으로 서비스의 일관성과 접근성을 높일 수 있다. 특히 여러 부서와 지역에 걸쳐 운영되는 시민 서비스라면 FedRAMP Moderate 인증 환경, 공동 편집, 단일 작업 기준점이 업무 효율과 서비스 품질 향상에 도움이 된다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

UI3로의 전환:

Figma는 2025년 4월 30일부터 기존 UI2를 종료하고, 작업 영역을 넓히고 기능을 간소화한 UI3로 완전히 전환한다. UI3는 단순한 배치 변경이 아니라 변수 인식, 색상 선택, 메뉴 정리 등 실제 작업 흐름을 더 직관적이고 효율적으로 만드는 데 초점을 맞췄다. Figma는 사용자 피드백을 반영한 추가 개선을 거친 뒤, 향후에는 UI3에서만 제공되는 새로운 기능과 Properties 패널 개선에 집중할 계획이다. ## UI3 전환과 UI2 종료 - Figma는 4월 30일 기존 인터페이스인 UI2를 종료한다. - Config를 앞두고 UI3 전용 기능과 새로운 사용 경험을 제공하기 위해 전면 전환을 결정했다. - UI3의 주요 방향은 다음과 같다. - 캔버스와 작업물을 더 넓게 보여주기 - 인터페이스를 간결하게 만들기 - 반복적인 작업을 줄이고 기능 접근성을 높이기 - 향후 확장될 기능을 UI3를 기반으로 제공하기 ## 사용자 피드백을 반영한 개선 Figma는 UI3 공개 이후 사용자의 의견을 바탕으로 여러 세부 요소를 수정하고 있다. - 중복성이 있던 “Reset others” 아이콘을 교체한다. - Boolean 연산 관련 문구를 더 단순하게 정리한다. - Overflow 메뉴에서 중복으로 표시되는 액션을 제거한다. - 의미를 명확히 전달하도록 마스크 아이콘을 변경한다. - “Tidy up” 기능의 동작과 경험을 UI2에 더 가깝게 되돌린다. - 전환 이후에는 Properties 패널을 중심으로 추가 개선을 진행할 예정이다. ## 새로운 인터페이스에 대한 적응 - 기존 작업 흐름과 단축키에 익숙한 사용자는 처음에는 UI3 전환을 부담스럽게 느낄 수 있다. - 그러나 일부 사용자는 몇 시간 만에 자연스럽게 적응했다고 평가했다. - 다른 사용자는 기존의 근육 기억을 바꾸는 데 약 일주일이 걸렸지만, 이후에는 UI3를 선호하게 되었다고 전했다. - 글의 관점은 UI3가 단순히 “다른” 인터페이스가 아니라, 익숙해진 뒤에는 더 나은 작업 방식을 제공한다는 것이다. ## 스마트해진 Eyedropper 도구 UI3의 색상 추출 도구는 기존 단축키 `I`를 그대로 사용하면서 변수와 스타일을 인식하도록 개선되었다. - 캔버스를 살펴보는 동안 Eyedropper 도구가 계속 활성화된 상태로 유지된다. - `Tab` 키를 사용해 Hex, HSB, RGB 등 다양한 색상 모델 사이를 전환할 수 있다. - 단순한 색상 값뿐 아니라 다음 항목을 감지한다. - 색상 스타일 - 변수 - 특정 요소에 적용된 디자인 토큰 - 요소를 선택한 뒤 Eyedropper를 실행하고 캔버스의 색상 위에 마우스를 올리면, Figma가 해당 색상에 사용된 스타일이나 변수를 표시한다. - 작업 중인 위치에서 바로 변수를 생성할 수 있어, 색상을 확인하고 디자인 시스템에 연결하는 과정이 빨라진다. ## 실용적인 결론 UI3 전환을 앞둔 사용자는 미리 새 인터페이스에 적응하고, 특히 Eyedropper의 변수·스타일 인식 기능과 변경된 메뉴 구조를 익혀두는 것이 좋다. 기존 UI2의 위치와 동작을 그대로 찾기보다, 캔버스 중심 설계와 디자인 토큰 활용을 전제로 새로운 작업 흐름을 익히는 것이 전환에 효과적이다.

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