Figma

736 개의 포스트

www.figma.com/blog/engineering

태그로 필터

figma4분 읽기큐레이션 요약

버전 컨트롤: Figma Make로 지역

브리티시컬럼비아의 소규모 농가가 생산물 판매와 유통 과정에서 겪는 문제를 해결하기 위해, 창업자 Aaron Veale은 Figma Make로 농가와 밴쿠버 레스토랑을 연결하는 마켓플레이스 앱 Planet Food를 3주 이내에 구축했다. 약 20개의 프롬프트만으로 첫 프로토타입을 만들고, 농부와 셰프의 피드백을 즉시 반영하며 제품을 발전시켰다. 이 사례는 AI 도구가 개발 속도를 높이는 동시에, 창업자가 고객 문제와 사용자 경험에 더 집중하도록 돕는 과정을 보여준다. ## 소규모 농가가 직면한 구조적 문제 - 브리티시컬럼비아에서는 매주 한 곳의 농가가 폐업할 정도로 상황이 심각하다고 소개된다. - 농가들은 다음과 같은 문제를 겪고 있다. - 생산 비용 상승 - 불안정한 공급망 - 변화하는 정부 규정 - 대형 유통업체에 대한 의존 - 마케팅과 판매 역량 부족 - BC 농가의 순손실은 지난해 4억 5,700만 캐나다달러에 달했으며, 농업 부문은 2017년부터 순손실 상태였다. - Veale은 수십 명의 농부와 대화한 뒤, 농가가 생산에는 강하지만 직접 판매와 시장 접근에는 취약하다는 점을 파악했다. - 이에 따라 지역 농가와 고품질 식재료를 찾는 밴쿠버 레스토랑을 직접 연결하는 마켓플레이스를 구상했다. ## Figma Make로 빠르게 만든 Planet Food - 일반적인 스타트업 방식이라면 투자 유치, 팀 구성, 제품 개발에 상당한 시간이 필요하다. - Veale은 문제의 긴급성을 고려해 Figma Make의 프롬프트 기반 앱 제작 기능을 활용했다. - 하루 동안 약 20개의 프롬프트를 입력해 초기 프로토타입을 만들었다. - Planet Food는 다음 두 운영체계로 구성됐다. - **Farm OS**: 농부가 수확한 농산물을 기록하고 분류하는 기능 - **Restaurant OS**: 셰프가 식재료를 검색하고 주문하는 기능 - 초기 제품을 실제 고객에게 빠르게 보여줌으로써 다음을 확인할 수 있었다. - 고객이 어떤 기능을 필요로 하는지 - 실제 사용 가능성이 있는지 - 투자자에게 제품 사용성과 시장 신호를 제시할 수 있는지 ## 버전 1: 대화를 시작하기 위한 프로토타입 - Veale은 Farm OS와 Restaurant OS를 별도의 Figma Make 작업으로 동시에 개발했다. - 한쪽 시스템을 생성하는 동안 다른 쪽에 기능과 화면을 계속 추가하는 방식으로 작업했다. - 10~20개의 프롬프트만으로 여러 화면으로 구성된 시스템을 만들고, 다음 날 농부나 레스토랑에 직접 시연했다. - 초기 제품은 완성품이라기보다 고객과 문제를 논의하기 위한 대화 도구로 사용됐다. - 현장 인터뷰를 바탕으로 농부의 실제 업무 환경에 맞춰 UX를 조정했다. - 야외에서 햇빛 반사를 줄이기 위해 기본값을 다크 모드로 설정 - 하루 12~16시간 일하는 농부를 고려해 행정·판매 업무를 최소화 - 앱 내 작업을 세 번 이하의 클릭으로 완료하도록 설계 - 불필요한 정보와 클릭 수를 줄여 업무 흐름을 단순화 - 익숙한 앱의 스와이프, 슬라이드업 같은 마이크로 인터랙션을 캡처해 프롬프트에 입력하고, 이를 하나의 모바일 중심 UI로 통합했다. ## 버전 2: 사용자 경험과 브랜드 강화 - 초기 기능이 검증된 뒤에는 앱의 시각적 완성도와 감정적 경험을 개선하는 데 집중했다. - Veale은 과거에는 자신의 디자인 아이디어를 구현하기 위해 여러 개발자에게 의존해야 했고, 그 과정에서 타협이 발생했다고 설명한다. - Figma Make를 통해 디자이너가 직접 구현 과정에 참여하면서 다음 요소에 더 집중할 수 있게 됐다고 평가한다. - 브랜딩 - 인터랙션 - 온보딩 경험 - 고객 경험 전반 - 영화감독 경험을 바탕으로 프롬프트를 단순한 명령이 아니라 사용자의 관점에서 작성하는 이야기로 접근했다. - 농부와 셰프에 대한 구체적인 페르소나를 작성해 프롬프트의 맥락으로 활용했다. - 소규모 팀으로 농장을 운영하며 계절별 업무량이 많은 농장주 - 기술에 호기심은 있지만 기술 중심적이지 않은 사용자 - 공정한 가격과 안정적인 수입을 원하는 사용자 - 재배, 수확, 물류, 판매, 청구를 동시에 처리해야 하는 사용자 - 주요 페인 포인트도 명시적으로 정리했다. - 스프레드시트와 문서를 수동으로 업데이트하는 업무 - 매주 레스토랑의 수요를 예측하기 어려운 문제 - 실시간 재고 동기화 부족으로 인한 과잉 판매·판매 부족 - ChatGPT로 사용자 페르소나와 온보딩 흐름을 분석하고, Figma Make에 입력할 프롬프트를 다시 생성하는 방식으로 AI 도구를 연계했다. - 앱에 커스텀 아이콘을 추가해 기능 중심의 도구에 색상과 개성을 더했다. ## 빠른 반복 개발과 고객 중심 설계 - Veale은 먼저 완벽한 제품을 만들기보다, 빠르게 작동하는 버전을 만들어 실제 사용자와 대화하는 방식을 택했다. - 고객 피드백은 단순한 기능 요청이 아니라 다음 설계 결정의 근거로 활용됐다. - 농부의 작업 환경 - 업무 시간과 행정 부담 - 디지털 도구에 대한 숙련도 - 레스토랑의 주문 및 재고 관리 방식 - Figma Make는 프롬프트를 반복 수정하면서 화면, 기능, 인터랙션을 점진적으로 쌓는 개발 방식에 적합했다. - AI가 구현 속도를 높여주면서 창업자와 디자이너는 코드 작성보다 문제 정의와 사용자 경험에 더 많은 시간을 쓸 수 있었다. 실무적으로는 AI 앱 제작 도구를 사용할 때 처음부터 완성도를 높이려 하기보다, 핵심 사용자와 문제를 구체적인 페르소나로 정의한 뒤 작은 프로토타입을 빠르게 만들고 실제 고객 피드백으로 반복 개선하는 접근이 효과적이다.

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

Gemini 3 Pro

Google의 Gemini 3 Pro에 포함된 Nano Banana Pro는 이미지의 색상·질감·구도·브랜드 정체성을 유지하면서도 빠르게 변형하고 정교하게 수정할 수 있는 생성형 이미지 모델이다. Figma는 이를 활용해 소셜 콘텐츠 변주, 다크 모드 전환, 인물 사진 보정, 제품 장면 합성 등 기존에 많은 시간이 걸리던 작업을 자연어 몇 마디로 처리할 수 있다고 소개한다. 핵심은 단순한 이미지 재생성이 아니라 원본의 맥락과 의도를 보존한 채 부분적으로 개선할 수 있다는 점이다. ## 브랜드 정체성을 유지하는 이미지 변형 - Figma Buzz, Figma Design, Figma Slides 등 다양한 제품에서 Nano Banana Pro를 테스트했다. - 새로운 이미지를 만들면서도 다음 요소를 비교적 안정적으로 유지한다. - 브랜드 색상과 팔레트 - 질감과 일러스트 스타일 - 타이포그래피와 로고 - 이미지의 구도와 시각적 분위기 - 단순한 설명만으로 기존 디자인의 “느낌”은 보존하면서 여러 스타일과 방향을 실험할 수 있다. - 작은 캐릭터와 넓은 배경의 비율, 가벼운 드로잉의 매력, 로고 형태 등을 유지한 채 변주하는 사례가 제시된다. ## 기존 작업을 상황에 맞게 수정 - 겨울철 뉴욕 활동을 소개하는 뉴스 앱 일러스트를 다크 모드용 이미지로 변환했다. - 기존 일러스트를 처음부터 다시 그리지 않고, 조명과 색상만 조정해 어두운 환경에 어울리도록 만들었다. - 수작업으로 여러 이미지를 다시 제작했다면 수 시간이 걸렸을 작업을 짧은 프롬프트로 처리할 수 있다. - 핵심은 원본 이미지를 버리고 새로 생성하는 것이 아니라, 기존 자산의 구조와 개성을 유지하며 특정 사용 맥락에 맞게 바꾸는 것이다. ## 새로운 구도와 장면으로 확장 - 천문학 앱 일러스트를 아늑한 공간에서 누군가 휴대폰으로 읽는 장면에 배치했다. - 모델은 일러스트를 휴대폰 화면에 자연스럽게 합성하고, 무드보드의 조명과 분위기도 반영했다. - 장면의 콘셉트에 맞춰 별빛 같은 요소를 추가하는 등 단순 합성을 넘어 창의적인 보완도 수행했다. - 회사 리더의 프로필 사진을 기존 임원 사진들과 어울리도록 다음과 같이 수정할 수 있다. - 촬영 구도 변경 - 카메라 각도 조정 - 배경 교체 - 브랜드 스타일에 맞춘 분위기 조정 - 특히 얼굴을 수정할 때 인물의 정체성과 likeness를 크게 왜곡하지 않는 점을 장점으로 강조한다. ## 여러 이미지와 모델을 결합한 장면 구성 - Figma Weave를 이용하면 브랜드 무드보드의 그래픽, 문구, 사진 등 여러 요소를 하나의 장면으로 합성할 수 있다. - Nano Banana Pro는 서로 다른 시각 자료를 결합하면서도 전체 장면의 일관성을 유지하는 데 활용된다. - Google의 Veo와 함께 사용하면 합성된 공간에 사람들의 활동이나 움직임을 추가해 영상으로 확장할 수 있다. - 그 밖에도 다음 모델과 조합할 수 있다. - 3D 모델 - 이미지 업스케일러 - 배경 제거 모델 - LLM 기반 프롬프트 개선 도구 - 여러 전문 도구를 조합해 모듈식으로 아이디어를 발전시키는 창작 환경을 만들 수 있다는 설명이다. ## Figma 제품 안에서 맥락을 유지한 편집 - Nano Banana Pro를 팀이 이미 사용하는 Figma 제품과 작업 흐름 안에서 활용할 수 있다는 점을 강조한다. - 이미지를 매번 새로 생성하지 않고 기존 이미지에 직접 수정을 요청할 수 있다. - 가능한 편집 사례는 다음과 같다. - 이미지 속 문구 수정 - 특정 색상만 변경 - 배경이나 구도 조정 - 얼굴과 인물의 자연스러운 유지 - 지역과 언어에 맞춘 타이포그래피 변경 - 원본 이미지의 맥락을 유지하면서 필요한 부분만 수정하므로, 브랜드 자산을 반복적으로 재작업하는 시간을 줄일 수 있다. Figma의 사례는 Nano Banana Pro를 완성품을 한 번에 생성하는 도구라기보다, 기존 디자인 자산을 보존하면서 빠르게 실험하고 수정하는 협업 도구로 바라본다. 브랜드 이미지, 제품 시안, 프레젠테이션 자료처럼 일관성이 중요한 작업에서 부분 편집과 반복적인 변주에 활용하는 것이 특히 효과적이다.

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

AI 시대의 디자인 시스템을

AI 시대의 디자인 시스템은 단순한 컴포넌트 라이브러리에서 팀의 취향·품질 기준·의사결정 맥락을 담는 살아 있는 프레임워크로 발전하고 있다. AI가 빠르게 결과물을 생성하더라도 디자인 시스템이 방향성과 제약을 제공해야 브랜드의 개성과 품질을 유지할 수 있다. 따라서 앞으로는 시스템을 더 풍부하게 문서화하고, AI가 활용할 수 있도록 구조화하며, 제품 제작 전반을 관리하는 역할까지 확장해야 한다. ## 디자인 시스템에서 ‘크래프트’를 전달하는 시스템으로 - AI는 결과물을 빠르게 만들지만, 기준이 없으면 팀의 비전과 어긋난 결과를 만들고 재작업을 늘릴 수 있다. - 디자인 시스템은 단순한 일관성 검사 도구가 아니라 팀의 취향과 창의적 정체성을 반복 가능하게 만드는 장치가 된다. - 컴포넌트, 레이아웃, 인터랙션에 디자이너의 판단 기준을 반영하면 AI가 제품 전반에 동일한 감각을 적용할 수 있다. - 목표는 속도를 높이면서도 제품의 인간적인 개성과 완성도를 잃지 않는 것이다. ## AI 탐색을 현실적인 선택지로 제한하기 - 기존에는 여러 디자인 방향을 검토하려면 각 시안을 수작업으로 제작해야 해 탐색 범위가 제한적이었다. - Figma Make 같은 프롬프트 기반 도구와 디자인 시스템을 결합하면 다양한 레이아웃, 색상, 컴포넌트 조합을 빠르게 생성할 수 있다. - 공유 컴포넌트와 검증된 스타일을 기반으로 하기 때문에 AI가 만든 시안도 실제 제품에 적용 가능한 수준에 가까워진다. - 여러 방향을 실험한 뒤 선택한 안을 처음부터 다시 구현하는 대신, 기존 시스템을 바탕으로 세부 조정만 하면 된다. - 즉, 디자인 시스템은 AI의 자유로운 탐색을 막는 제약이 아니라 유효한 탐색을 가능하게 하는 기반이다. ## AI가 이해할 수 있도록 시스템을 작성하기 - 기존 디자인 시스템은 브랜드와 조직을 잘 아는 디자이너·개발자가 암묵적인 맥락을 보완한다는 전제 아래 작성됐다. - AI는 조직의 브랜드, 비즈니스 목표, 제품 관습을 자동으로 추론하지 못하므로 명시적인 설명이 필요하다. - 토큰과 컴포넌트뿐 아니라 다음 내용을 문서화해야 한다. - 각 결정이 내려진 이유 - 사용 조건과 제약 사항 - 좋은 결과물과 나쁜 결과물의 사례 - 품질을 판단하는 기준 - 브랜드와 제품 맥락 - 문서, 코드, 디자인 전반의 빈틈을 줄이고 암묵지를 명시지로 바꾸는 것이 중요하다. - 시스템은 사람을 위한 참고 자료인 동시에 AI가 브랜드에 맞는 결과를 생성하기 위한 지식 기반이 된다. ## 컴포넌트 관리에서 제품 제작 거버넌스로 - AI 도구가 제품 제작 과정에 들어오면서 디자인 시스템 팀의 역할은 컴포넌트 라이브러리 유지보수를 넘어선다. - 전통적인 제품 직군이 아닌 구성원도 제품에 기여할 수 있게 되므로, 이들이 사용하는 AI 및 제작 도구까지 관리 범위에 포함된다. - 디자인 시스템 팀은 어떤 도구와 방식으로 제품이 만들어지는지, 결과물이 품질·브랜드 기준을 충족하는지 관리하는 역할을 맡게 된다. - 제공된 글은 이 부분에서 본문이 중단되어, 거버넌스의 구체적인 실행 방식과 다섯 번째 변화의 내용은 확인할 수 없다. AI를 도입할수록 디자인 시스템을 단순한 UI 자산 저장소로 취급해서는 안 된다. 컴포넌트와 토큰에 의사결정 맥락, 품질 기준, 사용 제약을 함께 기록하고, AI 생성 결과가 시스템 안에서 검증·개선되도록 운영하는 것이 실용적인 방향이다.

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

Gemini 3를

Gemini 3 Pro가 Figma Make의 실험적 모델로 제공되며, 디자인을 작동하는 코드 기반 프로토타입으로 전환하는 능력을 보여준다. Figma의 초기 테스트에서 다양한 레이아웃·스타일·인터랙션을 빠르게 탐색하면서도 디자인 충실도를 유지하는 점이 강점으로 나타났다. Gemini 3 Flash는 빠른 아이디어 발상과 수정에 적합한 경량 모델로 함께 제공된다. ## Figma Make에서 Gemini 3 Pro 제공 - Figma는 AI 모델을 다음 기준으로 평가한다. - 원래 디자인을 얼마나 정확하게 구현하는가 - 반복적인 작업을 얼마나 줄여주는가 - 팀의 창의적 탐색 범위를 얼마나 넓혀주는가 - Gemini 3 Pro는 다양한 레이아웃, 시각적 스타일, 인터랙티브 패턴을 탐색하는 데 강점을 보였다. - Figma Make의 실험적 모델 설정에서 활성화할 수 있다. - Gemini 3 Flash는 성능과 속도에 초점을 둔 모델로, 빠른 아이디어 구상과 반복적인 디자인 수정에 적합하다. ## 디자인에서 코드로의 전환 - Figma Design에서 제작한 황금빛 나뭇잎과 짙은 적갈색 배경의 추수감사절 감사 보드를 Figma Make로 구현했다. - Gemini 3 Pro는 다음 작업을 수행했다. - 나뭇잎을 SVG로 생성 - 화면 위에서 자연스럽게 움직이는 물리 효과 구현 - 마우스를 올리면 감사 메시지가 표시되는 인터랙션 추가 - Supabase를 연결해 사용자가 감사 메시지를 제출하도록 구성 - 단순한 시각적 콘셉트가 데이터 저장과 사용자 입력을 포함한 인터랙티브 프로토타입으로 확장됐다. ## 하나의 기능, 여러 시각적 스타일 - 새해 전야 RSVP 페이지를 대상으로 스타일 변환 능력을 테스트했다. - 처음에는 다음과 같은 Y2K 스타일을 적용했다. - 복고풍 미래주의 - 어두운 크롬 질감 - 분위기 있는 시각 언어 - 실제로 작동하는 RSVP 폼 - 이후 같은 기능을 “콘크리트 포에트리” 스타일로 변경했다. - 강렬하고 제한적인 타이포그래피 - 브루털리즘적 긴장감 - 장식을 최소화한 구성 - 스타일이 크게 바뀌어도 RSVP 폼의 핵심 기능은 유지됐다. - 각 스타일에 맞춰 애니메이션과 인터랙션 세부 요소도 일관성 있게 조정됐다. ## 디자인 시스템과 컴포넌트 활용 - Gemini 3 Pro를 이미 구축된 디자인 시스템 안에서 테스트했다. - Figma Make의 Make kits와 npm import를 통해 공유 라이브러리와 컴포넌트를 활용할 수 있도록 구성했다. - UI3 라이브러리 기반의 FigJam 템플릿에 캔버스 배경 스타일 전환 기능을 추가하도록 요청했다. - 모델은 다음 결과를 만들었다. - 12가지 배경 스타일 구현 - UI3 컴포넌트 사용 - 배경 스타일 전환 인터랙션 추가 - 텍스처 간 애니메이션 적용 - 스티키 노트의 레이어링과 크기 변화 효과 구현 - 복잡한 설명 없이도 기존 시스템의 구성 요소를 활용하면서 새로운 기능을 프로토타이핑했다. ## 디자이너의 역할 확대 - AI는 디자이너를 대체하기보다 탐색 가능한 디자인 공간을 넓히는 도구로 제시된다. - 모델이 디자인 의도와 시스템을 더 잘 이해할수록 다음 작업이 빨라진다. - 다양한 스타일 시도 - 인터랙션 검증 - 디자인 시스템 기반 기능 실험 - 코드로 구현된 프로토타입 제작 - 속도와 창의성이 서로 충돌하기보다, AI가 반복 작업을 줄여 디자이너가 방향 설정과 가능성 판단에 더 집중하게 만든다는 관점이다. Gemini 3 Pro는 높은 시각적 충실도와 인터랙션 구현이 필요한 프로토타입 제작에 적합하고, Gemini 3 Flash는 빠른 시안 생성과 반복 수정에 활용하는 것이 좋다. 다만 실제 제품 개발 전에는 생성된 코드와 데이터 연결, 접근성, 디자인 시스템 준수 여부를 별도로 검토해야 한다.

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

피그마, 인도에 새로운 (새 탭에서 열림)

피그마(Figma)는 인도 벵갈루루에 새로운 허브를 설립하며 세계에서 두 번째로 큰 시장인 인도 내 제품 개발 커뮤니티에 대한 투자를 본격화했습니다. 이번 확장은 AI 기술 도입이 활발한 인도 시장의 특성을 반영하여, 피그마가 단순한 디자인 도구를 넘어 제품 개발 전 과정을 아우르는 AI 기반 협업 플랫폼으로 진화하려는 전략적 움직임입니다. 이를 통해 피그마는 글로벌 사용자의 85%를 차지하는 해외 시장에서의 영향력을 강화하고 사용자 중심의 기술 혁신을 가속화할 방침입니다. **인도 시장의 전략적 가치와 AI 도입 현황** * 인도는 월간 활성 사용자(MAU) 기준 피그마의 세계 2위 시장이며, BSE100(인도 상장사 100대 기업) 기업의 40% 이상이 이미 피그마를 도입했습니다. * 현지 리서치 결과, 인도 디자이너의 93%가 업무에 AI를 활용하고 있으며, 개발자의 81%는 AI 기반 제품의 성공에 디자인이 과거보다 더 중요해졌다고 응답했습니다. * Flipkart, Zomato, Swiggy 등 인도의 대표적인 유니콘 기업들이 피그마를 통해 디자인과 개발의 간극을 줄이고 제품 출시 속도를 높이고 있습니다. **글로벌 네트워크 확장 및 커뮤니티 성장** * 피그마는 매출의 약 50%가 미국 외 시장에서 발생함에 따라 도쿄, 싱가포르, 런던, 파리, 베를린 등에 이어 벵갈루루에 신규 거점을 마련하며 글로벌 운영을 강화하고 있습니다. * 인도 내 'Friends of Figma' 커뮤니티 멤버는 약 25,000명에 달하며, 이들은 전 세계에서 가장 활발하게 디자인 시스템과 협업 툴을 활용하는 집단 중 하나로 꼽힙니다. **Figma Weave와 AI 중심의 제품 혁신** * 생성형 AI 플랫폼인 'Weavy'를 인수하여 'Figma Weave'를 새롭게 선보였으며, 이를 통해 캔버스 내에서 이미지, 비디오, 애니메이션, VFX 등 미디어 자산의 생성 및 전문적 편집이 가능해집니다. * **Figma Make**: 텍스트 프롬프트나 간단한 디자인 초안을 즉시 프로토타입이나 실제 앱 형태로 변환해 주는 기능을 지원합니다. * **영역별 특화 도구**: 개발 생산성을 높이는 'Dev Mode', 동적 웹사이트 제작을 돕는 'Figma Sites', 마케팅 에셋을 대량 생산하는 'Figma Buzz' 등 제품군을 확장했습니다. * **협업 도구 고도화**: 인터랙티브 프레젠테이션 툴인 'Figma Slides'와 고급 벡터 드로잉 도구인 'Figma Draw'를 통해 기획부터 실행까지의 워크플로우를 통합했습니다. 피그마는 이제 디자인 도구를 넘어 기획자, 디자이너, 개발자가 AI를 매개로 소통하는 통합 제품 개발 플랫폼으로 완전히 탈바꿈하고 있습니다. 기업들은 피그마의 새로운 AI 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

figma3분 읽기큐레이션 요약

제13호:

빠르게 변화하는 AI 시대에는 디자인 시스템이 품질과 일관성을 유지하는 기반이 된다. Figma는 디자인 시스템을 사람뿐 아니라 AI도 활용할 수 있도록 확장하고, Figma Make와 MCP 서버를 통해 디자인·코드·협업의 연결을 강화하고 있다. 또한 AI 도구가 작업을 정확히 이해하도록 파일 구조와 디자인 맥락을 명확하게 관리해야 한다고 강조한다. ## AI 시대의 디자인 시스템 - 디자인 시스템은 팀의 취향, 품질 기준, 디자인 의도를 반복적으로 확장하는 장치다. - AI가 디자인과 코드를 생성하는 환경에서는 잘 정리된 시스템이 결과물의 품질과 일관성을 높인다. - Schema by Figma 2025에서는 디자인 시스템을 AI 워크플로에 연결하는 방법을 소개했다. - Figma Make에 디자인 시스템의 맥락을 반영하고, MCP 서버를 통해 에이전트형 코딩 작업에서도 디자인 기준을 활용할 수 있도록 했다. - 목표는 AI가 임의의 결과를 만드는 것이 아니라, 팀의 컴포넌트·스타일·규칙에 맞는 결과를 생성하도록 하는 것이다. ## Figma Make로 새로운 작업 방식 만들기 - Figma Make를 활용하면 디자이너가 기존의 시각적 디자인 작업을 넘어 코드 기반 프로토타입과 제품 아이디어를 빠르게 만들 수 있다. - 디자인팀은 제품 로드맵을 다시 구성하거나, 반복적으로 사용할 시작 템플릿을 만드는 등 새로운 방식으로 도구를 활용하고 있다. - Maven Clinic, Pendo, ServiceNow, LinkedIn 등의 사례가 소개된다. - 프롬프트를 통해 아이디어를 발전시키면서 디자인, 코드, 협업 사이의 전환 비용을 줄일 수 있다. - 결과적으로 디자인 시스템은 완성된 화면을 관리하는 데 그치지 않고, 새로운 제품 경험을 탐색하는 출발점이 된다. ## AI가 이해할 수 있는 디자인 맥락 - AI 코딩 도구가 일상적인 개발 과정에 포함되면서 디자인 파일의 구조와 설명이 더욱 중요해졌다. - 개발자와 AI가 디자인 의도를 정확히 파악할 수 있도록 다음 요소를 명확하게 관리해야 한다. - 파일과 페이지의 체계적인 구성 - 의미가 드러나는 레이어와 컴포넌트 이름 - 디자인 결정에 대한 주석과 설명 - 디자인 시스템의 사용 규칙 - 화면 간 관계와 필요한 상태 정보 - 시각적으로 보기 좋은 파일만으로는 충분하지 않으며, 다른 사람이 작업 의도를 추론할 수 있는 맥락 정보가 필요하다. - 명확한 맥락은 에이전트형 코딩 도구가 디자인을 코드로 변환할 때 정확도와 효율성을 높인다. ## 디자인 시스템 관련 학습 자료 - Figma는 Schema 2025를 준비하며 디자인 시스템의 기초부터 AI 기반 자동화까지 기존 콘텐츠를 정리했다. - 디자인 시스템을 처음 도입하는 팀은 기본 개념과 운영 원칙부터 학습할 수 있다. - 변화가 큰 환경에서 디자인 리더가 팀의 회복력과 적응력을 높이는 방법도 함께 제안한다. - 디자인 시스템은 단순한 UI 컴포넌트 모음이 아니라, 팀의 협업 방식과 제품 품질을 지탱하는 조직적 기반으로 다뤄진다. 실무에서는 컴포넌트와 토큰을 정리하는 데서 멈추지 말고, 파일 구조·명명 규칙·주석·사용 지침까지 문서화하는 것이 좋다. 이렇게 구축한 디자인 시스템을 Figma Make나 AI 코딩 도구와 연결하면 빠른 생성 속도와 일관된 품질을 함께 확보할 수 있다.

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

ServiceNow와 Figma, (새 탭에서 열림)

ServiceNow와 Figma가 전략적 파트너십을 맺고 디자인 비전을 엔터프라이즈 애플리케이션으로 신속하게 전환할 수 있는 AI 기반 통합 기능을 공개했습니다. 양사는 Figma의 모델 컨텍스트 프로토콜(MCP) 서버를 활용해 디자인 환경과 ServiceNow의 AI 플랫폼을 직접 연결함으로써, 시각적 구상을 단 몇 분 만에 실제 작동하는 기업용 소프트웨어로 자동 생성하는 환경을 구축했습니다. 이를 통해 개발자는 코딩 시간을 획기적으로 단축하고, 기업은 보안과 거버넌스가 보장된 고품질 앱을 가속화된 속도로 배포할 수 있게 되었습니다. **MCP 기반의 지능형 설계 및 배포 프로세스** * **직접 프롬프트 입력:** ServiceNow의 통합 개발 환경(IDE) 사용자는 Figma 디자인 링크를 ServiceNow Build Agent에 직접 프롬프트로 제공할 수 있습니다. * **구조적 디자인 해석:** Figma의 MCP 서버와 Code Connect 기술을 통해 Build Agent는 단순한 이미지를 넘어 디자인의 레이아웃, 컴포넌트, 스타일을 구조적으로 깊이 있게 이해합니다. * **자동 앱 생성:** 에이전트가 해석된 디자인 컨텍스트를 바탕으로 보안성과 확장성을 갖춘 완전한 기능의 엔터프라이즈 애플리케이션을 자동으로 구축합니다. **디자인 의도와 코드 간의 간극 해소** * **고충실도(High-Fidelity) 구현:** 디자인의 세부 의도가 코드에 정확히 반영되도록 지원하여, 초기 프로토타입과 최종 제품 간의 차이를 최소화합니다. * **개발 생산성 향상:** 전문 개발자는 반복적인 수동 코딩 시간을 줄일 수 있으며, 비전공자나 제품 빌더들도 자신의 아이디어를 실제 작동하는 앱으로 빠르게 변환할 수 있습니다. * **차별화된 사용자 경험:** AI 기반 소프트웨어 개발 환경에서 디자인을 핵심 차별화 요소로 삼아 사용자 중심의 엔터프라이즈 경험을 제공합니다. **기업 수준의 보안 및 거버넌스 프레임워크** * **안전한 인증 체계:** OAuth 2.0 인증과 보안 서버 간 통신을 사용하여 데이터 프라이버시와 규정 준수를 보장합니다. * **데이터 제어:** 모든 토큰은 고객의 ServiceNow 인스턴스 내에 저장되며, 외부로 유출되지 않는 안전한 통신 환경을 유지합니다. * **내장된 관리 기능:** 생성된 모든 앱은 ServiceNow 플랫폼의 권한 설정, 감사 추적(Audit trails), 버전 관리 기능을 그대로 상속받아 기업의 거버넌스 표준을 충족합니다. 이번 통합 기능은 ServiceNow Store의 최신 Build Agent 릴리스를 통해 제공됩니다. 디자인과 개발 프로세스의 단절을 줄이고 엔터프라이즈 앱 배포의 효율성을 극대화하려는 조직이라면, Figma의 MCP 통합을 통해 워크플로우를 자동화하고 제품의 시장 출시 속도를 높이는 것을 적극 권장합니다.

figma3분 읽기큐레이션 요약

Figma Weave를 소개합니다:

Figma는 생성형 AI 미디어 제작 플랫폼 Weavy를 인수하고, 이를 **Figma Weave**로 통합한다고 발표했습니다. Figma는 AI가 생성한 결과물을 최종 결과가 아닌 창작의 출발점으로 보고, 인간의 편집·판단·기술과 AI 생성을 결합해 이미지·영상·애니메이션·모션 디자인·VFX 제작 기능을 강화하려 합니다. Weave는 여러 AI 모델과 전문 편집 도구를 브라우저 기반 캔버스에서 제공하며, Figma의 창작·협업 플랫폼 확장을 이끌 예정입니다. ## Figma Weave 인수와 AI 창작 비전 - Figma는 2025년 10월 30일 Weavy 인수를 발표했습니다. - Weavy는 인수 후 **Figma Weave**라는 이름으로 Figma 플랫폼에 합류합니다. - 주요 확장 분야는 다음과 같습니다. - 이미지 생성 및 편집 - 영상 제작 - 애니메이션과 모션 디자인 - 시각효과(VFX) - Figma는 첫 번째 프롬프트의 결과를 완성품으로 보지 않고, 창작자가 다듬고 발전시킬 수 있는 새로운 매체로 바라봅니다. - 단순히 “충분히 괜찮은” AI 결과물을 넘어, 인간의 감각과 전문성을 더해 독창적인 결과를 만들어야 한다는 관점을 강조합니다. ## 생성형 AI와 전문 편집의 결합 - Weavy는 여러 생성형 AI 모델을 하나의 브라우저 기반 캔버스에서 사용할 수 있도록 제공합니다. - 작업 목적에 따라 모델을 선택할 수 있습니다. - **Seedance, Sora, Veo**: 영화적 영상 제작 - **Flux, Ideogram**: 사실적인 이미지 생성 - **Nano-Banana, Seedream**: 정밀한 결과와 세부 조정 - AI 생성 결과에 수작업 편집을 결합할 수 있습니다. - 조명 조정 - 객체 마스킹 - 색보정 - 생성 요소의 합성 및 수정 - 하나의 결과물이 다음 작업의 입력으로 이어지는 유연한 미디어 파이프라인을 제공합니다. ## 노드 기반 작업 방식 - Weavy의 핵심은 생성 및 편집 과정을 시각적으로 연결하는 **노드 기반 캔버스**입니다. - 결과물을 여러 갈래로 분기하고, 서로 다른 버전을 리믹스하거나 반복적으로 개선할 수 있습니다. - 탐색적인 AI 생성과 정밀한 전문 편집을 하나의 작업 흐름에서 결합합니다. - 단순한 자동화 도구가 아니라, 사용자가 창작 과정 전체를 통제할 수 있는 환경을 지향합니다. - Figma는 Weavy가 접근성, 단순성, 강력한 기능 사이의 균형을 잘 구현했다고 평가했습니다. ## 다양한 창작 분야에서의 활용 - Weavy는 출시 후 1년이 되지 않은 기간에도 독립 창작자부터 대기업까지 커뮤니티를 확장했습니다. - 활용 사례는 다음과 같습니다. - 건축가: 공간 스테이징 이미지 생성 - VFX 아티스트: 게임·방송·영화용 효과 제작 - 마케터: 소셜 미디어용 영상과 배너 제작 - 디자이너: 제품 목업, 브랜딩, 디자인 에셋 제작 - 텔아비브를 중심으로 팀을 확장하고 있으며, 향후 Figma Weave의 제품 로드맵을 지원할 계획입니다. ## Weavy의 정체성과 Figma의 확장 - Weavy는 2024년 텔아비브에서 설립된 AI 기반 미디어 생성·편집 플랫폼입니다. - 주요 구성 요소는 다음과 같습니다. - 최신 AI 모델 - 전문 편집 도구 - 시각적 노드 기반 작업 공간 - Weavy는 창작을 단순화하는 데 그치지 않고, 창작자의 과정과 숙련도를 보존하면서 콘텐츠 제작을 확장하는 것을 목표로 합니다. - 이를 **“예술적 지능(artistic intelligence)”**이라고 표현하며, 인간의 예술성과 지능형 시스템의 결합을 강조합니다. - Figma는 이번 인수를 통해 기존 디지털 제품 디자인 중심 플랫폼에서 더 넓은 미디어 창작 플랫폼으로 확장하려 합니다. Figma Weave는 AI가 만든 결과물을 그대로 사용하는 대신, 생성·편집·반복·협업을 하나의 흐름으로 연결하려는 시도입니다. 생성형 AI를 단순한 이미지·영상 생성기로 보기보다 전문 창작자의 작업을 강화하는 도구로 활용하려는 팀이라면, 노드 기반 편집과 다양한 모델을 결합하는 접근 방식에 주목할 만합니다.

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

Schema 2025:

Figma의 Schema 2025는 디자인 시스템을 정적인 규칙 모음에서 디자인·코드·AI를 연결하는 살아 있는 기반으로 발전시키는 방향을 제시한다. 이를 위해 여러 브랜드를 지원하는 컬렉션, 컴포넌트 확장성을 높이는 슬롯, 변수 사용을 자동 점검하는 AI 기반 린터 등을 발표했다. 핵심 목표는 시스템의 일관성을 유지하면서도 팀과 제품별 유연성, 협업 범위, 개발 연계를 강화하는 것이다. ## AI 시대의 디자인 시스템 - 제품·디자인·엔지니어링의 경계가 흐려지고, 더 많은 사람과 AI 도구가 제품 개발에 참여하고 있다. - 디자인 시스템은 팀 간 일관성을 유지하는 공유 언어를 넘어, AI가 디자인과 코드를 이해하도록 돕는 번역 계층으로 확장되고 있다. - Figma는 디자인 시스템의 발전 방향을 다음 세 가지로 제시한다. - 강력한 기능과 유연성의 균형 - 디자인과 코드 사이의 연결 강화 - 더 많은 사람이 디자인 프로세스에 참여할 수 있도록 영향력 확대 ## 브랜드 확장을 지원하는 Extended collections - 기존 변수 컬렉션은 단일 브랜드나 단순한 테마 관리에는 적합하지만, 여러 제품과 브랜드를 운영하는 기업에는 한계가 있었다. - Extended collections를 사용하면 디자인 시스템 관리자가 기본 시스템을 화이트라벨 형태로 배포할 수 있다. - 각 제품이나 브랜드의 디자이너는 기본 시스템을 바탕으로 자체 테마를 추가하고, 이를 게시·재사용할 수 있다. - 확장 컬렉션은 부모 디자인 시스템과 연결되어 다음 변경 사항을 자동으로 상속한다. - 새 변수 추가 - 색상 업데이트 - 핵심 시스템의 기타 변경 - 팀이 명시적으로 재정의한 색상과 값은 유지되므로, 중앙 통제와 브랜드별 자율성을 함께 확보할 수 있다. - 2025년 11월 제공 예정으로 소개됐다. ## 컴포넌트 유연성을 높이는 Slots - 기존 컴포넌트 인스턴스는 구조가 제한적이었다. - 예를 들어 드롭다운 컴포넌트에 새 항목을 추가하려면 미리 숨겨 둔 항목을 활성화하거나, 컴포넌트를 분리(detach)해야 했다. - 컴포넌트를 분리하면 디자인 시스템과의 연결이 끊겨 일관성과 개발 핸드오프가 약화된다. - Slots를 사용하면 인스턴스 내부에 사용자가 직접 레이어를 추가할 수 있다. - 특정 슬롯이 어떤 인스턴스를 허용할지도 지정할 수 있어 다음 효과를 얻는다. - 컴포넌트 사용성 향상 - 디자인 시스템 규칙 준수 - 컴포넌트 연결을 유지한 채 콘텐츠 확장 - 슬롯 기능은 얼리 액세스로 제공될 예정이며 별도 신청이 필요하다. ## AI 기반 변수 검수 기능, Check designs - 개발 핸드오프 과정에서 실제 값 대신 어떤 디자인 토큰이나 변수를 사용해야 하는지 확인하는 일이 자주 발생한다. - Check designs 린터는 디자인을 개발 준비 상태로 표시하거나 빠른 실행 메뉴를 통해 실행할 수 있다. - 시스템은 원시 값과 대응하는 변수를 비교해, 디자인 시스템에 맞지 않는 요소를 찾아낸다. - Figma의 사용자 지정 모델이 현재 맥락에 적합한 변수를 추천한다. - 디자이너는 추천 내용을 검토한 뒤 적용할 수 있으므로, 자동화와 최종 판단을 함께 유지할 수 있다. - 이를 통해 개발자는 변수 사용이 정리된 디자인을 전달받고, 핸드오프 과정의 추가 질문을 줄일 수 있다. - 조직 또는 엔터프라이즈 전체 좌석 플랜 사용자는 얼리 액세스를 신청할 수 있다. ## 디자인 시스템 운영 방향 - 디자인 시스템이 규모가 커질수록 단순한 표준화만으로는 다양한 제품·브랜드·플랫폼 요구를 충족하기 어렵다. - Figma의 이번 업데이트는 중앙 시스템의 일관성을 유지하면서도 제품 팀이 필요한 부분을 확장하도록 설계됐다. - 변수, 컴포넌트, AI 검수 기능을 결합해 디자인 시스템을 다음과 같은 운영 기반으로 만들려는 접근이다. - 중앙에서 관리되는 공통 규칙 - 제품별로 확장 가능한 테마와 콘텐츠 - 디자인 단계에서부터 검증되는 개발 연계성 - 사람이 만든 디자인 의도를 AI가 이해할 수 있는 구조 여러 브랜드를 운영한다면 Extended collections로 공통 토큰과 브랜드별 재정의를 분리하고, 복잡한 컴포넌트는 Slots를 통해 detach 없이 확장하는 방식이 유용하다. 또한 Check designs를 활용해 개발 핸드오프 전에 변수와 토큰 사용을 검수하면 디자인 시스템의 일관성과 구현 효율을 함께 높일 수 있다.

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

대규모 가시성: Figma가 (새 탭에서 열림)

피그마(Figma)는 서비스 규모가 확장됨에 따라 복잡해진 권한 관리 로직을 효율적으로 처리하기 위해 자체적인 권한 정의 언어(DSL)인 'Permit'을 구축했습니다. 기존의 파편화된 명령형 코드 방식에서 벗어나 선언적인 DSL을 도입함으로써 권한 정책의 일관성을 확보하고 보안 취약점 발생 가능성을 획기적으로 낮췄습니다. 이를 통해 복잡한 사용자-리소스 간의 관계를 명확하게 모델링하고 성능 저하 없이 대규모 시스템에 적용할 수 있는 권한 검증 인프라를 완성했습니다. ### 기존 시스템의 한계와 권한 관리의 복잡성 * 권한 체크 로직이 Go 애플리케이션 코드 곳곳에 흩어져 있어, 특정 리소스에 대한 접근 규칙을 한눈에 파악하거나 일관되게 수정하기 매우 어려웠습니다. * 팀, 프로젝트, 파일로 이어지는 계층 구조뿐만 아니라 엔터프라이즈 설정, 공유 링크 등 수많은 변수가 결합되면서 권한 로직 수정 시 예기치 않은 부작용(side effects)이 발생할 위험이 컸습니다. * 성능 최적화를 위해 데이터베이스 쿼리에 권한 로직을 직접 포함시켜야 하는 경우가 많았는데, 이는 비즈니스 로직과 권한 정책이 뒤섞여 코드 유지보수성을 떨어뜨리는 결과로 이어졌습니다. ### 관계 기반 접근 제어(ReBAC)와 Permit DSL 설계 * 구글의 Zanzibar 시스템에서 영감을 얻어, 객체 간의 관계를 중심으로 권한을 정의하는 ReBAC(Relationship-Based Access Control) 모델을 피그마의 환경에 맞게 커스텀화했습니다. * Permit DSL은 'Actor(사용자)', 'Resource(파일, 팀 등)', 'Action(편집, 보기 등)' 간의 관계를 선언적인 문법으로 정의합니다. * 예를 들어 "사용자가 파일이 속한 프로젝트의 편집자라면 해당 파일에 대한 편집 권한을 가진다"와 같은 전이적인(transitive) 관계를 직관적인 문법으로 표현할 수 있게 되었습니다. ### 컴파일러 및 성능 최적화 기술 * DSL로 작성된 정책을 런타임에 해석하는 대신, 효율적인 Go 코드로 변환하는 자체 컴파일러를 개발하여 실행 성능을 극대화하고 런타임 오버헤드를 최소화했습니다. * 컴파일 단계에서 정적 분석을 수행하여 순환 참조나 정의되지 않은 권한 사용 등 논리적 오류를 사전에 차단합니다. * 특히 '부분 평가(Partial Evaluation)' 기법을 도입하여, 권한 로직을 SQL 쿼리의 WHERE 절로 변환함으로써 수백만 개의 리소스 중 사용자가 접근 가능한 항목만 효율적으로 필터링할 수 있도록 구현했습니다. ### 안전한 전환을 위한 검증 및 배포 프로세스 * DSL 내부에 유닛 테스트를 직접 작성할 수 있는 기능을 포함시켜, 정책 변경이 기존의 기대 결과와 일치하는지 배포 전 즉시 검증할 수 있는 환경을 마련했습니다. * '섀도 모드(Shadow mode)'를 활용하여 실제 트래픽에서 기존의 레거시 권한 로직 결과와 새로운 Permit 시스템의 결과를 실시간으로 비교하며 데이터 정합성을 확인했습니다. * 성능 모니터링을 통해 권한 확인 작업이 전체 API 응답 시간에 미치는 영향을 정밀하게 추적하며 안정성을 확보했습니다. 권한 관리는 단순한 기능을 넘어 대규모 SaaS의 보안과 확장성을 결정짓는 핵심 인프라입니다. 피그마의 사례처럼 권한 로직을 비즈니스 코드에서 분리하여 '정책(Policy)'으로서 중앙 집중화하고 코드화하는 전략은, 제품의 복잡도가 높아질수록 개발 생산성과 시스템 안정성을 동시에 잡을 수 있는 가장 강력한 방법 중 하나입니다.

figma3분 읽기큐레이션 요약

Figma Buzz로 브랜드 모멘텀

Figma Buzz는 브랜드·마케팅 팀이 디자인 시스템을 지키면서도 대규모로 마케팅 자산을 제작하도록 돕는 도구다. 이번 업데이트에서는 디자인 시스템 기반의 유연한 템플릿, 외부 업무 도구를 연결하는 플러그인, 영상 트리밍 기능을 추가했다. 이를 통해 디자이너는 브랜드 가이드라인을 통제하고, 마케터는 다양한 채널과 캠페인에 맞게 자산을 직접 수정할 수 있다. ## 디자인 시스템과 연결된 구성 가능한 템플릿 - Figma Design에서 컴포넌트 세트와 컴포넌트 속성을 사용해 만든 템플릿을 Figma Buzz로 복사할 수 있다. - 복사된 템플릿에서는 디자인 시스템의 속성이 자동으로 작동한다. - 마케터는 수백 개의 템플릿 변형을 일일이 찾지 않고, 하나의 템플릿 세트 안에서 필요한 옵션을 선택할 수 있다. - 템플릿의 **Change layout** 패널에서 다음과 같은 작업이 가능하다. - Instagram, LinkedIn 등 채널에 맞는 레이아웃 선택 - 드롭다운을 통한 레이아웃 변형 전환 - 날짜, 로고, CTA 등의 요소 표시 여부 토글 - 브랜드가 승인한 컴포넌트 인스턴스 교체 - 색상 조합, 일러스트레이션 등 허용된 디자인 요소 변경 - 디자이너는 편집 가능한 범위에 제약을 둘 수 있고, 마케터는 브랜드 규칙을 벗어나지 않으면서 다양한 결과물을 만들 수 있다. ## 플러그인을 통한 외부 도구 연동 - Figma Buzz에 플러그인 탭이 추가되어, 기존 Figma 생태계의 외부 도구를 작업 화면에서 직접 사용할 수 있다. - 초기 플러그인은 디지털 자산 관리, 번역 관리, 애니메이션 등의 마케팅 업무에 초점을 맞춘다. - 팀은 Figma Buzz를 떠나지 않고 승인된 자산을 불러오거나, 완성한 디자인을 외부 시스템에 업로드할 수 있다. - 조직의 필요에 따라 내부용 플러그인을 직접 만들고 게시할 수도 있다. ### 디지털 자산 관리 시스템 연동 - 대규모 이미지·디자인 자산을 관리하는 DAM과 연결해 브랜드 승인 이미지를 바로 검색하고 가져올 수 있다. - 최신 디자인을 DAM에 업로드해 자산 라이브러리와 동기화할 수 있다. - 소개된 DAM 플러그인은 다음과 같다. - Air - Brandfolder - Bynder - OrangeLogic ### 번역 관리 시스템 연동 - 번역 관리 시스템(TMS)의 번역문을 Figma Buzz 템플릿으로 직접 가져올 수 있다. - 캠페인 문구를 여러 언어로 현지화하고, 실제 디자인 맥락 안에서 번역 결과를 확인할 수 있다. - 마케팅·번역·디자인 팀 간의 협업과 글로벌 캠페인 확장에 필요한 컨텍스트 전환을 줄인다. ### 애니메이션 및 기타 플러그인 - 애니메이션 제작 등 디지털 콘텐츠 업무를 지원하는 플러그인도 제공된다. - 마케팅 팀은 자산 관리, 번역, 모션 작업에 사용하는 기존 도구를 Figma Buzz와 연결해 하나의 제작 흐름으로 통합할 수 있다. ## Figma Buzz 안에서 영상 트리밍 - Figma Buzz에서 영상의 필요한 구간만 직접 잘라 사용할 수 있다. - 별도의 영상 편집 도구를 거치지 않고, 마케팅 자산 안에서 영상이 재생되는 범위를 조정할 수 있다. - 소셜 미디어 게시물, 디지털 광고, 이벤트 홍보물처럼 영상 길이와 시작·종료 지점이 중요한 자산을 더 세밀하게 제어할 수 있다. ## 업데이트의 배경과 목표 - Figma Buzz는 제품 출시 이후 브랜드와 마케팅 팀이 소셜 게시물, 디지털 광고, 이벤트 홍보물 등을 대규모로 제작하도록 설계됐다. - 기존에도 영상 가져오기·내보내기, 팀 라이브러리 연결, Unsplash 이미지 추가 기능이 제공됐다. - 이번 업데이트는 단순한 템플릿 제작을 넘어 다음 세 가지를 강화한다. - 브랜드 일관성을 유지하는 편집 제어 - 마케팅 업무에 필요한 외부 시스템 연동 - 이미지뿐 아니라 영상까지 포함한 자산 제작 유연성 브랜드 디자이너는 디자인 시스템과 승인된 옵션을 중심으로 템플릿을 설계하고, 마케팅 팀은 이를 활용해 채널별 자산을 빠르게 제작하는 방식으로 Figma Buzz를 활용하는 것이 효과적이다. 특히 DAM·TMS를 이미 사용 중인 조직이라면 플러그인 연동을 통해 자산 검색과 번역 작업의 반복을 크게 줄일 수 있다.

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

디자인 시스템: 기초부터 앞으로

디자인 시스템은 대규모 제품에서 시각적 일관성을 유지할 뿐 아니라 디자인과 개발 사이의 간극을 줄이는 공통 기반이다. AI로 작업 속도와 아이디어 확장이 빨라질수록, 원칙과 구성 요소를 체계화한 디자인 시스템의 중요성은 더욱 커진다. 성공적인 시스템을 위해서는 명확한 문서화와 지속적인 성과 측정이 필수적이다. ## 디자인 시스템의 기원과 발전 - 디자인 시스템은 초기 그래픽 디자인과 인쇄 매체의 스타일 가이드, 타이포그래피 표준에서 출발했다. - 20세기 중반 기업 브랜드의 중요성이 커지면서 일관된 브랜드 정체성을 위한 종합 가이드라인이 발전했다. - 디지털 전환 이후 IBM, Microsoft, Apple, Google 등은 이러한 원칙을 디지털 인터페이스로 확장했다. - 오늘날의 디자인 시스템은 운영체제 규칙과 UI 패턴을 표준화하고, 내부 팀과 외부 개발자가 일관된 제품 경험을 만들도록 돕는다. - 기존 인쇄 디자인 시스템을 디지털 인터페이스로 전환한 미국 국립공원관리청 사례처럼, 오래된 디자인 원칙도 디지털 환경에 맞게 재해석할 수 있다. ## 문서화를 통한 도입 확대 - 문서화는 추상적인 디자인 원칙을 실제 작업 지침으로 바꾸는 역할을 한다. - 디자이너와 개발자가 시스템을 어떻게 사용해야 하는지 알 수 있는 공통 참고점이 되어 사용에 대한 자신감을 높인다. - Alaska Airlines의 디자인 시스템 Auro는 도입 과정에서 문서화를 우선시했다. - Figma의 오토 레이아웃 사용법 - 브랜치 병합 방법 - 주요 기능을 작업에 적용하는 방법 - 문서화만으로 adoption이 보장되지는 않는다. - 역할에 따라 필요한 정보가 다르므로 문서는 다음과 같이 다양하게 제공되어야 한다. - 개발자에게 필요한 상세 사양 - 디자이너를 위한 사용 지침 - 전체 팀이 이해할 수 있는 고수준 원칙 - 시각적 예시와 맥락 설명 - 디자인 과정에 참여하는 직군이 늘어날수록 문서는 명확하고 쉽게 접근할 수 있어야 한다. ## 디자인 시스템의 ROI 측정 - 디자인 시스템의 비즈니스 효과는 정량적 지표로 추적할 수 있다. - 활용 가능한 주요 지표는 다음과 같다. - 구성 요소와 기능의 사용량 - 팀과 프로젝트의 도입률 - 디자인 일관성 점수 - athenahealth는 일관성 점수를 분석하는 과정에서 특정 컨테이너 컴포넌트의 detach 증가를 발견했다. - 컴포넌트가 분리되는 현상은 다음 문제를 나타낼 수 있다. - 컴포넌트의 버그 - 현재 기능으로 충족되지 않는 개선 요구 - 기존 요소를 예상하지 못한 방식으로 조합하는 사용 패턴 - 따라서 지표는 단순히 성공 여부를 판단하는 수단이 아니라, 시스템의 결함과 사용자 요구를 발견하는 피드백 수단으로 활용해야 한다. ## 디자인 시스템이 맡는 역할 - 디자인과 개발 간의 커뮤니케이션 비용을 줄인다. - 반복적인 UI 제작을 표준화해 작업 효율을 높인다. - 여러 팀과 제품에 걸쳐 일관된 사용자 경험을 유지한다. - AI가 생성한 결과물을 검토하고 조정할 수 있는 기준과 제약을 제공한다. - 조직이 커질수록 개인의 경험이나 구두 지식에 의존하지 않고, 공유된 규칙과 문서에 기반해 협업하도록 만든다. 실무에서는 처음부터 거대한 시스템을 만들기보다 핵심 컴포넌트와 사용 규칙부터 정의하고, 역할별 문서와 사용 데이터를 함께 구축하는 것이 좋다. 특히 detach, 미사용 컴포넌트, 도입률 같은 신호를 정기적으로 분석하면 디자인 시스템을 실제 팀의 필요에 맞게 개선할 수 있다.

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

Figma에서 접근성을 개선하는

Figma는 키보드만으로 캔버스와 댓글을 조작하고, 스크린 리더로 파일 내용을 더 정확히 이해할 수 있도록 15가지 이상의 접근성 기능을 출시했다. 제품별 키보드 단축키, 더 논리적인 포커스 이동, 풍부한 객체 설명과 서식 정보, 향상된 색상 대비가 포함된다. 이를 통해 장애가 있는 사용자뿐 아니라 장시간 작업하거나 다양한 환경에서 Figma를 사용하는 모든 사용자의 탐색성과 작업 흐름을 개선하는 것이 목표다. ## 캔버스 조작을 위한 키보드 기능 확대 - 키보드만으로 캔버스 객체를 이동·조정·정렬할 수 있는 기능이 제품 전반으로 확대됐다. - **Figma Slides** - 발표자 노트 크기 조정 - AI를 활용한 글쓰기 톤 변경 - **FigJam** - 표의 행과 열 추가·삭제·순서 변경 - 스탬프, 투표, 와시 테이프 추가 및 조정 - AI 요약, 임베드 링크·동영상 같은 캔버스 객체 탐색 - 마커 선과 형광펜 스트로크 선택 및 조정 - **Figma Design** - 선 추가·선택·조정 - 룰러 가이드 추가·삭제·편집 - 타원에서 호(arc) 생성 및 편집 - **공통 기능** - 편집 모드와 보기 전용 모드에서 링크 열기 - 키보드로 링크 사이를 이동 ## 댓글과 Dev Mode 주석 탐색 - 댓글을 추가하고, 위치를 옮기고, 댓글 간 이동을 키보드 단축키로 처리할 수 있다. - Dev Mode 주석도 키보드로 추가·이동·탐색할 수 있다. - 피드백을 확인하거나 답변할 때 포커스가 흐트러지지 않도록 설계되어 협업과 핸드오프 과정이 개선된다. - 댓글 관련 기능은 베타 제품에서는 제공되지 않을 수 있다. ## 사용자 설정을 통한 조작 방식 개인화 - 입력 중 Figma 전용 단축키가 동작하지 않도록 설정할 수 있다. - 다른 사용자가 스포트라이트를 사용할 때 자동으로 따라가는 기능을 켜거나 끌 수 있다. - 사용자는 작업 방식이나 보조기술 사용 환경에 맞춰 키보드 동작을 조정할 수 있다. ## 스크린 리더 지원 강화 - 버튼, 메뉴, 패널 등 인터랙티브 요소를 Tab 키로 이동할 때 더 논리적인 순서를 따른다. - 메뉴 열기, 버튼 실행, 툴바 옵션 선택 등 특정 동작으로 바로 이동할 수 있다. - 객체를 읽을 때 유형, 이름, 상태 등 더 자세한 정보가 제공된다. - 새 댓글이나 파일 변경 사항 같은 중요한 업데이트가 더 일관되게 안내된다. - 굵게, 기울임, 목록, 링크 등 서식 있는 텍스트 구조를 스크린 리더가 보존해 읽는다. - Buzz와 Slides의 캔버스 객체도 스크린 리더가 인식하고 안내한다. - 이러한 개선은 캔버스의 객체 순서를 파악하고 파일 변경 사항을 놓치지 않도록 돕는다. ## 향상된 색상 대비 - 간단한 토글로 라이트 모드와 다크 모드 모두에서 인터페이스의 색상 대비를 높일 수 있다. - 접근성 설정, Actions 메뉴, General 설정에서 기능을 활성화할 수 있다. - 텍스트와 아이콘의 가독성이 높아지고, 버튼과 외곽선이 더 뚜렷하게 표시된다. - 인터페이스 구조를 파악하고 필요한 요소를 빠르게 찾기 쉬워진다. - 햇빛이나 강한 조명 아래에서도 화면을 보기 쉬우며, 장시간 화면을 사용하는 경우 눈의 부담을 줄일 수 있다. ## 실용적인 활용 키보드 중심으로 작업하는 사용자는 Figma의 전체 키보드 컨트롤 목록을 확인해 자주 쓰는 캔버스·댓글 단축키를 익히는 것이 좋다. 스크린 리더 사용자는 객체 설명과 서식 있는 텍스트 지원을 활용하고, 일반 사용자도 색상 대비 설정을 활성화하면 장시간 작업이나 밝은 환경에서 더 편하게 Figma를 사용할 수 있다.

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

Figma Make와 함께 디자인

Figma Make는 자연어 프롬프트와 기존 디자인을 바탕으로 작동하는 고충실도 프로토타입을 만들어, 아이디어를 빠르게 검증하고 공유하도록 돕는다. 글은 Maven Clinic, Pendo, ServiceNow, LinkedIn의 사례를 통해 디자인팀이 보류된 아이디어를 되살리고, 새로운 방향을 탐색하며, 협업하고, 디자인 시스템의 일관성을 유지하는 방법을 소개한다. 핵심은 디자이너가 반복적인 제작보다 문제 정의와 전략, 사용자 경험의 완성도에 더 집중하게 된다는 점이다. ## Figma Make가 디자인 탐색을 바꾸는 방식 - Figma Make는 프롬프트를 입력해 앱과 인터페이스를 생성하는 도구다. - 초기 아이디어를 단순한 목업이 아니라 직접 조작할 수 있는 프로토타입으로 발전시킨다. - 프로토타입을 통해 팀은 기능의 타당성, 사용자 흐름, 마이크로인터랙션을 더 빠르게 검토할 수 있다. - 디자인팀은 반복적인 레이아웃 제작과 프로토타이핑에 쓰는 시간을 줄이고, 취향·전략·비전에 집중할 수 있다. - Figma Make에서 만든 결과물을 Figma Design 캔버스로 복사해 세부 수정과 반복 작업을 이어갈 수 있다. ## 보류된 아이디어를 제품 로드맵으로 되돌리기 Maven Clinic은 난임 클리닉을 지도에서 찾는 기능을 출시 일정 때문에 보류했지만, Figma Make로 기능의 가능성을 설득할 수 있는 인터랙티브 프로토타입을 제작했다. - 초기 디자인을 Figma Make에 입력해 실제 제품처럼 보이고 작동하는 고충실도 프로토타입을 만들었다. - 완성도 높은 결과물이 Slack에서 널리 공유되고 CEO의 관심을 이끌어내면서, 우선순위에서 밀릴 수 있었던 기능을 다시 로드맵에 올렸다. - 다른 디자이너가 결과물을 수정한 뒤 Figma Make로 되돌리는 방식으로 디자인을 반복 개선했다. - 정적인 목업으로는 발견하기 어려운 마이크로인터랙션과 사용 흐름의 문제를 조기에 파악했다. - 팀은 “0에서 시작”하는 대신 어느 정도 구현된 상태에서 출발했고, 그 결과 클리닉 파인더 MVP를 4개 미만의 스프린트로 설계·개발·테스트·출시했다. - 2년 동안 백로그에 머물던 아이디어를 빠르게 검증 가능한 제품으로 전환한 사례다. ## 탐색과 협업을 위한 공통 활용 방향 글은 다음과 같은 네 가지 활용 방향을 제시한다. - **로드맵에 아이디어 되살리기**: 인터랙티브 프로토타입으로 이해관계자의 관심과 투자 결정을 이끌어낸다. - **미지의 영역을 탐색하기**: 여러 디자인 방향을 짧은 시간 안에 시도해 빈 캔버스에서 시작하는 부담을 줄인다. - **새로운 인터페이스를 함께 개선하기**: 디자이너와 제품·개발 등 다른 직군이 실제로 조작 가능한 결과물을 보며 구체적인 피드백을 주고받는다. - **초기 탐색에 디자인 시스템 반영하기**: 빠르게 만든 시안도 기존 제품의 시각 언어와 컴포넌트 체계를 유지해, 탐색과 일관성을 동시에 확보한다. ## 프로토타입이 PRD보다 먼저 올 수 있다 - Maven Clinic 사례에서는 프로토타입을 먼저 만든 뒤, 실제로 잘 작동한 부분과 부족한 부분을 바탕으로 제품 요구사항 문서(PRD)를 작성했다. - Figma Make 결과물은 추상적인 요구사항을 구체적인 사용자 흐름으로 바꿔준다. - 팀은 “무엇을 만들 것인가”뿐 아니라 “어떤 상호작용이 필요한가”, “어디서 사용성이 떨어지는가”를 초기에 논의할 수 있다. - 따라서 프로토타입이 요구사항을 검증하는 산출물을 넘어, 요구사항 자체를 구체화하는 출발점이 될 수 있다. ## 디자이너의 역할 변화 Figma Make는 디자이너의 역할을 실행 중심에서 판단과 방향 설정 중심으로 이동시킨다. - 반복적인 화면 제작보다 다양한 가능성을 빠르게 비교한다. - 팀의 논의를 시각적이고 조작 가능한 결과물로 전환한다. - 초기 단계에서 사용자 경험과 세부 상호작용을 검증한다. - 최종적으로는 생성된 결과물을 그대로 사용하는 것이 아니라, 디자이너의 취향과 전략적 판단으로 다듬는다. 실무에서는 Figma Make를 완성품 생성 도구로 보기보다, 아이디어를 빠르게 구체화하고 팀의 피드백을 모으는 탐색 도구로 활용하는 것이 효과적이다. 특히 장기간 보류된 기능이나 이해관계자의 동의를 얻기 어려운 아이디어를 실제로 경험 가능한 프로토타입으로 만들어 검증하는 데 유용하다.

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

6가지 뛰어난 Figma 제작 사례

Figma Make-a-thon에는 1만 명이 넘는 창작자가 참여해, 아이디어를 빠르게 인터랙티브 프로토타입으로 구현했다. 수상작들은 단순히 작업을 지시하는 데 그치지 않고 제품 구조와 상태 관리, 컴포넌트 상호작용까지 명확히 정의하며 AI와 반복적으로 협업했다. 특히 실험과 되돌리기를 적극 활용하면 코딩 경험이 부족해도 복잡한 도구를 발전시킬 수 있다는 점을 보여준다. ## Figma Make-a-thon의 목적과 규모 - Figma Make는 콘셉트와 실제 제작 사이의 간극을 줄이고, 아이디어를 빠르게 탐색·수정할 수 있도록 설계된 도구다. - Contra와 함께 글로벌 Make-a-thon을 개최했다. - 1만 명 이상의 창작자가 참여했으며, 총상금은 10만 달러, 그중 대상 상금 규모는 5만 달러였다. - 출품작에는 디자이너를 위한 *Severance* 테마 가상 방 탈출 게임, “Figma-Kart” 레이싱 게임 등이 포함됐다. - 심사 기준은 다음과 같았다. - 아이디어의 창의성과 실행력 - Figma Make를 활용한 프로토타입 제작의 혁신성 - AI 프롬프트를 설계하고 활용한 방식의 영리함 ## 작업 단위가 아니라 제품 구조를 정의하기 세바스찬 룸비의 **Frame by frame SVG animator**는 손으로 만든 애니메이션 제작 방식을 디지털 환경으로 옮긴 도구다. - Figma에서 SVG를 복사해 앱에 붙여넣으면 프레임 애니메이션을 만들 수 있다. - 완성한 애니메이션은 GIF로 내보낼 수 있다. - 화면 구조는 크게 나뉜다. - 상단: 프레임을 그리는 캔버스 - 하단: 프레임을 확인하고 새 프레임을 추가하는 영역 - 제작자는 구현 전에 다음과 같은 기술적 요소를 조사했다. - Figma Make에서 상태를 관리하는 방법 - 여러 컴포넌트가 서로 상호작용하는 방식 - 앱 구조를 어떻게 나누어야 디버깅하기 쉬운지 - 단순히 “애니메이션 앱을 만들어라”라고 요청하는 대신, 캔버스와 프레임 목록이라는 핵심 구조를 프롬프트에 포함했다. ## AI와의 반복적인 대화 및 실험 - 처음에는 구체적인 프롬프트 전략 없이 AI와 대화하듯 기능을 추가했다. - 초기 프롬프트는 두 개 정도였지만, 이후 약 80개의 프롬프트를 사용하며 계속 실험했다. - 완성된 계획을 한 번에 전달하기보다 결과를 확인하고 다음 아이디어를 추가하는 방식으로 발전시켰다. - 이런 방식은 빠른 프로토타이핑에는 유리하지만, 앱 구조를 이해하지 못하면 이후 버그 수정이 어려워질 수 있다. ## 되돌리기 기능을 안전망으로 활용하기 - Figma Make의 revert 기능은 새로운 아이디어를 부담 없이 시도하게 해준다. - 실험 결과가 좋지 않거나 앱이 충돌하면 현재 상태를 억지로 수정하기보다 이전 시점으로 돌아갈 수 있다. - 복잡한 버그를 해결할 때는 기존 코드를 계속 고치는 것보다, 문제가 발생하기 전 상태에서 다른 접근을 시도하는 편이 효과적일 수 있다. ## 비개발자에게도 필요한 기술적 이해 - 직접 코딩하지 않더라도 앱에 필요한 기본 개념을 이해하면 AI 결과를 더 잘 통제할 수 있다. - 상태 관리, 컴포넌트 간 상호작용, 화면 구조 같은 개념을 알고 있으면 프롬프트를 구체적으로 작성할 수 있다. - Figma Make가 코드를 생성하므로, 원하는 코드 구조와 동작 방식을 명확히 설명할수록 이후 디버깅이 쉬워진다. - 기술적인 판단이 어렵다면 다른 AI에게 상태 관리나 아키텍처에 대한 추천을 먼저 받아볼 수도 있다. ## 실용적인 적용 방법 - 처음부터 모든 기능을 설명하기보다 핵심 화면 구조와 사용자 흐름부터 정의한다. - AI가 생성한 결과를 실행해 본 뒤 작은 단위로 기능을 추가한다. - 상태와 컴포넌트의 관계를 프롬프트에 명시한다. - 큰 변경 전에는 되돌릴 수 있는 상태를 확보한다. - 오류가 반복되면 현재 결과를 계속 수정하기보다 이전 버전으로 돌아가 다른 구현 방향을 시도한다.

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