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

이 10가지 스킬을 시도해 보고—여러분의 스킬도 뽐내 보세요 | Figma 블로그

Figma의 ‘스킬’은 에이전트가 따를 작업 절차와 디자이너의 판단 기준을 담은 Markdown 지침 파일이다. 글은 디자이너가 자신의 스타일과 노하우를 스킬로 만들고, Figma 안에서 에이전트와 함께 작성·수정·실행할 수 있다고 설명한다. 이를 통해 반복 작업을 자동화하고, 개인의 디자인 감각을 팀의 워크플로에 확장할 수 있다. ## 디자이너의 판단을 담는 스킬 - 스킬은 엔지니어링 코드가 아니라, 에이전트가 따라야 할 순서화된 지침이나 프롬프트다. - 디자이너가 평소 사용하는 미적 기준, 작업 방식, 판단 규칙을 문서화할 수 있다. - 예시: - `/image-audit`: 파일 내 이미지의 내보내기 가능 여부를 검사하고 캔버스에 보고서 작성 - `/shader-starter`: 셰이더를 생성할 때 필요한 프롬프트 작성을 지원 - `/make-a-type-scale`: 선택한 텍스트를 기반으로 타입 스케일과 관련 폰트 변수를 생성 - `/ease-like-miggi` 스킬은 특정 디자이너가 선호하는 이징 커브를 키프레임에 적용해, 팀원도 동일한 모션 스타일을 사용할 수 있게 했다. ## Figma 안에서 스킬을 직접 제작하는 과정 - 디자인 프레임을 참고 자료로 제공하거나, 원하는 작업 단계와 가이드라인을 설명해 에이전트에 스킬 생성을 요청할 수 있다. - 에이전트가 초안을 만들면 미리보기로 결과를 확인한 뒤 채팅에서 바로 사용할 수 있다. - 테스트 과정에서 다음과 같이 반복 개선할 수 있다. - 작업 단계 수정 - Markdown 형식 변경 - 개선 방향이나 추천 요청 - Markdown 편집기를 통한 직접 수정 - 일부 스킬은 Figma MCP 서버와 연동되는 서드파티 에이전트에서도 사용할 수 있다. - MCP 서버용 스킬은 Figma의 GitHub 저장소에서 확인할 수 있다. ## 이미지에 X선 효과 적용하기 - 스킬: `/xray-scan` - 제작자: Adele Ix - 이미지나 텍스트 설명을 현실적인 방사선 사진처럼 변환한다. - 한 번에 두 가지 스타일을 생성한다. - 검은 배경 위에 빛나는 흰색 윤곽 - 흰 배경 위의 부드러운 어두운 톤 - 여러 X선 이미지를 겹쳐 독특한 모노크롬 콜라주를 만들 수 있다. - 빛나는 가장자리를 활용하기 때문에 여러 결과물을 겹쳐도 시각적으로 자연스럽게 섞인다. ## 모션이 필요한 지점 찾기 - 스킬: `/find-animation-opportunities` - 제작자: Linear의 Emil Kowalski - 디자인을 분석해 애니메이션이 필요한 부분과 오히려 애니메이션을 제거해야 할 부분을 찾아낸다. - 다음과 같은 질문에 답하도록 설계됐다. - 어떤 요소를 움직이면 더 생동감이 생기는가? - 어디에 어떤 모션을 적용해야 하는가? - 애니메이션의 구체적인 값은 무엇인가? - 제안된 변경 사항은 Figma Motion에서 직접 구현하거나 에이전트에게 적용하도록 요청할 수 있다. - 한 프레임을 대상으로 사용하고, 페이지의 타깃 사용자 같은 추가 맥락을 제공할 때 효과가 좋다. - “아예 움직이지 않아야 하는 요소는 무엇인가?”라고 질문하면 과도한 애니메이션도 줄일 수 있다. ## 정적인 구성에 카메라 움직임 추가하기 - 스킬: `/camera-pan-and-zoom` - 제작자: Figma의 Mallory Dean - 선택한 콘텐츠 주변에 실제 카메라 리그처럼 작동하는 중첩 레이어 구조를 만든다. - 팬, 줌, 롤 같은 카메라 움직임을 적용해 정적인 화면을 영상처럼 연출한다. - 예를 들어 여러 카드가 있는 그리드를 순차적으로 둘러본 뒤 전체 화면으로 다시 줌아웃하는 장면을 만들 수 있다. - 특정한 모션 연출에 특화된 스킬이지만, 복잡한 카메라 이동을 직접 구성하는 작업을 단순화한다. ## 실용적인 활용 방향 스킬은 단순한 자동화 명령이 아니라 디자이너의 작업 철학과 반복 가능한 판단을 팀에 공유하는 방법이다. 먼저 자신이 자주 수행하는 작업이나 고유한 스타일을 하나의 명확한 절차로 정리한 뒤, Figma 에이전트로 초안을 만들고 실제 결과를 확인하며 반복 개선하는 방식이 효과적이다.

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

Figma디자인 시스템AI 에이전트markdown+2

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

코드, 장인정신, 그리고 중첩 폴더의 제작 | Figma 블로그

Figma의 중첩 폴더는 단순한 파일 정리 기능이 아니라 콘텐츠 구조와 권한 모델을 재설계한 대규모 제품 작업이었다. 개발 과정에서 팀은 전통적인 순차형 프로세스 대신 코드로 아이디어를 빠르게 검증하고, 직무 경계를 유연하게 넘나들며, 인수인계를 대화 중심 협업으로 바꾸었다. 그 결과 변화하는 AI·코드 중심 환경에서도 복잡한 기능을 빠르게 구체화하고 출시할 수 있었다. ## 중첩 폴더가 단순한 기능이 아니었던 이유 - 중첩 폴더는 규모가 커지는 팀이 파일과 프로젝트를 계층적으로 정리하도록 돕는 기능이다. - 구현 범위는 파일 브라우저에 그치지 않았다. - 콘텐츠 구조 - 관리자 제어 - 공유 방식 - 권한 처리 - 핵심 인프라 - 따라서 기존 모델에 폴더 한 단계만 추가하는 방식이 아니라, Figma의 콘텐츠 및 권한 모델을 근본적으로 재검토해야 했다. ## 변화한 제품 개발 환경 - 프로젝트 초기에는 일반적인 순차형 개발 방식을 따랐다. - 제품팀이 요구사항을 정의 - 디자인팀이 사용자 경험을 설계 - 설계가 충분히 정리된 뒤 엔지니어링 시작 - 그러나 개발 중 팀의 자원과 우선순위가 달라졌다. - AI 네이티브 기능 개발로 인력이 분산됨 - Figma Make, MCP 서버, 에이전트 스킬, 코드베이스 프로토타이핑 등이 아이디어를 빠르게 구현하는 수단으로 부상함 - 아이디어는 더 이상 완성된 문서에서만 출발하지 않고, 프로토타입·코드·Slack의 간단한 스케치에서도 시작될 수 있게 되었다. ## 코드로 먼저 검증하기 - 코드 작성 비용이 낮아지면서 논쟁이나 추상적인 기획을 오래 이어가기보다 실제 구현물을 빠르게 만들 수 있게 되었다. - 팀은 아이디어를 검증하기 위해 초기부터 pull request(PR)를 생성했다. - PR은 단순한 최종 코드 리뷰 수단이 아니라 다음을 확인하는 실험 도구로 활용되었다. - 기술적으로 가능한지 - 사용자 경험이 자연스러운지 - 권한과 데이터 구조에 문제가 없는지 - 여러 대안 중 어떤 방향이 적절한지 - 실제 동작하는 결과물을 바탕으로 논의하면서 의사결정 속도와 피드백의 구체성이 높아졌다. ## 직무 경계를 유연하게 바꾸기 - 역할을 엄격히 분리하기보다 문제 해결에 필요한 사람이 해당 영역의 결정을 맡았다. - 엔지니어가 디자인 관련 결정을 내리고, 디자이너가 직접 코드를 작성하는 등 업무 범위가 서로 겹쳤다. - 제품 관리자는 일상적인 실행 관리에서 일부 벗어나 더 큰 전략적 질문에 집중했다. - 이 방식은 각 직무의 전문성을 없애는 것이 아니라, 프로젝트 상황에 따라 책임을 유연하게 배분하는 접근이다. ## 인수인계 대신 지속적인 대화 - 디자인 완료 후 개발로 넘기는 식의 일방적인 handoff를 줄였다. - 역할의 경계가 흐려지면서 팀원들은 서로에게 배우는 동시에 자신의 전문 지식을 공유하는 관계가 되었다. - 평소 각 직무가 독점하던 작업 방식과 판단 기준을 공개함으로써 협업에 필요한 신뢰를 쌓았다. - 결과적으로 디자인, 제품, 엔지니어링이 단계별로 분리된 프로세스가 아니라 지속적인 대화와 공동 결정에 가까워졌다. ## 실용적인 시사점 복잡한 기능을 개발할 때는 완벽한 사전 설계만 기다리기보다 작은 PR과 프로토타입으로 가설을 검증하는 것이 효과적이다. 또한 직무별 책임을 고정하기보다 문제의 성격에 따라 역할을 유연하게 조정하고, 인수인계 문서만으로 소통하기보다 실행 과정에서 지속적으로 대화하는 협업 구조를 만드는 것이 중요하다.

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

FigmaAI 에이전트mcp-servercode-prototyping+2

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

속성 패널과 주석 기능, 이제 Figma Make에서 사용 가능 | Figma 블로그

Figma Make에 속성 패널과 주석 기능이 추가되어, 사용자는 코드를 직접 작성하지 않고도 시각적으로 인터페이스를 수정할 수 있게 되었다. 속성 패널은 간격·타이포그래피·레이아웃 같은 시각적 변경을 정밀하게 처리하고, 주석은 애니메이션이나 상호작용처럼 설명이 필요한 변경을 특정 요소에 연결해 전달한다. 두 기능은 디자인과 코드 사이의 간극을 줄이고, 프롬프트 기반 편집보다 정확하고 효율적인 작업 흐름을 제공한다. ## Figma Make의 속성 패널과 주석 기능 - Figma Make 편집기에서 요소를 선택한 뒤 시각적 컨트롤이나 자연어 주석으로 코드를 수정할 수 있다. - 디자인을 수정하는 과정과 코드가 업데이트되는 과정을 하나의 연속적인 작업 흐름으로 통합한다. - 새 기능은 처음부터 작업하는 경우뿐 아니라 기존 코드 기반 프로젝트를 편집할 때도 사용할 수 있다. ## 속성 패널을 활용한 시각적 편집 - 상단 툴바에서 **Edit**를 선택하면 요소의 속성을 조정할 수 있다. - 조정 가능한 항목에는 다음이 포함된다. - 패딩, 요소 간 간격, 코너 반경 - 글꼴 굵기, 줄 높이, 자간 - 투명도, `z-index`, 테두리 스타일 - 위치와 레이아웃 속성 - 코드의 전체 DOM 트리를 레이어 패널처럼 확인하면서 원하는 요소를 선택할 수 있다. - 동일한 요소의 모든 인스턴스를 한 번에 선택해 일괄 수정할 수 있다. - 현재는 코드베이스에 정의된 색상 및 타이포그래피 토큰을 사용해 디자인 일관성을 유지한다. - 향후 Code Connect가 적용되면 Figma Design 컴포넌트와 코드 컴포넌트 간 연결도 강화될 예정이다. ## 변경 사항 검토와 코드 반영 - 속성 패널에서 변경한 내용은 즉시 코드에 확정되지 않고 프롬프트 입력창에 먼저 단계적으로 쌓인다. - 사용자는 각 변경 사항을 검토한 뒤 적용하거나 마음에 들지 않는 변경을 폐기할 수 있다. - 적용을 완료하면 Figma Make가 실제 코드를 수정하고 새로운 파일 버전을 생성한다. - 따라서 캔버스에서 시각적으로 확인한 결과와 실제 배포되는 코드 사이의 불일치를 줄일 수 있다. ## 주석을 통한 정밀한 프롬프트 작성 - 속성 패널만으로 표현하기 어려운 상호작용, 애니메이션, 동작 변경에는 주석 기능을 사용할 수 있다. - **Annotate for agent**를 선택한 뒤 캔버스에서 변경 대상 영역을 직접 표시하고 자연어로 요구사항을 작성한다. - 예시는 다음과 같다. - 썸네일에 마우스를 올리면 약간 확대 - 버튼을 300ms 지연 후 페이드 인 - 버튼을 탭할 때 눌리는 효과 추가 - 메뉴 버튼 클릭 시 전체 화면 내비게이션 오버레이 표시 - 번호가 매겨진 주석으로 여러 요소를 동시에 지정할 수 있다. - 에이전트는 표시된 정확한 위치와 설명을 함께 활용해 관련 코드 전체에 변경 사항을 적용한다. ## 프롬프트 비용과 작업 효율 - 직접 요소를 선택하면 에이전트가 수정 대상을 탐색하거나 추측할 필요가 줄어든다. - 일반적인 텍스트 프롬프트로 같은 변경을 설명하는 것보다 토큰을 적게 사용하고 더 빠르게 완료할 수 있다. - 변경 사항은 적용 전까지 크레딧을 소비하지 않고 대기한다. - 최종적으로 변경 사항을 적용할 때 크레딧이 차감되고 파일이 새 버전으로 업데이트된다. ## 디자인과 코드의 통합 - 속성 패널은 시각적 조정에, 주석은 동작과 맥락이 필요한 변경에 적합하다. - 두 기능을 통해 사용자는 코드를 직접 다루면서도 Figma와 유사한 시각적 편집 경험을 유지할 수 있다. - 같은 편집 경험은 향후 Figma Design의 코드 레이어에도 제공될 예정이다. - 장기적으로는 Figma 캔버스에서 코드 기반 결과물을 여러 방향으로 탐색하고 팀과 함께 비교하는 작업이 가능해진다. 실무에서는 간격·타이포그래피·레이아웃처럼 명확한 시각 속성은 속성 패널로 수정하고, 인터랙션이나 애니메이션처럼 의도가 중요한 변경은 주석으로 요청하는 방식이 가장 효율적이다. 적용 전 검토 단계가 제공되므로 여러 변경을 시도한 뒤 실제 코드 반영 여부를 결정하는 것도 권장된다.

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

Figmafigma-makedesign-to-codecode-connect+2

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

디지털 도구, 인간의 표현: Config 2026의 시각적 아이덴티티 | Figma 블로그

Config 2026의 시각적 정체성은 AI 시대의 강력한 디지털 도구와 인간의 창의적·불완전한 표현을 함께 보여주는 데 초점을 맞췄다. Figma Brand Studio는 아이디어가 변형되고 확장되는 과정을 글리프, 생성형 텍스처, 동적인 구성으로 표현했다. 그 결과 디지털 화면부터 샌프란시스코 Moscone Center의 대형 조형물과 공간 연출까지 일관되면서도 인간적인 브랜드 경험을 만들었다. ## 인간과 AI의 협업을 표현한 세 가지 원칙 - **진화(Evolution)** - 아이디어를 그대로 완성하는 대신 remix, reinterpret, reinvent 과정을 거쳐 새로운 결과를 만든다는 개념이다. - 하나의 형태가 변형되고 증식하는 모습을 시각 시스템에 반영했다. - **유동성(Fluidity)** - 디자인, 코드, 프로토타입 사이를 오가며 다양한 지점에서 작업을 시작하는 현대적 제작 방식을 나타낸다. - 고정된 순서보다 반복과 순환을 강조한다. - **조화(Harmony)** - 생성형 도구로 빠르게 탐색하더라도 최종 판단에는 인간의 관점과 감각이 필요하다는 의미다. - AI의 정교함과 사람의 의도적인 불완전성을 함께 유지했다. ## 글리프로 아이디어의 변형과 확장을 시각화 - Config의 핵심 시각 요소는 스케치처럼 보이거나, 생성형 이미지처럼 유기적이거나, 선명한 기하학 형태를 가진 **글리프**였다. - 입자 형태의 글리프는 아이디어가 계속 생성되고 퍼지는 과정을 상징했다. - 반대로 깔끔한 직사각형은 충분히 정리되고 완성된 아이디어를 나타냈다. - 글리프는 약 14피트 높이의 폼 조형물로 제작되어 Moscone Center 외부와 행사 공간의 장면을 구성했다. - 결과물은 다소 엉뚱하고 개성 있어 보이면서도 프로그램으로 생성된 듯한 디지털 특성을 동시에 지녔다. ## AI로 만든 불완전한 텍스처 - 팀은 Figma Make로 원하는 로파이 효과를 도구화하고, 다음 세 가지 핵심 텍스처를 제작했다. - 낙서 같은 선화 - 흐릿한 그라디언트 - 타원형 입자 - 이미지를 도구에 입력해 예측하기 어렵고 손으로 그린 듯한 구성을 생성했다. - 완벽하고 자동화된 시각물 대신 작은 오류와 불규칙성을 남겨 인간적인 느낌을 강조했다. - 수백 명의 발표자 사진에는 디더링 도구를 적용했다. - 모든 사진에 일관된 스타일을 빠르게 적용했다. - 미세한 점묘 효과가 디지털 코드처럼 보이면서도 손으로 만든 질감을 더했다. - 흐릿한 형태와 거친 점 텍스처는 키노트 무대, 영상, 행사장 애니메이션 등 여러 접점에서 활용됐다. ## 정적인 디자인과 모션의 병행 제작 - 팀은 정적 그래픽을 먼저 완성한 뒤 애니메이션으로 넘기는 방식 대신, 정적 자산과 모션 자산을 동시에 개발했다. - 디자인과 모션이 서로 영향을 주는 반복적인 협업 구조를 취했다. - 초기 글리프가 실제로 움직이는 모습을 확인하면서 형태의 가능성을 새롭게 발견하는 등, 애니메이션 자체가 디자인 탐색의 도구로 기능했다. - 이를 통해 Config의 그래픽은 단순한 장식이 아니라 아이디어가 살아 움직이고 변형되는 과정을 보여주는 시스템이 됐다. ## 실용적인 시사점 AI를 활용한 브랜드 디자인에서도 결과물을 지나치게 매끈하게 만드는 것보다, 의도적인 불완전성과 인간의 판단을 남기는 것이 차별화에 도움이 된다. 또한 글리프·텍스처·모션처럼 재사용 가능한 시각 요소를 시스템화하면 디지털 콘텐츠와 오프라인 공간 전반에 일관된 경험을 효율적으로 확장할 수 있다.

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

FigmaAIfigma-makemotion-design+2

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

워크플로우 랩: Figma Make로 디자인을 직접 배포하기 | Figma 블로그

디자인과 개발의 핸드오프는 일방향일 필요가 없으며, 디자이너가 Figma Make에서 실제 코드베이스를 직접 수정하고 PR까지 이어지는 작업 흐름을 제안한다. 작은 접근성·사용성 개선을 티켓과 백로그에 맡기지 않고 디자이너가 직접 처리하면, 엔지니어는 대규모 아키텍처 작업에 집중하면서도 제품의 완성도를 높일 수 있다. Figma Design, Figma Make, Figma agent, GitHub 연동을 활용해 캔버스에서 검토하고 코드로 반영하는 것이 핵심이다. ## 작은 개선이 백로그에 묻히는 문제 - “간격을 조금 줄여 달라”거나 “스크린 리더가 잘못 읽는다”와 같은 수정은 중요하지만 규모가 작아 우선순위 경쟁에서 밀리기 쉽다. - 디자이너가 요구사항을 티켓으로 작성하면 엔지니어가 의도를 해석해야 하므로, 스크린샷과 설명을 주고받는 과정에서 디자인의 뉘앙스가 손실된다. - 그 결과 엔지니어는 실제 구현보다 디자이너의 결정을 번역하는 데 시간을 쓰게 된다. - 글에서는 이러한 문제를 해결하기 위해 디자이너가 저위험·고완성도 작업을 처음부터 끝까지 맡는 방식을 제안한다. ## MOSF 웹사이트의 접근성 개선 사례 - 가상의 박물관인 ‘Museum of Speculative Futures(MOSF)’가 사례로 등장한다. - 엔지니어는 대규모 정보 구조 재작성에 집중해야 하고, 디자이너는 웹사이트의 접근성 문제를 해결하려 한다. - PM은 엔지니어가 구조 개편 같은 고난도 작업을 계속 담당하고, 디자이너가 세부적인 접근성·사용성 개선을 직접 처리하도록 역할을 나눈다. - 목표는 기술적으로 동작하는 수준을 넘어, 다양한 사용자가 실제로 편리하게 사용할 수 있는 웹사이트를 만드는 것이다. ## 캔버스에서 사용자 피드백 수집 - 디자이너는 수정 전에 현재 경험을 점검하기 위해 Figma Design의 Figma agent를 사용한다. - 첫 방문자, 재방문 회원, 스크린 리더 사용자 등 여러 합성 페르소나를 생성하고 사이트를 탐색하게 한다. - 합성 페르소나는 실제 사용자 조사나 대면 테스트를 대체하지 않지만, 초기에 명백한 마찰을 발견해 후속 사용자 조사에 집중할 여지를 만든다. - 탐색 결과 다음과 같은 문제가 확인된다. - 전시 페이지의 내비게이션 라벨이 모호함 - 주요 행동 유도 버튼(CTA)이 눈에 잘 띄지 않음 - 날짜 선택기가 한눈에 이해하기 어려움 - 검색 결과가 없을 때 빈 화면만 표시됨 - 각각은 대규모 기능 변경은 아니지만, 여러 문제가 누적되면 사이트의 접근성과 사용성이 크게 떨어질 수 있다. ## 팀 검토를 거친 디자인 수정 - 디자이너는 에이전트가 발견한 문제를 바탕으로 디자인을 수정한다. - 이후 디자이너, 엔지니어, PM이 캔버스에서 변경 사항을 함께 검토한다. - 검토 대상에는 방문 페이지의 더 명확한 라벨, 눈에 잘 띄는 CTA, 사용하기 쉬운 날짜 선택기 등이 포함된다. - 디자인 단계에서 팀의 합의를 먼저 확보하므로, 코드 수정 이후에 요구사항을 다시 해석하거나 되돌리는 일을 줄일 수 있다. ## Figma Make로 실제 코드에서 작업 - 디자이너는 프로덕션 코드와 연결된 Figma Make를 사용해 캔버스의 수정 사항을 실제 코드에 반영한다. - 기존처럼 티켓을 생성해 백로그에 넣고 엔지니어가 나중에 구현하기를 기다리지 않는 것이 핵심이다. - Figma Make, GitHub 연동, 주석과 리뷰 기능을 통해 디자인 변경을 코드 변경으로 연결하고 팀 검토를 이어간다. - 최종적으로 작업은 풀 리퀘스트(PR) 단계까지 진행되며, 디자이너가 캔버스에서 시작한 개선을 병합 가능한 코드 변경으로 전달한다. - 이 방식은 엔지니어의 책임을 없애는 것이 아니라, 엔지니어가 코드 품질과 구조를 검토하는 동안 디자이너가 세부적인 사용자 경험 개선을 주도하도록 역할을 재배치한다. 작은 접근성·사용성 개선은 별도 티켓으로 쌓아두기보다, 디자이너가 실제 코드에서 직접 수정하고 엔지니어와 PR 리뷰를 진행하는 편이 효율적이다. 다만 합성 페르소나의 결과는 초기 탐색용으로 활용하고, 중요한 접근성 판단은 실제 사용자 조사와 기술 검증으로 보완하는 것이 바람직하다.

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

FigmaAI접근성github+2

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

Decagon이 AI를 활용해 디자인 시스템을 포화시키는 방법 | Figma 블로그

Decagon은 빠르게 성장하는 AI 고객지원 플랫폼의 품질과 개발 속도를 함께 확보하기 위해 Deco라는 디자인 시스템을 구축했다. Figma 라이브러리, Storybook, 코딩 에이전트, Figma MCP를 연결해 디자인과 코드가 지속적으로 일치하도록 만들었고, 그 결과 반복적인 해석과 수정 작업을 줄였다. 핵심은 디자인 시스템을 단순한 컴포넌트 모음이 아니라 사람과 AI 에이전트가 함께 사용하는 공통 언어로 만든 데 있다. ## 빠른 성장에 대응하는 디자인 시스템 구축 - Decagon은 초기에는 디자인 시스템 없이 빠르게 제품을 개발했지만, 플랫폼과 팀이 커지면서 화면 간 불일치와 완성도 저하가 나타났다. - 기업 고객을 대상으로 제품을 제공하기 위해서는 일관된 UI와 높은 품질이 필요했으며, 디자인과 개발 사이의 반복적인 수정 작업도 줄여야 했다. - 디자이너와 엔지니어가 처음부터 함께 Deco를 설계해 다음과 같은 세부 사항을 미리 정의했다. - 포커스 상태 - 비활성화, 읽기 전용, 오류, 경고 상태 - 플레이스홀더 사용 여부 - 기존 코드에 이미 존재하는 컴포넌트와의 관계 - 현재 Deco는 수백 개의 컴포넌트·스타일·변수를 포함하며, 여러 팀과 제품 영역의 대부분의 사용 사례를 다룬다. - Figma 라이브러리에서 30일 동안 수만 건의 컴포넌트 삽입이 발생해 조직 전반에서 실제로 활용되고 있음을 확인했다. ## 디자인 시스템이 만든 공통 언어 - 디자이너는 기존 컴포넌트로 화면을 조합할 수 있어 매번 UI를 처음부터 만들 필요가 없어졌다. - 개발자는 어떤 버튼이나 테이블을 사용해야 하는지 명확히 알 수 있어 구현상의 판단과 논쟁이 줄었다. - 디자인과 코드가 동일한 프리미티브를 기준으로 소통하면서 제품 흐름과 요구사항을 설명하기 쉬워졌다. - Deco는 조직 전체에 공개된 단일 진실 공급원(single source of truth)으로 작동해 빠른 출시와 일관된 디자인을 동시에 지원한다. ## 디자인과 코드 사이의 반복 작업 줄이기 - 기존 방식에서는 디자이너가 명세를 전달하면 개발자가 해석하고, 리뷰 단계에서 불일치를 발견한 뒤 다시 수정하는 과정이 반복됐다. - 코딩 에이전트는 개발자처럼 암묵적인 의도를 추론하지 않고 제공된 정보만 바탕으로 작업하므로, 디자인 파일과 명세가 불명확하거나 일관되지 않으면 결과물도 부정확해진다. - Decagon은 디자인 시스템 컴포넌트를 Storybook으로 옮겨 코드에서도 동일한 컴포넌트를 확인할 수 있게 했다. - 코딩 에이전트가 구현할 때 정확한 Deco 컴포넌트를 사용하도록 별도의 skill을 만들었다. - 디자이너가 새로운 컴포넌트를 추가할 때 사용하는 skill도 구축해 Figma와 코드의 동기화를 유지했다. ## Figma MCP를 통한 에이전트 활용 - Figma MCP를 사용하면 코딩 에이전트가 Figma의 디자인 문맥과 명세를 직접 읽을 수 있다. - 디자이너는 Figma 링크를 코딩 에이전트에 전달하는 것만으로 다음 작업을 수행할 수 있다. - 디자인의 구조와 세부 명세 파악 - Deco의 적합한 컴포넌트와 매핑 - 디자인에 가까운 고충실도 구현 생성 - 디자인 캔버스, 코드, 컴포넌트 명세가 하나의 작업 흐름으로 연결되어 파일을 내보내고 다시 해석하는 수동 왕복이 줄었다. - 에이전트가 기존 디자인 시스템을 활용하므로 빠른 프로토타이핑과 반복 수정이 가능하면서도 브랜드와 UI 일관성을 유지할 수 있다. ## 실용적인 결론 AI 코딩 도구를 도입할 때는 에이전트의 성능만 높이기보다, 먼저 재사용 가능한 디자인 시스템과 명확한 컴포넌트 문맥을 마련해야 한다. Figma와 Storybook을 연결하고, MCP와 에이전트 skill을 통해 동일한 컴포넌트를 사용하게 하면 디자인-개발 간 불일치를 줄이면서 빠른 개발 속도와 품질을 함께 확보할 수 있다.

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

Figma디자인 시스템AI 에이전트design-to-code+2

figma·2026년 7월 9일·2분 읽기큐레이션 요약

AI 시대에 디자인 팀을 이끄는 방법 | Figma 블로그

AI 시대의 디자인 리더에게 필요한 것은 무조건적인 속도가 아니라, 팀이 침착하게 판단하고 실험하도록 돕는 안정감이다. Jen Dunnam은 도구와 유행을 좇기보다 인간을 위한 디자인이라는 원칙을 유지하고, 비판적 사고와 다양한 경험을 가진 인재를 채용해야 한다고 강조한다. 결론적으로 리더는 긴박감을 더하기보다 팀이 올바른 문제를 정의하고 현명하게 실행하도록 방향을 잡아야 한다. ## 변화 속에서도 침착하게 이끌기 - AI의 발전으로 업계에 불안과 긴박감이 커졌지만, 뛰어난 디자이너들은 이미 충분한 추진력을 갖고 있다. - 리더의 역할은 위기감을 더하는 것이 아니라 팀을 안정시키는 데 있다. - 문제를 작은 단위로 나누고, 전략을 세우며, 적절한 도구를 실험하고, 디자인 원칙을 다듬어야 한다. - AI 도구의 기능이나 유행을 무작정 따라가기보다 디자이너이자 인간으로서 본질에 집중해야 한다. - 기술은 바뀌어도 디자인의 대상은 여전히 인간이므로, 사용자에 대한 이해와 인간 중심 원칙은 변하지 않는다. - 가장 현실적인 접근은 꾸준히 실험하되, 결과를 학습하고 원칙에 따라 판단하는 것이다. ## 비판적 사고를 기준으로 채용하기 - 빠른 제품 출시가 강조되면서 신입 디자이너와 졸업생이 기회를 얻기 어려워졌으므로, 이들의 성장 가능성에 투자할 필요가 있다. - 신입 인재를 제품 출시 경험이 풍부한 시니어와 짝지으면 새로운 관점과 실행력을 결합할 수 있다. - 사용자 연구자 중에서도 인사이트를 수집하는 데 그치지 않고, 디자인과 제품 방향에 대해 결단력 있게 의견을 낼 수 있는 사람을 찾는 것이 유효하다. - 현재 채용에서 특히 가치가 높아진 역량은 비판적 사고다. - 면접에서는 단순히 결과물을 확인하기보다 다음과 같은 경험을 깊이 물어야 한다. - 언제 자신의 의견에 반대했는가? - 이해관계자에게 어떻게 이의를 제기했는가? - 제품에 반영되지 않아 지금도 아쉬운 점은 무엇인가? - AI가 만들어낸 결과물은 시각적으로 매력적이고 그럴듯해 보일 수 있다. 따라서 ‘반짝이는 결과’나 그럴듯한 답을 그대로 받아들이지 않고, 문제와 결과를 검증하는 태도가 중요하다. ## 실용적인 결론 디자인 팀은 AI 도구를 빠르게 익히되, 도구 자체를 목표로 삼아서는 안 된다. 리더는 팀이 인간 중심 원칙을 잃지 않으면서 실험하고, 근거를 바탕으로 반대 의견을 내며, 빠른 실행과 깊이 있는 판단을 함께 발전시키도록 지원해야 한다.

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

FigmaAI프로덕트 디자인human-centered-design+2

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

Issue no.17: 즐겁게 만들기 | Figma 블로그

Figma의 뉴스레터 「Build with joy」는 도구와 작업 방식이 계속 바뀌어도, 아이디어를 현실로 만드는 즐거움과 창작의 본질은 변하지 않는다고 말한다. Config 2026에서 공개한 새로운 도구를 바탕으로 디자인의 방향성, 취향, 모션, 색상 등 창작 역량을 탐구하며, 독자가 자신의 관심사에 따라 콘텐츠를 선택하도록 구성했다. ## 자신만의 경로를 선택하는 창작 - Config 2026 매거진은 정해진 순서 없이 원하는 주제부터 시작할 수 있는 ‘선택형 모험’ 구조로 제작됐다. - 팀이 기존 워크플로를 어떻게 발전시키고, 새로운 가능성을 향해 나아가는지 디지털 매거진을 통해 소개한다. - 핵심 메시지는 새로운 도구를 사용하는 방식보다, 그 도구로 무엇을 만들고 어디로 향할지 결정하는 사람이 중요하다는 점이다. ## 취향은 지속적으로 가꾸는 능력 - Figma 최고디자인책임자 로레다나 크리산은 취향을 단순히 좋은 것과 나쁜 것을 구분하는 능력으로 보지 않는다. - 좋은 결과에 도달하기 위해 계속 에너지를 유지하고, 자신의 관점을 발전시키는 태도까지 취향에 포함한다. - 음악을 연주하며 얻은 경험을 통해 취향을 형성하는 과정을 설명한다. - 채용 시에도 결과물만이 아니라 지원자의 관점과 성장 가능성을 중요하게 본다. - 도구가 작업을 도와줄 수는 있지만, 장인정신을 갖추려면 자신만의 기준과 시각을 끊임없이 다듬어야 한다. ## 모션은 디자인과 시간의 결합 - Figma Brand Studio 팀은 모션 디자인을 ‘디자인과 시간의 결합’으로 설명한다. - 움직임의 속도, 방향, 타이밍에 따라 같은 동작도 전혀 다른 인상을 줄 수 있다. - “whoosh”와 “whoop”처럼 유사해 보이는 움직임도 세부적인 리듬과 강도에 따라 구분된다. - 모션은 장식적인 효과가 아니라 브랜드의 성격과 사용자 경험을 전달하는 핵심 디자인 요소다. ## 색상이 문화를 해석하는 방식 - Pantone의 ‘색채 인류학자’들은 색상이 단순한 시각 요소를 넘어 문화적 의미를 만든다고 설명한다. - Coca-Cola의 빨강, Barbie의 분홍, Brat의 초록처럼 특정 색은 브랜드와 시대적 현상을 상징할 수 있다. - 브랜드는 색을 활용해 정체성과 의미를 형성하고, 사회적 트렌드에 영향을 줄 수 있다. - 색상을 선택할 때는 미적 조화뿐 아니라 색이 특정 문화와 집단에서 어떤 감정과 연상을 불러일으키는지 고려해야 한다. ## Config와 창작 커뮤니티의 확장 - Figma CEO이자 공동창업자인 딜런 필드는 Config 2026에서 발표된 내용을 정리하고, 캔버스에 새로운 차원을 더하는 방향을 소개한다. - 커뮤니티 구성원들은 감정에 따라 적응하는 시스템이나 미래를 예측하는 도구 등 소프트웨어의 미래를 상상한다. - Figma 굿즈 시즌 5에서는 8명의 일러스트레이터가 첫 스케치부터 Figma Store에 제품이 나오기까지의 과정을 공유한다. - 제품, 커뮤니티, 일러스트레이션을 연결하며 창작이 개인 작업을 넘어 다양한 사람과 매체를 통해 확장된다는 점을 보여준다. ## 글 전체를 관통하는 창작 철학 - 기술과 제작 방식은 변화하지만, 비전을 실제 결과물로 구현할 때 느끼는 기쁨은 변하지 않는다. - 창작자는 새로운 도구를 익히는 데 그치지 않고, 무엇이 좋은지 판단하는 기준과 자신만의 관점을 길러야 한다. - 세부적인 움직임과 색상 선택도 브랜드와 사용자 경험의 의미를 형성하므로, 결과물의 작은 요소까지 의도적으로 설계해야 한다. 실무에서는 새로운 기능을 무작정 도입하기보다, 먼저 전달하려는 의도와 관점을 정한 뒤 도구·모션·색상을 선택하는 것이 좋다. 꾸준히 다양한 작업을 관찰하고 직접 실험하면서 자신만의 취향과 디자인 기준을 발전시키는 것도 중요하다.

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

Figma디자인 시스템motion-designcolor-theory+1

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

스킬이 있으신가요? Figma Agent를 더 나은 협업자로 만들기 | Figma 블로그

Figma의 “스킬”은 팀의 업무 방식과 전문 지식을 자연어 지침으로 저장해 두고, `/` 명령으로 Figma 에이전트에서 반복 사용할 수 있게 하는 기능이다. 디자인 시스템이 컴포넌트와 UI 패턴을 제공한다면, 스킬은 브랜드 문체·접근성·리뷰 절차·개인별 피드백 방식 같은 조직의 맥락을 더한다. Figma는 이를 통해 에이전트를 단순한 생성 도구가 아니라 팀의 작업 방식을 이해하고 협업하는 파트너로 활용할 수 있다고 설명한다. ## 스킬과 디자인 시스템의 역할 구분 - 디자인 시스템은 에이전트가 사용할 컴포넌트, 패턴, UI 요소를 제공한다. - 스킬은 그 위에 팀의 전문 지식과 업무 규칙을 적용한다. - 적용할 수 있는 예시는 다음과 같다. - 브랜드 보이스와 UX 라이팅 규칙 - 컴플라이언스 및 접근성 기준 - 디자인 리뷰 절차 - 제품 원칙과 의사결정 기준 - 디자인 시스템을 특정 업무 흐름 안에서 호출하는 방법 - 한 번 만든 스킬은 팀이나 조직에 게시해 여러 사람이 반복 사용할 수 있다. ## 필요할 때 받는 두 번째 의견 스킬은 특정 관점으로 디자인이나 문구를 검토해 아이디어의 약점을 찾고 더 나은 질문을 하도록 돕는다. - **이해관계자의 피드백 방식 모사** - 공개 코멘트, 과거 크리틱, 파일에 남은 메모 등을 예시로 제공한다. - 에이전트가 특정 인물의 피드백 스타일을 적용하도록 만들 수 있다. - Figma는 CEO Dylan의 코멘트 방식을 반영해, 공식 리뷰 전에 작업을 점검하는 스킬을 만들었다. - **UX 라이팅 기준 적용** - 스타일 가이드에 따라 대문자 사용, 구두점 등 문구의 일관성을 1차 검토한다. - 작성자는 단순한 형식 오류보다 더 중요한 내용과 메시지에 집중할 수 있다. - **처음 사용하는 사람의 관점 제공** - 제품을 잘 아는 디자이너가 놓치기 쉬운 마찰 지점과 부족한 설명을 찾는다. - 신규 사용자가 경험을 이해할 수 있는지 점검하는 데 유용하다. ## 한 번 만들고 반복해서 사용하는 업무 팀이 매번 비슷한 방식으로 수행하는 의식이나 절차는 스킬로 만들 가치가 있다. - **`/catch-me-up`** - 파일이나 프로젝트의 최근 활동을 요약한다. - 한동안 자리를 비운 사람이 댓글과 변경 내역을 직접 추적하지 않고 빠르게 상황을 파악할 수 있다. - **크리틱 준비 체크리스트** - 에이전트가 페르소나, 작업 범위, 크리틱 참석자 등 프로젝트 맥락을 질문한다. - 수집한 정보를 바탕으로 크리틱 페이지와 토론용 질문을 만든다. - Figma의 스킬은 Nielsen Norman Group의 모범 사례를 참고해 더 깊은 논의를 유도하는 질문을 구성한다. - **크리틱 회고** - 회의에서 나온 피드백을 주제별로 정리한다. - 결정 사항, 후속 작업, 보류된 항목을 구분해 실행 계획으로 만든다. - 결과를 캔버스의 recap 카드나 Slack 스레드에 공유할 수 있어 회의 후 정보가 유실되는 것을 줄인다. ## 팀의 암묵지를 재사용 가능한 지침으로 전환 - 팀만 알고 있던 업무 방식이나 반복 프롬프트를 자연어 지침으로 문서화한다. - 매번 같은 설명을 다시 입력하지 않고 `/스킬이름`으로 호출한다. - 개인의 머릿속에 머물던 리뷰 기준과 작업 절차를 조직 전체가 사용할 수 있는 자산으로 바꾼다. - 스킬을 만들 때는 실제 피드백, 스타일 가이드, 기존 산출물처럼 구체적인 사례를 함께 제공할수록 팀의 방식에 가까운 결과를 얻을 수 있다. 팀에서 반복되는 작업이나 동일한 검토 기준이 있다면, 이를 먼저 작은 스킬로 만들어 테스트하는 것이 좋다. 특히 온보딩, 크리틱 준비·회고, 문구 검수처럼 입력과 결과가 비교적 명확한 업무부터 시작하면 효과를 확인하기 쉽다.

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

Figma디자인 시스템AI 에이전트접근성+2

figma·2026년 6월 29일·4분 읽기큐레이션 요약

어디서든 시작하세요, Figma가 만든 매거진 | Figma 블로그

새로운 도구와 재료의 등장으로 디자인은 더 이상 정해진 출발점에서 시작할 필요가 없으며, 누구나 아이디어에 맞는 방식으로 작업을 시작할 수 있다. Figma의 2026년 Config 매거진은 모션, 코드, AI를 디자인 캔버스 안으로 통합하면서 디자인의 표현력과 협업 방식을 확장하는 흐름을 조명한다. 핵심은 도구가 쉬워질수록 기본 원리와 호기심, 지속적인 탐구가 더욱 중요해진다는 것이다. ## 디자인은 어디에서든 시작할 수 있다 - Figma는 Config 2026을 맞아 디자인의 현재를 보여주는 인쇄 매거진을 제작했다. - 매년 주제와 기고자, 디자인은 달라지지만, “지금 디자인이 어떤 모습인가”를 아름다운 인쇄물로 표현한다는 목표는 유지된다. - 빠르게 변하는 제품과 기술 환경에서는 글이 출간될 때 이미 새로운 버전이 나올 수 있다. - 이런 변화 속에서도 오래 남는 것은 다음과 같은 태도다. - 무엇을 하는지 설명하기 전에 그것이 무엇인지 이해하려는 자세 - 새로운 도구의 가능성을 성급히 단정하지 않는 인내심 - 서로 다른 도구와 재료가 어떻게 연결될지 탐구하는 호기심 - 매거진은 초보자, 숙련된 실무자, 단순히 좋은 결과물을 빠르게 만들고 싶은 사람 모두를 독자로 삼는다. - 세 가지 표지는 각각 다른 질문과 출발점을 제시하지만, 결국 같은 주제를 향해 계속 탐구하도록 유도한다. ## 모션이 캔버스에 들어오다 - Figma Motion은 타임라인을 Figma 캔버스 안에 제공한다. - 모션 작업이 기존 컴포넌트, 변수, 팀 협업 환경과 같은 파일 안에서 이루어질 수 있다. - 디자이너는 제품이 완성된 뒤 애니메이션을 추가하는 것이 아니라, 초기 단계부터 시간과 움직임을 설계할 수 있다. - 모션 디자인에서는 도구 사용이 쉬워져도 기본 원리가 중요하다. - 움직임의 속도와 타이밍 - 시각적 전환이 전달하는 의미 - 움직임을 통해 사용자 경험을 조직하는 방식 - Figma는 Brand Studio의 모션 디자이너들과 함께, “시간을 디자인한다”는 것이 무엇인지 설명한다. ## 코드와 디자인의 경계가 좁아지다 - 코드는 오래전부터 디자인 과정의 재료였지만, 기존에는 디자인 도구와 분리된 환경에 놓여 있었다. - Figma는 코드 레이어를 디자인 캔버스에 도입해 코드와 시각적 디자인을 같은 멀티플레이어 공간에서 다룰 수 있도록 한다. - 팀은 여러 코드 기반 방향을 나란히 탐색하고 비교할 수 있다. - 디자인에서 코드로 일방향 전달하는 방식보다, 코드와 캔버스 사이를 반복적으로 오가는 작업 흐름이 가능해진다. - 이러한 변화는 디자인과 개발의 역할을 단순히 합치는 것이 아니라, 아이디어를 시험하고 발전시키는 경로를 늘린다. ## 디자인-코드 순환이 만드는 새로운 가능성 - 코드와 캔버스 사이의 이동이 자연스러워지면서 디자인과 개발 워크플로가 서로 수렴한다. - Figma 소프트웨어 엔지니어 Alex Kern과 AI 디자인 디렉터 Gui Seiz는 연결된 작업 방식이 무엇을 가능하게 하는지 논의한다. - 디자인 결과물을 코드로 넘기는 마지막 단계만 자동화하는 것이 아니라, 아이디어 구상과 구현 과정 전체가 연결된다. - 이를 통해 팀은 다음을 더 빠르게 반복할 수 있다. - 여러 제품 방향의 실험 - 디자인과 실제 구현의 비교 - 팀원 간 피드백과 수정 - 아이디어를 프로덕션에 가까운 형태로 검증 ## AI가 아이디어에서 제품까지의 과정을 바꾸다 - AI 도구는 팀이 제품을 시작하는 지점뿐 아니라, 아이디어가 실제 제품으로 이어지는 방식까지 바꾸고 있다. - 변화는 특정 도구 하나의 도입보다 전체 프로세스의 재구성에 가깝다. - 매거진은 네 조직의 사례를 통해 AI를 활용해 아이디어를 제품으로 발전시키는 새로운 접근법을 소개한다. - AI는 초기 아이디어 생성, 방향 탐색, 프로토타이핑, 제작 단계 간의 연결을 강화할 수 있다. - 다만 AI가 디자인 판단을 대신한다기보다, 사람이 더 많은 가능성을 빠르게 탐색하고 선택하도록 돕는 역할에 초점이 맞춰져 있다. ## 인간과 AI의 미래적 상호작용 - 매거진의 “Future states” 섹션은 기계 지능과 인간 지능의 간극이 좁아졌을 때의 가능성을 상상한다. - 커뮤니티 구성원들은 AI가 소프트웨어를 더 인간적인 방식으로 만들 수 있다고 제안한다. - 예시로 다음과 같은 방향이 제시된다. - 사용자의 감정이나 상태를 이해하는 인터페이스 - 사용자의 선택이 어떤 결과로 이어질지 예측하는 시스템 - 인간의 맥락과 의도를 더 깊이 파악하는 소프트웨어 - 이는 AI를 단순한 자동화 도구가 아니라, 인간의 의사결정과 상호작용을 보조하는 새로운 인터페이스 재료로 바라보는 관점이다. 새로운 도구를 익히는 가장 좋은 방법은 완벽한 출발점을 기다리기보다 작은 아이디어에서 바로 시작해 보는 것이다. 모션, 코드, AI를 기존 디자인 과정에 단계적으로 결합하되, 도구보다 디자인 원리와 사용자 경험에 대한 판단을 중심에 두는 것이 바람직하다.

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

FigmaAIReactdesign-to-code+1

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

Figma 시즌 5 컬렉션을 만든 아티스트들을 만나보세요 | Figma 블로그

Figma의 Season 5 굿즈 컬렉션은 세계 각지의 아티스트 8명과 협업해, 서로 다른 개성과 제작 방식을 하나의 컬렉션에 담아낸 프로젝트다. Figma Brand Studio는 컬렉션을 ‘놀이(Play)’, ‘반복과 발전(Iteration)’, ‘도구(Tools)’라는 세 가지 주제로 구성했다. 특히 완벽한 결과보다 자유로운 실험과 손으로 만드는 과정의 즐거움을 강조한 점이 핵심이다. ## 컬렉션의 세 가지 창작 주제 - **놀이(Play)** - 지나치게 고민하거나 자기검열하지 않고 자유롭게 만드는 태도다. - 어린아이의 그림처럼 즉흥적이고 유쾌한 표현을 중시한다. - **반복과 발전(Iteration)** - 하나의 아이디어가 반복적인 시도와 변형을 거치며 발전하는 과정을 뜻한다. - 완성작뿐 아니라 초기 스케치와 여러 색상·형태의 변주도 창작의 일부로 본다. - **도구(Tools)** - 디지털 도구뿐 아니라 마커, 종이, 손작업 등 물리적인 제작 행위에 주목한다. - 각 아티스트가 익숙한 도구나 일부러 불편한 도구를 사용하는 방식 자체가 작품의 스타일을 만든다. ## Quentin Chambry: 되돌릴 수 없는 선의 즐거움 - **활동 지역:** 일본 도쿄 - **영감:** 스케이트보딩과 스트리트 문화, 그래피티, 일본 도자기, 도쿄의 대중문화 - **사용 도구:** 검은색 마커와 흰 종이 - **표현 주제:** 놀이 - 일본 예술에서 반복적인 움직임을 통해 완성도를 높이는 방식에 영향을 받았다. - 한 번의 작업 세션에서 수백 장의 종이를 채우며, 미리 정해진 결과보다 그리는 과정에서 자연스럽게 나타나는 형태를 탐색한다. - 연필과 달리 마커는 지울 수 없기 때문에, 실수나 우연을 받아들이며 작업해야 한다. - 그는 마커 작업을 “되돌릴 수 없는 과정”으로 보고, 이를 통해 창작을 더 긴장감 있고 흥미롭게 만든다. - 초기 스케치와 색상 변형을 거쳐 웃는 인물, 웃는 큐브, 큐브를 쌓는 손 등의 이미지가 티셔츠·모자·후디에 적용됐다. ## Meazo: 서툰 도구로 어린아이 같은 표현 되찾기 - **활동 지역:** 영국 레스터셔 - **영감:** 자녀들의 그림, DIY 일러스트레이터, 타투 아티스트 - **사용 도구:** 오래되고 다루기 불편한 휴대폰 그림 앱 - **표현 주제:** 놀이 - 아이들은 그림을 “잘 그려야 한다”는 자기검열 없이 자유롭게 만든다는 점에 주목했다. - Meazo는 의도적으로 자신에게 익숙하지 않고 통제하기 어려운 도구를 사용해, 결과를 완벽하게 조정하려는 태도에서 벗어난다. - 나비나 시계처럼 친숙한 사물을 그린 뒤, 형태를 비틀어 익숙하면서도 초현실적인 캐릭터로 변형한다. - 이러한 방식은 편안하면서도 약간 낯선 분위기를 만들어낸다. - 대표적인 결과물로 웃는 토마토 캐릭터와 다양한 색상의 추상적 생명체가 있으며, 모자·양말·긴팔 티셔츠 등에 활용됐다. ## 아티스트의 개성을 굿즈에 적용한 방식 - Figma는 모든 작품을 동일한 스타일로 통일하기보다, 아티스트마다 다른 표현 방식과 목소리를 유지했다. - 마커 드로잉, 휴대폰 앱 일러스트, 손으로 만든 형태 등 서로 다른 제작 과정이 의류와 액세서리에 반영됐다. - 최종 제품뿐 아니라 초기 시안과 반복적인 변형 과정도 함께 소개해, 상품 뒤에 있는 창작 여정을 보여줬다. - 그 결과 웃는 큐브, 팔이 달린 토마토, 다채로운 추상 캐릭터처럼 서로 이질적이지만 창작의 즐거움이라는 공통점을 가진 컬렉션이 완성됐다. ## 실용적인 시사점 이 컬렉션은 창작에서 완벽한 도구나 정답보다 반복적인 실험과 우연을 받아들이는 태도가 중요하다는 점을 보여준다. 특히 일부러 불편한 도구를 사용하거나 지울 수 없는 방식으로 작업하면, 통제에서 벗어난 새로운 아이디어를 발견하는 데 도움이 된다.

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

Figmadesign-toolsgraphic-designconfig+1

figma·2026년 6월 24일·4분 읽기큐레이션 요약

피그마와 Weave 연결하기 | 피그마 블로그

Figma는 Weavy 인수를 바탕으로 AI 창작 도구인 Figma Weave를 기존 Figma 캔버스와 연결한다. 디자이너는 Figma Design에서 이미지 스타일 변환, 제품 촬영, 소재 추출 등 20개 이상의 사전 구축 AI 작업을 사용할 수 있고, 복잡한 프롬프트나 별도 워크플로 구축 없이 반복적인 제작 업무를 처리할 수 있다. 앞으로는 사용자가 만든 Weave 워크플로를 Figma 도구로 공개·공유하고, Weave 안에서도 Figma 파일과 프레임을 활용할 수 있게 되어 디자인과 크리에이티브 제작의 경계가 더욱 줄어들 전망이다. ## Figma와 Weave의 통합 배경 - Figma는 Weavy를 인수한 뒤 이를 **Figma Weave**로 발전시키고 있다. - Weave는 이미지, 비디오, 애니메이션, 모션 디자인, VFX, 오디오, 3D 작업을 노드 기반 캔버스에서 처리하는 AI 창작 플랫폼이다. - 각 작업은 프롬프트와 모델 실행의 단순한 결과가 아니라, 입력·편집·생성·변형 과정을 연결한 시각적 워크플로로 구성된다. - 팀원은 캔버스에서 제작 과정을 확인하고, 특정 단계만 수정하거나 결과를 반복 생성할 수 있다. - Figma는 이 구조를 기존 협업 캔버스와 결합해 디자인과 크리에이티브 제작을 같은 공간에서 진행하려 한다. ## Figma Design에서 사용하는 Weave 도구 - 20개 이상의 AI 이미지 작업이 Figma Design 왼쪽 패널에서 직접 제공된다. - 각 도구는 복잡한 Weave 워크플로를 간단한 UI로 포장한 형태다. - 주요 활용 사례는 다음과 같다. - 이미지 스타일 전이 - 제품 사진 및 이커머스 촬영 이미지 생성 - 소재·재질 추출 - 다양한 시각 언어를 활용한 아트 디렉션 - 이미지 비율 변경 - 특정 예술 양식으로 사진 변환 - 사용자는 자유 형식 프롬프트를 직접 작성하지 않고 입력 이미지를 추가한 뒤 도구를 선택해 결과를 생성할 수 있다. - 동일한 작업을 반복해도 일관된 방식으로 실행되므로, 반복적인 제작 업무를 몇 번의 클릭으로 처리할 수 있다. - 결과를 여러 갈래로 분기하거나, 서로 다른 모델과 접근 방식을 비교하고, 원하는 결과를 선택해 세부 조정할 수 있다. ## 워크플로를 통한 창작 과정의 표준화 - Weave의 핵심은 하나의 프롬프트보다 **프롬프트와 모델, 편집 단계를 연결한 로직**에 있다. - 사용자는 이미지 생성뿐 아니라 결과 수정, 스타일 적용, 여러 버전 비교를 하나의 흐름으로 관리할 수 있다. - 반복적으로 사용하는 제작 방식을 워크플로로 만들어 팀의 공통 자산으로 활용할 수 있다. - 앞으로는 개인이나 팀이 직접 만든 Weave 워크플로를 Figma 안의 Weave 도구로 게시할 수 있게 된다. - 워크플로를 한 번 정의하면 팀 내부 또는 커뮤니티와 공유해, 제작 노하우와 의사결정 로직을 재사용할 수 있다. ## OutSystems의 활용 사례 - OutSystems의 브랜드 팀 디자이너 Bruno Figueiredo는 Weave를 프레젠테이션 이미지, 애니메이션, 행사 그래픽, 굿즈 제작에 활용한다. - 회사 마스코트 ‘Neo’의 키링 인형을 제작할 때는 외부 전문가에게 의존하지 않고 Weave로 제조용 3D 모델을 만들었다. - 노드 기반 워크플로를 활용해 다음 요소를 반복적으로 조정할 수 있었다. - 일러스트 스타일 - 의상 색상 - 신체 비율 - 여러 모델의 결과 비교 - 여러 플로우를 동시에 실행한 뒤 나중에 결과를 검토할 수 있어, 탐색적인 디자인 작업에 적합하다고 설명한다. - 기존 사진과 일러스트를 확장해 새로운 브랜드 가이드라인을 만들거나, 필요한 스타일의 목업을 생성하는 데도 활용할 수 있다. ## 앞으로의 연결 방향 - 현재는 Weave의 기능을 Figma 캔버스 안으로 가져오는 단계가 먼저 시작됐다. - 동시에 Weave 워크플로를 Figma Community에서 공유할 수 있도록 확장할 계획이다. - 향후 Weave에 **Figma 노드**가 추가되면 Figma 프레임과 디자인 파일을 Weave 워크플로의 입력·편집 과정에 직접 연결할 수 있다. - 이에 따라 디자인 결과물을 별도 도구로 옮기거나, AI 제작 결과를 다시 Figma로 가져오는 번거로운 변환 과정이 줄어들 것으로 보인다. - 최종적으로는 디자이너가 Figma에서 시각적 방향을 정하고, Weave가 생성·변형·반복 실행을 담당하는 통합 제작 환경을 지향한다. 실무적으로는 반복되는 이미지 생성이나 브랜드 스타일 적용 업무를 Weave 도구로 표준화하고, 팀만의 워크플로를 공유 가능한 자산으로 만드는 방식이 가장 큰 활용 포인트다. Akan AI 결과를 그대로 사용하는 것보다, 여러 버전을 비교하고 노드별 과정을 조정하면서 최종 디자인 의도를 관리하는 것이 이 통합의 장점이다.

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

Figma생성형 AIfigma-weaveimage-generation+2

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

움직이는 원칙 | Figma 블로그

모션 디자인은 정적인 그래픽에 시간, 리듬, 속도, 소리, 순서를 더해 의미와 감정을 전달하는 작업이다. 좋은 모션을 만들려면 물리적 움직임을 이해하고, 타이밍과 이징을 활용해 이야기를 단계적으로 보여줘야 한다. 또한 자연·영화·예술 등 다양한 분야에서 움직임의 영감을 얻고, 우연히 생기는 조화까지 열린 태도로 받아들이는 것이 중요하다. ## 그래픽 디자인과 모션 디자인의 차이 - 그래픽 디자인은 정지된 한 장면 안에서 메시지를 전달한다. - 모션 디자인은 시간의 흐름을 활용해 다음 요소를 추가한다. - 리듬과 페이싱 - 변형과 전환 - 움직임의 성격과 캐릭터 - 소리와 이미지의 동기화 - 모든 내용을 한 화면에 담기보다 여러 프레임으로 나누어 “먼저 이것, 다음에 저것”의 순서로 보여주면 이야기를 더 쉽게 이해시킬 수 있다. - 모션의 핵심은 움직임 자체보다 시간 요소를 사용해 아이디어와 감정을 전달하는 데 있다. ## 타이밍, 이징, 사운드의 역할 - 이징과 타이밍은 움직임의 감정과 의도를 결정한다. - 음악의 박자처럼 모션도 속도와 간격의 구조를 가진다. - 이미지와 소리가 결합하면 각각의 요소를 넘어선 새로운 의미와 연결이 만들어진다. - 설계자가 모든 결과를 완벽히 통제하기보다, 사운드와 이미지가 만나며 생기는 우연한 효과와 ‘행복한 실수’를 받아들이는 태도도 창작의 중요한 부분이다. ## 물리학에서 찾는 움직임의 기준 - 현실의 움직임은 모션 디자인의 기본 참고점이다. - 예를 들어 공이 튀는 움직임은 다음과 같은 물리적 특징을 가진다. - 처음에는 빠르게 움직인다. - 위로 올라갈수록 속도가 느려진다. - 다시 떨어진다. - 반복할 때마다 튀어 오르는 높이가 낮아진다. - 이런 가속·감속과 에너지의 변화를 포착해야 움직임이 자연스럽고 설득력 있게 느껴진다. - 관객은 움직임이 왜 좋은지 설명하지 못해도 현실의 경험을 바탕으로 자연스러움과 어색함을 직관적으로 판단한다. ## 다양한 분야에서 얻는 영감 - 기존 모션 디자인만 참고하면 유행하는 표현을 반복하기 쉽다. - 자연의 움직임에서는 생동감과 물리적 설득력을 얻을 수 있다. - 영화의 스토리텔링과 편집 기법에서는 장면 전환과 서사 구성 방식을 배울 수 있다. - 예술과 디자인의 제스처, 형태, 움직임은 차별화된 표현을 만드는 데 도움이 된다. - 익숙한 공이나 사각형 애니메이션을 넘어 다양한 시각적·서사적 자원을 활용해야 독창적인 결과를 만들 수 있다. ## 모션의 핵심 원칙 - **Ease in / Ease out**: 움직임이 시간에 따라 가속하거나 감속하는 방식 - **Anticipation**: 앞으로 일어날 동작을 예고하는 준비 동작 - **Overshoot**: 목표 지점을 약간 지나친 뒤 원래 위치로 돌아오는 움직임 - **Follow-through**: 주된 움직임이 끝난 뒤에도 이어지는 보조 움직임 - **Hold**: 관객이 방금 일어난 일을 인식할 수 있도록 잠시 멈추는 구간 - **Settle**: 대상이 최종 위치에 도달한 뒤 안정되는 미세한 움직임 ## 전환으로 이야기를 연결하기 - 이징은 움직임의 속도뿐 아니라 장면이 자연스럽게 정착하는 느낌까지 결정한다. - **Match cut**은 서로 다른 장면을 같은 움직임이나 형태로 연결하는 편집 방식이다. - 느림에서 빠름으로, 다시 느림으로 속도를 변화시킨 뒤 가장 빠른 순간에 장면을 전환하면 두 장면이 매끄럽게 이어질 수 있다. - 전환은 이야기의 각 박자를 연결하고 전체 흐름을 하나로 묶는 역할을 한다. 실무에서는 먼저 전달하려는 메시지와 감정을 정한 뒤, 현실의 물리 법칙을 참고해 타이밍과 이징을 설계하는 것이 좋다. 여기에 자연·영화·음악 등 다양한 분야의 움직임을 결합하면 더 자연스럽고 독창적인 모션을 만들 수 있다.

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

FigmaAImotion-designanimation+2

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

Figma의 2026 AI 보고서: AI가 우리가 더 나은 협업을 하도록 도울 수 있을까? | Figma 블로그

AI는 개인 생산성 도구를 넘어 팀의 협업 방식 자체를 바꾸고 있다. Figma의 조사에서 AI가 팀워크에 유의미한 변화를 일으킨다고 답한 비율은 2년 전 7%에서 41%로 증가했다. 이제 중요한 경쟁력은 더 많이 만드는 능력보다, 무엇을 만들지 함께 판단하고 빠르게 실행하는 능력이다. ## 조사 범위와 AI 협업의 변화 - 3년간 디자이너, 개발자, PM을 대상으로 조사했으며, 설문 응답 8,403건과 정성 인터뷰 639건을 분석했다. - 조사 대상 국가는 기존 7개국에서 브라질, 인도, 한국을 추가해 10개국으로 확대됐다. - AI가 팀의 협업 방식을 바꾼다고 답한 비율은 2년 전 7%에서 현재 41%로 증가했다. - AI가 개인의 생산성을 높이면서, 이제 최적화 대상은 ‘10배 더 일하는 개인’이 아니라 ‘함께 더 빠르게 움직이는 팀’이 됐다. ## 캔버스 중심의 멀티플레이어 워크플로 - 디자이너의 개발 참여율은 지난 1년 동안 21%에서 41%로 두 배 가까이 증가했다. - 개발자의 디자인 업무 참여율도 44%에서 60%로 상승했다. - 제품 제작자의 76%는 업무의 절반 이상을 캔버스에서 수행하며, 10명 중 6명은 대부분의 시간을 캔버스에서 보낸다. - 개발자의 20%는 터미널이나 프롬프트보다 캔버스에서 프로젝트를 시작하는 것을 선호한다. - 터미널과 프롬프트가 개인 중심의 작업 공간이라면, 캔버스는 아이디어를 나란히 비교하고 피드백을 주고받으며 문제를 함께 탐색하는 공간이다. ## AI 시대에 더 중요해진 디자인의 역할 - AI는 제품, 카피, 이미지 등 거의 무엇이든 빠르게 만들 수 있지만, 무엇을 만들어야 하는지는 스스로 결정하지 못한다. - 프로토타입 제작과 콘텐츠 생성이 쉬워질수록 다음 판단이 중요해진다. - 어떤 제품을 출시할 것인가 - 어떤 메시지를 전달할 것인가 - 경쟁 제품과 어떻게 차별화할 것인가 - 속도, 품질, 비용 사이에서 어떤 타협을 선택할 것인가 - 응답자의 90%는 AI 이전보다 디자인이 최소한 같은 수준으로 중요하다고 답했으며, 약 60%는 더 중요해졌다고 평가했다. - 개발자 중에서도 65%가 디자인의 중요성이 커졌다고 답했다. - AI가 제작 능력의 격차를 줄일수록, 디자인적 판단력과 취향, 사용자 경험을 개선하는 능력이 더 큰 차별점이 된다. - 올바른 의사결정은 개인보다 여러 직군이 함께 논의할 때 더 정교해진다. ## 조직별 AI 도입 패턴 조사에서는 조직의 AI 도입 방식을 네 가지 유형으로 구분했다. - **통합형(Unified, 36%)** - 개인과 조직이 같은 방향으로 AI를 도입한다. - 공유된 업무 방식과 공통의 실행 체계가 마련되어 있다. - **지시형(Directive, 27%)** - 경영진이나 리더십이 위에서부터 AI 도입을 추진한다. - 전략은 존재하지만 실제 현장 업무와 연결되지 않을 수 있다. - **자발적 확산형(Grassroots, 20%)** - 실무자들이 먼저 AI 활용법을 개발하고 조직에 확산한다. - 구성원 간 활용 수준과 방식이 달라 소통 및 지식 공유의 공백이 생길 수 있다. - **초기 단계형(Nascent, 18%)** - AI 활용이 아직 제한적이며 조직 차원의 방향이나 경험이 충분히 형성되지 않았다. ## AI 도입의 핵심은 조직 간 격차 해소 - AI를 ‘혁신적’이라고 평가하는 디자이너, 개발자, PM의 비율은 1년 만에 세 배 증가했다. - 그러나 AI를 빠르게 도입하는 속도와 실제 체감 효과는 조직마다 크게 다르다. - 상향식 도입과 하향식 도입 모두 공통적으로 다음 문제를 겪는다. - 팀마다 AI 활용 수준이 다름 - 공유된 업무 원칙과 플레이북이 없음 - 조직의 전략과 실무 적용 사이에 간극이 존재함 - 팀 간 커뮤니케이션과 지식 공유가 부족함 - 실무자 중심으로 AI를 도입하는 조직은 효과적인 워크플로를 공개하고, 이를 공유 공간과 표준 프로세스로 발전시켜야 한다. - 리더십 중심으로 추진하는 조직은 AI 전략이 실제 업무에서 어떻게 적용되는지 확인하고 현장과의 간극을 줄여야 한다. AI 시대의 목표는 한 사람이 얼마나 빨리 일하느냐가 아니라, 팀 전체가 같은 맥락에서 더 빠르게 판단하고 움직이는 것이다. 따라서 기업은 개인별 AI 도구 도입에만 집중하기보다, 캔버스와 같은 협업 공간, 공통 플레이북, 직군 간 의사결정 프로세스를 함께 구축하는 것이 바람직하다.

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

FigmaAI프로토타이핑collaborative-design+2

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

Config 2026: 새로운 소재, 새로운 도구, 더욱 표현력 있는 캔버스 | Figma 블로그

Figma Config 2026의 핵심 방향은 캔버스를 단순한 디자인 작업 공간이 아니라 코드·모션·셰이더·생성형 플러그인 등을 함께 다루는 창작 환경으로 확장하는 것이다. Figma는 AI가 작업의 진입장벽은 낮췄지만 창작의 한계를 넓히는 것은 결국 디자이너와 크리에이터의 몫이라고 강조한다. 이를 위해 디자인과 코드의 경계를 없애고, 더 풍부한 표현과 협업을 캔버스 안에서 가능하게 하려 한다. ## 디자인 캔버스의 확장 - Figma는 이미지, 벡터, 디자인 레이어뿐 아니라 코드와 모션도 디자인 재료로 취급하려 한다. - 코드·모션·셰이더·생성형 플러그인·Weave 도구를 하나의 캔버스에서 조합하는 것이 이번 Config의 주요 방향이다. - 캔버스는 결과물이 저장되는 장소를 넘어, 아이디어를 연결하고 동료와 함께 반복적으로 발전시키는 협업 공간으로 정의된다. - AI가 창작의 진입장벽을 낮췄다면, 더 높은 수준의 창의성과 과감한 시도는 사용자가 만들어야 한다는 관점을 제시한다. ## 코드 레이어로 디자인과 개발 통합 - 기존의 “디자인 대 코드”라는 구분은 인위적인 논쟁이며, 코드는 이미지나 벡터와 같은 디자인 재료라는 것이 Figma의 주장이다. - Figma Design의 모든 디자인 레이어를 클릭 한 번 또는 프롬프트로 인터랙티브한 코드 레이어로 변환할 수 있다. - 코드 레이어를 복제해 여러 구현 방향을 나란히 비교하고 탐색할 수 있다. - 일반적인 Figma 캔버스처럼 팀원이 같은 파일에서 코드를 수정하고, 의견을 남기고, 반복 작업을 진행할 수 있다. - 코드로 만든 결과물을 다시 편집 가능한 디자인 레이어로 추출할 수 있다. - 디자인 레이어를 수정한 뒤에는 한 번의 클릭으로 변경 사항을 코드 레이어에 반영할 수 있어 디자인과 구현 사이를 양방향으로 오갈 수 있다. - 코드 레이어의 얼리 액세스는 7월부터 시작될 예정이며, 베타 대기자 등록을 통해 참여할 수 있다. ## Figma Motion으로 디자인에 움직임 추가 - Figma Design 안에 타임라인 기반의 모션 제작 기능이 추가된다. - 키프레임과 프리셋을 사용해 처음부터 애니메이션을 만들거나, 기존 디자인에 모션을 덧입힐 수 있다. - Figma agent를 이용해 애니메이션의 초기 시안을 생성할 수도 있다. - 모션 디자이너에게는 반복적인 작업을 줄이고, 창의적인 표현에 더 집중할 수 있는 환경을 제공한다. - 애니메이션을 컴포넌트에 한 번 정의하면 여러 화면과 협업자의 파일에서 디자인 시스템의 일부처럼 재사용할 수 있다. ## 모션과 개발 도구의 연결 - Dev Mode에서는 전체 타임라인을 확인하고 검사할 수 있다. - 각 키프레임, 타이밍 값, 이징 곡선을 별도의 해석 없이 읽을 수 있다. - 애니메이션 코드를 CSS, JSON 또는 React 프레임워크용 코드로 직접 복사할 수 있다. - MCP와 호환되므로 애니메이션이 적용된 프레임을 코딩 에이전트로 전달해 구현할 수 있다. - 결과물은 MP4, WebM, Animated SVG, GIF 등으로 내보낼 수 있으며, 향후 더 많은 포맷이 추가될 예정이다. Figma Config 2026은 디자인·개발·모션을 별도 도구로 분리하기보다 하나의 협업 캔버스에서 연결하려는 흐름을 보여준다. 특히 코드 레이어와 Figma Motion은 디자이너가 구현 가능성을 즉시 실험하고, 개발자는 디자인 의도와 애니메이션 세부 정보를 정확히 확인하도록 돕는 기능으로 볼 수 있다.

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

Figma생성형 AI모델 컨텍스트 프로토콜React+3