Figma/design-systems

245 개의 포스트

figma

올바른 방향으로 빠르게 나아가는 방법 | Figma 블로그 (새 탭에서 열림)

AI는 소프트웨어 제작 속도를 크게 높였지만, 빠른 실행이 곧 올바른 제품을 의미하지는 않는다. AI가 만든 결과물을 그대로 받아들이면 기술 부채가 늘고, 평균적인 디자인과 기능에 머물 수 있다. 따라서 좋은 팀은 먼저 무엇을 만들지 충분히 고민하고, 명확한 맥락과 시스템을 제공한 뒤, 자신만의 관점으로 결과물을 다듬어야 한다. ## AI는 실행을 가속하지만 판단을 대신하지 못한다 - AI는 짧은 프롬프트만으로도 완성도 높아 보이는 프로토타입과 코드를 만들어낸다. - 그러나 겉보기의 완성도는 내부 구조, 제약 조건, 시스템 동작 방식까지 올바르다는 뜻이 아니다. - 과거에는 결과물의 세련됨 뒤에 전문가의 의사결정과 트레이드오프가 있었지만, 이제는 AI가 그 빈틈을 임의로 채울 수 있다. - **인지적 항복(cognitive surrender)**은 AI의 출력을 검토 없이 자신의 판단처럼 받아들이는 현상이다. - 첫 번째 결과물이 그럴듯하다는 이유로 바로 출시하지 말고, 문제의 본질과 실제로 만들 가치가 있는 것을 먼저 정의해야 한다. 글에서는 이를 **고려의 의무(consideration imperative)**로 표현한다. ## 맥락과 의도를 먼저 제공해야 한다 - 에이전틱 엔지니어링에서는 개발자의 역할이 코드를 직접 작성하는 것에서 **의도를 명확히 표현하고 검증하는 것**으로 이동한다. - Google의 관련 백서는 다음 요소를 중요한 기반으로 제시한다. - **결정론적 계층**: 테스트, 타입 검사, 검증처럼 매번 동일하게 실행되며 AI의 오류를 잡는 장치 - **고신호 맥락**: 명세, 문서화된 컴포넌트, 설계 원칙 등 에이전트가 의도를 정확히 이해하도록 돕는 정보 - **명확한 인터페이스**: 시스템 각 부분이 어떻게 연결되는지 에이전트가 추측하지 않도록 정의한 계약 - 디자인에서 코드로 전환할 때도 에이전트가 실제 프로덕션 컴포넌트의 구조를 모르면 픽셀을 보고 임의로 재구성할 가능성이 높다. - Figma MCP의 Code Connect처럼 실제 컴포넌트의 코드, props, variants를 제공하면 에이전트가 기존 시스템에 맞는 결과를 만들 수 있다. - 강력한 디자인 시스템은 결정 사항을 재사용 가능한 어휘와 가드레일로 codify해 결과물의 일관성을 높이고 코드와 기술 부채를 줄인다. - 초기에는 명세와 시스템을 준비하는 데 더 많은 시간이 들지만, 장기적으로 유지보수 비용을 낮춘다. ## “괜찮은 결과”는 쉽게 평균이 된다 - AI 모델은 방대한 기존 데이터를 학습했기 때문에 이미 널리 사용된 패턴과 스타일, 즉 **분포 안의 평균적인 결과**를 생성하는 경향이 있다. - 예를 들면 다음과 같은 결과가 반복될 수 있다. - 로고: 단순한 기하학적 형태와 그라디언트 - 발표 자료: 흔한 산세리프 글꼴과 익숙한 레이아웃 - React 컴포넌트: 둥근 모서리의 전형적인 카드 UI - 이런 결과는 틀리지는 않지만 차별성이 부족하다. - AI가 만든 “충분히 좋은” 결과를 반복해서 받아들이면 사용자의 판단 기준이 좁아지고, “무엇이어야 하는가?”보다 “덜 나쁜 선택은 무엇인가?”를 고르게 된다. - AI의 품질이 향상될수록 개인이 과거보다 나은 결과를 만들 수 있지만, 동시에 다른 AI 생성물과 비슷해질 위험도 커진다. ## 제품의 관점은 사람이 결정해야 한다 - AI는 실행과 변형을 빠르게 수행할 수 있지만, 제품의 목적과 차별화된 방향까지 자동으로 결정하게 두어서는 안 된다. - 명확한 의도와 평가 기준이 없으면 모델이 기본값과 평균적인 패턴을 대신 선택한다. - 팀은 AI가 제시한 결과를 출발점으로 활용하되, 왜 이 기능과 디자인이 필요한지, 누구를 위한 것인지, 무엇이 달라야 하는지를 직접 판단해야 한다. - 결국 속도의 핵심은 첫 결과물을 빨리 내는 것이 아니라, 명확한 맥락과 검증 장치를 통해 **올바른 방향으로 빠르게 반복하는 것**이다. AI를 활용할 때는 프롬프트 작성보다 먼저 목표, 제약 조건, 성공 기준을 문서화하는 것이 좋다. 테스트·타입 검사·디자인 시스템·명확한 인터페이스를 갖추고, AI 결과물을 반드시 사람의 관점과 제품 기준으로 검토해야 평균적인 결과와 기술 부채를 피할 수 있다.

figma

이 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

더 나은 코드, 더 적은 토큰: MCP에서 Code Connect의 이점 | Figma 블로그 (새 탭에서 열림)

코딩 에이전트가 디자인을 코드로 변환할 때 Code Connect를 사용하면 실제 프로덕션 컴포넌트와 디자인 시스템을 더 정확히 활용할 수 있다. Figma MCP와 Code Connect를 함께 사용한 실험에서 작업 시간은 19.6%, 토큰 사용량은 29.5% 감소했고, 코드 품질은 1~4점 척도에서 1점 향상됐다. 즉, 시각적으로 비슷한 코드를 새로 만드는 대신 기존 컴포넌트를 직접 연결하면 더 빠르고 일관된 결과를 얻을 수 있다. ## 코딩 에이전트가 디자인 시스템을 잘못 구현하는 이유 - Figma MCP의 `get_design_context`는 캔버스의 디자인을 React 코드 형태로 설명한다. - Code Connect가 없으면 에이전트는 다음과 같은 문제를 겪을 수 있다. - 기존 컴포넌트 대신 새로운 컴포넌트를 직접 생성한다. - 디자인 시스템에서 잘못된 컴포넌트를 선택한다. - 올바른 컴포넌트를 찾더라도 검색과 수정에 불필요한 토큰과 시간을 사용한다. - 결과물은 시각적으로는 맞아 보여도 프로젝트의 실제 코드 구조나 디자인 시스템 규칙과 어긋날 수 있다. ## Code Connect가 MCP 응답을 보강하는 방식 - Code Connect는 Figma 컴포넌트와 코드베이스의 실제 컴포넌트를 연결한다. - 설정이 완료되면 MCP 응답에 일반적인 React 표현 대신 프로덕션 코드에 가까운 코드 스니펫이 포함된다. - 에이전트는 다음 정보를 직접 전달받는다. - 사용해야 할 컴포넌트의 import 경로 - 컴포넌트에 전달할 정확한 속성값 - 디자인 요소와 코드 컴포넌트 간의 대응 관계 - 예를 들어 Code Connect가 없으면 탭 UI를 여러 `<button>` 요소와 CSS 클래스로 재구성할 수 있다. - Code Connect를 사용하면 다음처럼 기존 디자인 시스템 컴포넌트를 바로 사용한다. ```tsx <SegmentedControl value="design" options={["Design", "Code"]} /> ``` ## Coinbase 사례 - Coinbase Design Systems 팀은 일관된 UI를 위해 핵심 컴포넌트, 디자인 토큰, 인프라를 관리한다. - 에이전트 기반 개발을 도입하면서 Code Connect를 적용해 에이전트가 CDS 컴포넌트를 재사용하도록 했다. - Code Connect가 없을 때는 에이전트가 스테퍼를 프로그레스 바 조합으로 임의 구현하는 등 컴포넌트를 잘못 추측할 수 있었다. - Code Connect를 사용하면 정확한 코드 표현과 실제 CDS 컴포넌트의 import 문을 확인할 수 있어 코드 품질이 향상되고 토큰도 절약됐다. ## Code Connect의 효과를 측정한 실험 - 동일한 디자인, 프롬프트, 모델을 사용해 Code Connect 적용 여부만 달리한 디자인-투-코드 작업을 비교했다. - 총 27개 테스트 케이스에서 다음 항목을 측정했다. - 코드 품질 - 토큰 사용량 - 작업 소요 시간 - React 기반 디자인 시스템 두 가지를 대상으로 했다. - Figma의 예제 디자인 시스템인 Simple Design System(SDS) - 더 규모가 크고 복잡한 내부 시스템인 Figma Pattern Library(FPL) - Code Connect 적용 결과: - 작업 시간 중앙값 19.6% 감소 - 토큰 사용량 중앙값 29.5% 감소 - 코드 품질 1~4점 Likert 척도에서 1점 향상 ## 실용적인 적용 방향 - 디자인 시스템의 핵심 컴포넌트에 Code Connect 템플릿을 우선 설정하는 것이 효과적이다. - 에이전트가 직접 HTML과 스타일을 조합하게 하기보다 실제 컴포넌트와 import 정보를 제공해야 한다. - 디자인 시스템을 사용하는 팀이라면 Code Connect를 단순한 인간 개발자용 문서화 도구가 아니라 에이전트의 코드 생성 품질과 비용을 개선하는 컨텍스트 계층으로 활용할 수 있다.

figma

Sightlines 1호: Config에서 얻은 인사이트 | Figma 블로그 (새 탭에서 열림)

AI 시대에도 좋은 리더십의 기본과 디자인의 본질은 변하지 않는다. 리더들은 AI를 제품·팀·업무 시스템에 통합하면서도 품질을 유지하는 방법을 실험하고 있으며, 속도보다 중요한 것은 인간의 판단력과 협업이라고 강조한다. 자동화로 생산량이 늘어날수록 좋은 결과를 선별하는 ‘취향(taste)’과 세밀한 완성도가 핵심 경쟁력이 된다. ## AI 시대의 리더들이 고민하는 과제 - AI를 제품, 조직, 업무 프로세스에 어떻게 도입할지 아직 대부분의 리더가 탐색 중이다. - AI가 제공하는 빠른 제작 속도를 활용하면서도 품질 저하를 막아야 한다. - AI 이전의 전문성, 팀 구조, 협업 방식 중 무엇을 유지하고 무엇을 바꿀지 재검토하고 있다. - 변화의 방향을 리더 자신도 완전히 알지 못하는 상황에서 팀을 이끌어야 한다. ## 변하지 않는 리더십의 기본 - 좋은 리더의 핵심 역량은 AI 시대에도 크게 달라지지 않는다. - 호기심이 많고 비판적으로 사고하는 사람들로 팀을 구성해야 한다. - 빠르게 결과를 만드는 것보다 높은 완성도와 장인정신에 대한 기준을 유지해야 한다. - 리더는 모든 세부 사항을 직접 통제할 수 없으므로, 신뢰할 수 있는 인재를 채용하고 권한을 위임해야 한다. ## 초보자의 관점으로 실험하기 - 리더와 팀원 모두 기존 방식이나 전문성에만 의존하지 않고 원칙부터 다시 검토해야 한다. - AI 도구를 단순히 도입하는 데 그치지 말고, 실제 프로토타입을 만들며 가능성과 한계를 확인해야 한다. - 리더도 팀과 함께 직접 실험하며 변화 과정을 경험해야 한다. - 새로운 도구를 좇기보다 어떤 문제를 해결하려는지, 고객과 인간에게 어떤 가치를 주는지를 먼저 판단해야 한다. ## 개인 작업보다 중요해진 협업 - AI 도구는 사람을 혼자 작업하는 흐름으로 끌어갈 수 있지만, 리더들은 오히려 협업을 강화하고 있다. - 작업물을 공개하고, 팀 전체가 피드백과 비평을 주고받아야 한다. - 여러 사람이 결과물을 함께 검토하고 최선의 방향을 논쟁하는 과정이 품질을 높인다. - 협업은 단순한 업무 분담이 아니라 판단 기준을 공유하고 결과의 완성도를 높이는 방식이다. ## 자동화 시대의 핵심 경쟁력은 ‘취향’ - AI로 누구나 빠르게 많은 결과물을 만들 수 있게 되면서 결과물의 양 자체는 차별점이 되기 어렵다. - 무엇이 좋은지 판단하고, 불필요하거나 수준 낮은 결과를 과감히 제거하는 편집 능력이 중요해진다. - 한동안 낮은 품질의 디자인이 많아질 수 있지만, 뛰어난 작업은 결국 드러난다는 전망이 제시된다. - 창작자의 상상력, 판단력, 편집 능력은 자동화하기 어려운 인간 고유의 역량으로 남는다. ## 인간 중심 디자인과 세부 완성도 - 도구 자체를 따라가기보다 최종 사용자인 인간을 중심에 두어야 한다. - 디자인은 고객에게 기업이 얼마나 세심하게 신경 썼는지를 보여주는 수단이다. - 작은 세부 사항까지 정교하게 다듬으면 고객에게 논리적 만족을 넘어 감정적 반응을 이끌어낼 수 있다. - AI 시대에도 인간을 이해하고 배려하는 태도와 세심한 품질 관리가 중요하다. AI를 활용할 때는 속도와 생산성만 추구하기보다, 실험·협업·비판적 검토를 함께 운영하는 것이 바람직하다. 특히 팀은 AI가 만든 결과를 그대로 받아들이지 말고, 인간의 취향과 판단력으로 선별하고 다듬는 체계를 갖춰야 한다.

figma

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

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

스킬이 있으신가요? Figma Agent를 더 나은 협업자로 만들기 | Figma 블로그 (새 탭에서 열림)

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

figma

Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다 | Figma 블로그 (새 탭에서 열림)

Figma는 디자인 캔버스에 타임라인 기반의 네이티브 애니메이션 기능인 **Figma Motion**을 도입했다. 이제 컴포넌트·변수·팀 협업 환경과 애니메이션을 같은 파일에서 다룰 수 있으며, Figma Agent와 Dev Mode를 통해 제작과 핸드오프의 장벽을 낮춘다. 모션을 특정 전문가의 작업이 아니라 디자인 시스템의 일부로 만들겠다는 것이 글의 핵심이다. ## 캔버스에 통합된 애니메이션 작업 - Design, Draw, Dev 모드와 나란히 Motion 모드가 제공된다. - 프레임을 Motion 모드로 전환하면 디자인 옆에 타임라인이 표시된다. - 외부 애니메이션 도구나 플러그인으로 이동하지 않고 같은 파일에서 디자인과 모션을 제작할 수 있다. - 모션에 익숙하지 않은 디자이너도 Figma Agent에 프롬프트를 입력해 애니메이션 아이디어와 개선점을 얻을 수 있다. - 이를 통해 모션 제작을 전문 모션 디자이너만의 업무가 아니라 팀 전체의 작업으로 확장한다. ## 타임라인과 키프레임 제어 - 레이어를 타임라인에서 드래그해 애니메이션의 시작과 지속 시간을 조정할 수 있다. - 플레이헤드를 이동하거나 스크럽해 특정 시점의 결과를 미리 볼 수 있다. - 위치, 크기, 회전, 불투명도를 각각 독립적으로 키프레임화할 수 있다. - 자동 키프레임 기능을 켜면 플레이헤드가 움직이는 동안 변경한 값이 자동으로 기록된다. - 페이드, 이동, 확대·축소 같은 프리셋 애니메이션 스타일을 빠르게 적용할 수 있다. - 여러 스타일을 동시에 겹쳐 실행하거나 타임라인에서 순차적으로 배치할 수 있다. - 사용자 정의 애니메이션 스타일을 만들어 저장하는 기능도 제공될 예정이다. ## 시간 기반 협업과 핸드오프 - 캔버스에 시간 기반 댓글을 남겨 애니메이션의 특정 순간을 직접 지적할 수 있다. - 모션 리뷰에서 “어느 프레임의 어떤 움직임”을 수정해야 하는지 명확하게 전달할 수 있다. - Dev Mode에서도 타임라인과 관련 기능에 접근할 수 있어 개발자와의 협업이 쉬워진다. - 디자인 단계부터 팀 전체가 모션을 검토하므로, 개발 단계에서 뒤늦게 애니메이션을 전달하는 병목을 줄인다. ## 디자인 시스템에 포함되는 모션 - 컴포넌트에 애니메이션을 포함할 수 있으며, 해당 컴포넌트가 다른 화면과 협업자의 파일로 복제될 때 모션도 함께 이동한다. - 모션을 매번 새로 만드는 대신 디자인 시스템의 재사용 가능한 구성 요소로 관리할 수 있다. - 팀이 정의한 모션 원칙과 스타일을 여러 파일에 일관되게 적용할 수 있다. - 결과적으로 모션이 개인의 작업 속도나 전문성에 따라 달라지는 문제를 줄인다. ## 모션 변수와 모드 - 모션 변수에 easing 같은 애니메이션 값을 저장할 수 있다. - 하나의 변수에 여러 모드를 정의해 상황별 애니메이션 동작을 관리할 수 있다. - 페이지 수준에서 모드를 변경하면 해당 변수를 참조하는 모든 애니메이션이 한꺼번에 업데이트된다. - 디자인 토큰처럼 모션의 속도감과 전환 방식을 중앙에서 통제할 수 있다. ## 셰이더 속성의 애니메이션 - 셰이더가 노출하는 속성도 Motion 타임라인에서 키프레임화할 수 있다. - 기존에는 Figma에서 애니메이션화할 수 있는 속성이 제한적이었지만, 이제 슬라이더나 입력 필드로 조정 가능한 셰이더 값까지 시간에 따라 변화시킬 수 있다. - 이를 활용하면 시각 효과와 인터랙션 표현의 범위를 넓힐 수 있다. ## 실용적인 결론 Figma Motion은 애니메이션을 별도 제작·핸드오프 단계가 아닌 디자인 시스템과 협업 과정의 기본 요소로 통합하려는 기능이다. 팀은 컴포넌트와 모션 변수를 함께 정의하고, 타임라인 댓글과 Dev Mode를 활용해 디자인 초기부터 개발자와 움직임을 조율하는 방식으로 활용하는 것이 좋다.

figma

색의 언어로 말하기 | Figma 블로그 (새 탭에서 열림)

색은 단순한 시각 요소가 아니라 감정과 문화적 의미를 전달하는 언어이며, 브랜드의 메시지와 정체성을 형성하는 중요한 도구다. Pantone Color Institute(PCI)는 자연, 문화, 사회 분위기, 지역별 관습을 분석해 색이 사람들에게 어떻게 받아들여지는지 연구한다. 효과적인 색상 선택은 유행을 따르는 데 그치지 않고, 전달하려는 메시지와 사용 환경에 맞춰 색의 의미를 설계하는 데서 출발한다. ## 색이 감정과 인식에 미치는 영향 - 색에 대한 무의식적 반응은 자연환경과 밀접하게 연결되어 있다. - 노란색은 태양의 따뜻함과 즐거움을 연상시킨다. - 초록색은 재생과 성장을, 갈색은 안정감과 뿌리내림을 나타낸다. - 파란색은 변함없이 존재하는 하늘의 이미지 때문에 신뢰와 안정성을 전달한다. - 주황색은 과일의 새콤달콤한 맛과 연결되어 활기와 감각적인 즐거움을 불러일으킨다. - 자연을 반영하는 색은 문화와 시대가 바뀌어도 비교적 오래 지속되는 힘을 가진다. - 영화, 음악, 예술가, 여행, 스포츠, 신기술, 사회 분위기와 경제 상황도 색에 대한 감각을 변화시킨다. - 경제가 위축되면 사람들이 선호하는 색상 팔레트 역시 달라질 수 있다. ## 지역과 문화에 따른 색의 의미 - 색의 의미는 전 세계적으로 동일하지 않으며, 지역마다 고유한 “색의 방언”이 존재한다. - 서양에서는 장례식에 검은색을 입지만, 동양 일부 문화권에서는 흰색을 입는다. - 빨간색도 문화권에 따라 사랑·분노·긴급함을 뜻할 수 있고, 동양에서는 행운·번영·축하를 상징하기도 한다. - 따라서 브랜드와 마케팅 팀은 색상 트렌드나 보편적 의미만 믿어서는 안 된다. - 일본과 프랑스 소비자는 같은 제품을 보더라도 각자의 문화적 경험에 따라 색을 다르게 해석할 수 있다. ## 색으로 브랜드 스토리 만들기 - 효과적인 브랜드 색상은 회사가 무엇을 지향하는지 시각적으로 표현해야 한다. - 코카콜라의 빨간색은 흥분과 에너지를 전달하며, 시간이 지나면서 브랜드 자체를 상징하는 색이 되었다. - Airbnb는 2014년 기존의 베이비 블루를 연어색으로 변경했다. - 따뜻하고 인간적인 인상을 주며, 낯선 사람의 집에 머무는 데서 오는 불안감을 완화하려는 의도가 담겼다. - 이후 현지 문화를 연결하는 Experiences 서비스와도 자연스럽게 연결되었다. - Charli XCX의 ‘Brat Green’은 패션에서 먼저 관찰된 이질적인 색이 대중문화의 상징으로 발전한 사례다. - 병들거나 불쾌한 느낌을 줄 수 있는 색에 새싹과 생명력의 이미지를 결합했다. - 강렬한 색감과 노란 기운이 소셜미디어에서 눈에 띄는 대담함과 활력을 만들어냈다. - 브랜드 색은 고립된 색상값이 아니라 브랜드가 전달하려는 감정, 시대정신, 소비자 경험과 함께 설계해야 한다. ## 재료와 매체를 고려한 색상 설계 - 같은 색이라도 화면, 직물, 플라스틱, 종이 등 재료와 표면에 따라 다르게 보인다. - 디지털 화면에서 매력적인 색이 실제 제품에서는 지나치게 자극적으로 보일 수 있다. - 직물 염료로 구현 가능한 색이 의료용 밴드 같은 다른 소재에서는 구현되지 않을 수도 있다. - 따라서 색상은 디자인 후반에 추가하는 요소가 아니라 초기 기획 단계부터 고려해야 한다. - 색을 선택할 때는 색상 자체뿐 아니라 재료, 표면 마감, 조명, 실제 사용 환경까지 함께 검토해야 한다. ## 팬톤 컬러 연구와 시대정신 - Pantone Color Institute는 1986년 설립되었으며, 색채 심리학자와 트렌드 예측가로 구성된 글로벌 조직이다. - 연구 결과는 다음과 같은 분야에 활용된다. - PANTONEVIEW 트렌드북 - Pantone Connect 같은 디자인 도구 - 팬톤의 실물 컬러 가이드 - 매년 발표되는 Pantone Color of the Year - 매년 선정되는 올해의 색은 26년 이상 이어진 교육·문화 프로그램으로, 디자인 업계에서 큰 영향력을 행사한다. - PCI는 색을 단순히 예쁜 조합으로 고르는 것이 아니라, 사회 변화와 문화적 분위기, 소비자의 감정 변화를 반영하는 방식으로 해석한다. 제품이나 브랜드에 색을 적용할 때는 먼저 “어떤 메시지를 전달할 것인가”를 정한 뒤, 목표 시장의 문화적 맥락과 실제 소재·매체에서의 구현 가능성을 함께 검토하는 것이 좋다. 유행하는 색을 그대로 따라가기보다 브랜드의 가치와 사용자의 감정을 연결하는 색상 체계를 설계해야 한다.

figma

Figma에서 MCP 서버를 활용하는 4가지 방법 | Figma 블로그 (새 탭에서 열림)

Figma의 MCP 서버는 디자인 파일을 읽는 수준을 넘어 Slides·FigJam·Make·Figma 에이전트 전반에서 콘텐츠를 생성하고 수정하는 도구로 확장됐다. 에이전트는 사내 문서와 최신 제품 정보를 바탕으로 발표 자료나 협업 보드를 만들고, Figma 템플릿·디자인 시스템·사용자 정의 폰트까지 반영할 수 있다. 그 결과 반복적인 콘텐츠 제작의 상당 부분을 자동화하면서도 최종 검토와 창의적 판단은 사람이 담당하는 워크플로가 가능해졌다. ## Figma MCP 서버의 확장된 역할 - Figma Slides, FigJam, Figma Make, 새로운 Figma 디자인 에이전트에서 프롬프트 기반 생성·수정을 지원한다. - 디자인 파일의 이미지와 아이콘을 SVG, PDF, JPG, PNG로 내려받을 수 있는 `download_assets` 도구가 추가됐다. - 업로드한 사용자 정의 폰트를 지원해 웹 안전 폰트로 대체하지 않고 브랜드 서체를 그대로 렌더링한다. - `use_figma` 도구와 `/figma-use-slides` 같은 MCP 스킬을 조합해 팀의 템플릿과 디자인 의도를 결과물에 반영한다. - 스킬은 에이전트의 출력 품질과 일관성을 높이며, Figma 커뮤니티에서 공유하거나 직접 제작할 수 있다. ## 지속적으로 갱신되는 발표 자료 만들기 - Figma의 디자이너 옹호 담당자는 AI 제품 출시 내용을 정리한 상시 업데이트형 발표 자료를 운영한다. - 다음과 같은 프롬프트를 코드 에디터에서 실행해 자료를 갱신한다. - Slack, Google Drive, Shortcut 블로그, 릴리스 노트에서 최신 정보를 수집 - 기존 덱에서 갱신이 필요한 부분을 제안 - 새로 추가할 슬라이드 아이디어를 생성 - Figma Slides의 기존 템플릿에 내용을 반영 - 에이전트가 관련 대화, 브리프, 출시 메시지를 모아 초안의 약 80%를 완성한다. - 이후 사람은 이미지 교체, 문구 수정, 내용 검토 등 품질 관리에 집중한다. - 사용자 정의 폰트를 활용하기 때문에 발표 자료의 브랜드 정체성과 시각적 일관성을 유지할 수 있다. - 같은 방식은 다음과 같은 업무에도 적용된다. - PM의 제품 킥오프 자료 작성 - 디자이너의 디자인 탐색 발표 - 마케팅 팀의 GTM 계획 수립 - 영업 팀의 고객용 자료 최신화 - 핵심 이점은 단순히 제작 속도를 높이는 데 그치지 않고, 팀의 디자인 시스템과 브랜드 기준을 반영한 결과물을 만드는 것이다. ## 실시간 데이터를 반영한 FigJam 보드 생성 - 제품 관리자는 기능 킥오프 워크숍을 준비할 때 회사 곳곳의 정보를 수집하고, 세션에 맞게 FigJam 섹션을 구성해야 한다. - 이 과정은 관련 맥락을 모으고 보드 형식을 맞추는 데 많은 시간이 걸린다. - 이를 자동화하기 위해 `/figjam-builder`라는 커스텀 스킬을 구축했다. - 스킬과 MCP 서버를 이용하면 실시간 데이터와 조직 내 정보를 바탕으로 워크숍용 FigJam 보드를 생성할 수 있다. - 제공된 본문은 이 사례의 구체적인 구현 방식과 나머지 두 가지 활용 사례 설명으로 이어지기 전에 중단되어 있다. MCP를 도입할 때는 모든 결과를 자동 게시하기보다, 에이전트가 자료 조사와 초안 작성을 맡고 사람이 사실관계·문구·시각 요소를 검토하는 방식이 현실적이다. 특히 팀 템플릿, 디자인 시스템, 사용자 정의 폰트, 업무별 스킬을 함께 제공할수록 자동화 결과의 품질과 브랜드 일관성이 높아진다.

figma

취향을 가꾸는 일은 결코 멈추지 않는다 | Figma 블로그 (새 탭에서 열림)

도구와 AI만으로는 장인의 경지에 도달할 수 없으며, 중요한 것은 자신만의 관점인 ‘감각(taste)’을 기르는 일이다. 감각은 반복적인 연습과 피드백, 세부 사항에 대한 관심, 사용자와 결과물에 대한 배려를 통해 끊임없이 발전한다. AI는 더 많은 가능성을 탐색하게 해주지만, 무엇을 선택하고 다듬을지는 여전히 사람의 감각에 달려 있다. ## 숙련은 기술 습득을 넘어 관점을 만드는 일 - 어떤 분야든 재료와 도구의 작동 방식을 이해하고 반복해서 연습해야 한다. - AI가 작업 방식을 바꾸더라도 전문가가 되는 과정 자체가 사라지지는 않는다. - 진정한 전문성은 새로운 기술을 많이 익히는 데 그치지 않고, 세상을 바라보고 해석하는 고유한 방식을 갖는 데서 나온다. - 피아노 연주나 작곡에서 리듬과 강약을 조절해 감정을 전달하듯, 디자인에서도 각 선택의 이유와 효과를 이해해야 한다. - 멘토의 조언, 비평, 협업, 꾸준한 실천이 창의적 직관을 형성한다. ## 감각은 배려와 의도성에서 나온다 - 감각이 뛰어난 결과물은 제작자의 의도와 그것을 끝까지 구현하려는 노력을 보여준다. - 디터 람스의 브라운 제품처럼 기능만 설계하는 것이 아니라, 제품이 놓일 공간과 사용자가 만지는 경험까지 고려해야 한다. - 감각은 모든 사람이 좋아하는 보편적 취향이 아니다. 서로 다른 미적 관점을 가진 디자이너도 충분히 감각적일 수 있다. - 제품 디자인에서는 형태와 기능, 표현력과 가독성, 추가할 것과 حذف할 것 사이의 트레이드오프를 어떻게 다루는지가 감각을 드러낸다. - 세부 사항에 얼마나 투자하고 어떤 타협을 거부하는지가 결과물의 개성을 만든다. ## 좋은 결과물을 만드는 세 가지 요소 저자는 감각을 가진 사람을 판단할 때 다음 세 가지를 본다고 설명한다. - **분별력(Discernment)** - 무엇이 잘못되었는지뿐 아니라 왜 잘못되었는지 설명할 수 있어야 한다. - 다른 사람은 막연히 느끼는 문제를 구체적인 언어와 근거로 표현할 수 있어야 한다. - **공감(Empathy)** - 화면이나 제품 자체가 아니라 그 반대편에 있는 사용자를 생각해야 한다. - 다양한 화면 크기, 색상 프로필, 인터페이스 언어, 사용 빈도가 낮은 상태까지 고려하는 태도가 중요하다. - **창의적 에너지(Creative energy)** - 개인 프로젝트나 실험을 계속하며, 해결하고 싶은 문제를 스스로 만들어 나가야 한다. - 결과물을 만들지 않고는 견디기 어려울 정도로 자신의 분야에 몰입하는 태도가 드러난다. ## 감각은 연습과 협업 속에서 자란다 - 음악에서는 손가락이 건반을 익히고 귀가 음 사이의 공간을 감지하듯, 디자인에서도 반복 작업을 통해 품질 판단이 몸에 배게 된다. - 디자인 비평은 자신의 판단을 검증하고 다른 관점을 받아들이는 중요한 과정이다. - 완성도는 혼자만의 취향에서 나오는 것이 아니라, 협업과 피드백을 통해 의도를 더 명확하게 다듬을 때 높아진다. - 사용자가 거의 경험하지 않는 빈 상태나 아주 미세한 전환 속도처럼 눈에 잘 띄지 않는 부분도 세심하게 관리해야 한다. ## AI는 감각을 대체하지 않고 창작의 범위를 넓힌다 - AI가 첫 번째 결과물을 빠르게 만들어 주더라도, 그것을 최종 결과로 받아들이는 태도는 감각의 부족을 의미할 수 있다. - 제임스 다이슨이 대표적인 진공청소기 디자인을 완성하기까지 5,127개의 시제품을 만든 사례처럼, 뛰어난 결과물에는 반복적인 선택과 개선이 필요하다. - 좋은 도구는 머릿속의 의도와 실제 결과물 사이의 간극을 줄여준다. - AI는 더 넓은 방향을 탐색하고 더 많은 시안을 만드는 데 도움을 주지만, 어떤 결과가 적절한지 판단하는 기준은 제공하지 못한다. - 결과물에 반복적으로 쌓인 의도적 선택이 결국 “이 사람만 만들 수 있는 것”이라는 고유성을 만든다. 결국 감각을 기른다는 것은 자신의 분야를 사랑하고, 사용자와 결과물을 세심하게 배려하며, 반복해서 선택하고 수정하는 일이다. AI를 활용하더라도 첫 결과물을 그대로 받아들이기보다 다양한 가능성을 탐색한 뒤 자신의 기준으로 엄격하게 선별하고 다듬는 것이 바람직하다.

figma

AI 도구로 아이디어를 제품으로 발전시키는 4가지 새로운 방법 | Figma 블로그 (새 탭에서 열림)

AI 도구는 제품 개발의 시작점을 아이디어나 정적 목업에서 실행 가능한 프로토타입으로 확장하고 있다. 팀은 코드를 통해 복잡한 제약과 실제 데이터를 먼저 검증한 뒤 Figma에서 함께 탐색·개선하고, 필요하면 디자인 맥락을 유지한 채 다시 코드로 돌아갈 수 있다. 글은 FloQast, Merkle, Affirm, Accor의 사례를 통해 속도와 의도적인 협업을 결합하는 네 가지 AI 기반 워크플로를 소개한다. ## AI 시대의 제품 개발 방식 변화 - 제품팀은 초기부터 프로토타입을 만들며 아이디어를 검증하는 방향으로 이동하고 있다. - AI 코딩 도구를 활용하면 디자이너나 기획자도 개발자의 큰 투입 없이 복잡한 상호작용을 시험할 수 있다. - 제품 탐색은 코드, Figma 캔버스, 다시 코드로 이어지는 순환형 과정이 된다. - AI는 탐색 범위를 넓힐 뿐 아니라, 기존에 핸드오프 과정에서 사라지던 디자인 시스템과 맥락을 개발 단계까지 전달하는 데 활용된다. ## 코드로 복잡한 제약 검증 - 정적 목업만으로 평가하기 어려운 다음과 같은 상황을 코드 기반 프로토타입으로 테스트할 수 있다. - 한 작업이 완료되어야 다음 작업이 활성화되는 다단계 흐름 - 실제 데이터에 따라 화면과 동작이 달라지는 인터페이스 - 사용자 권한, 조건부 상태, 외부 시스템 간 데이터 일치 여부 - 제품 담당자는 AI 코딩 도구로 실제 동작하는 프로토타입을 만들고, 이후 **Codex to Figma**를 통해 Figma 캔버스로 가져와 팀과 함께 검토할 수 있다. - 디자인에서 추가 조정이 필요하면 Figma에서 작업한 뒤 MCP를 통해 코드로 되돌릴 수 있으며, 디자인 맥락도 함께 유지된다. ## FloQast의 복잡한 회계 워크플로 테스트 ### 문제 상황 - FloQast의 회계 소프트웨어에서는 작업 간 의존성, 결제 처리업체와 은행 간 기록 대조, 검토 및 승인 절차 등이 중요하다. - 기존 워크플로에서는 사용자가 불일치를 확인하기 위해 여러 페이지를 오가야 했다. - 팀은 작업 목록, 차단된 작업, 문제 해결 기능을 하나의 화면에 통합하려 했다. - 초기 프로토타입은 가능성을 보였지만, 실제 데이터와 연결된 여러 단계의 상호작용을 정적 디자인만으로는 검증하기 어려웠다. ### AI 코딩 프로토타입의 활용 - UX 매니저 Benjamin Ellis는 AI 코딩 도구로 시뮬레이션 백엔드와 실제 고객 워크플로를 기반으로 한 현실적인 데이터를 구성했다. - 팀은 한 단계의 완료가 다음 단계의 상태를 바꾸는 실제 시나리오를 직접 실행했다. - 겉보기에는 자연스러워 보였지만 실제 데이터와 로직을 적용하면 무너지는 흐름을 조기에 발견했다. ### 결과와 적용 시점 - 디자인 방향을 확정하기 전에 실제 시나리오를 충분히 검증해 후속 개발 단계의 예상치 못한 문제를 줄였다. - 다음과 같은 경우에 이 방식을 적용할 수 있다. - 권한이나 조건에 따라 UI 동작이 달라지는 경우 - 한 동작이 다른 동작과 상태에 연쇄적으로 영향을 주는 경우 - 작은 수정은 디자인 툴을 거치는 것보다 코드에서 직접 처리하는 편이 빠른 경우 - 디자이너와 개발자가 복잡한 경험을 함께 정의해야 하는 경우 정적인 화면을 먼저 완성하려 하기보다, AI 도구로 실제 데이터와 로직을 포함한 작동 가능한 프로토타입을 빠르게 만든 뒤 디자인과 개발을 오가는 방식이 효과적이다. 특히 복잡한 제품일수록 초기 코드 검증을 통해 잘못된 상호작용을 일찍 발견하고, Figma를 협업과 refinement의 공간으로 활용하는 것이 유리하다.

figma

피그마 디자인 에이전트가 출시되었습니다 | 피그마 블로그 (새 탭에서 열림)

Figma는 캔버스 안에서 직접 작동하며 디자인 시스템과 팀의 작업 맥락을 이해하는 전용 디자인 에이전트를 공개했다. 이 에이전트는 AI 생성과 직접 조작 중 하나를 선택하게 하지 않고, 아이디어 탐색부터 반복 수정·대량 편집까지 디자이너의 작업을 보조한다. Figma는 이를 통해 속도와 정밀성, 자동화와 디자이너의 통제력을 함께 확보하려 한다. ## 캔버스에 통합된 Figma 디자인 에이전트 - 에이전트는 Figma 캔버스와 왼쪽 레일에서 바로 사용할 수 있다. - 특정 디자인 레이어에서 프롬프트를 시작할 수 있다. - 여러 프롬프트를 병렬로 실행해 다양한 아이디어를 동시에 비교할 수 있다. - 사용자가 직접 편집하는 동안 에이전트도 계속 반복 작업을 수행할 수 있다. - 별도의 도구 설정이나 컨텍스트 전환 없이 팀과 같은 파일 안에서 협업자처럼 작동한다. - 컴포넌트, 디자인 토큰, 변수, 표준, 모범 사례 등 Figma 내부의 디자인 시스템 맥락을 이해하도록 설계됐다. ## Figma 에이전트와 MCP 서버의 역할 분담 - **Figma 에이전트** - 캔버스 안에서 디자인을 생성하고 수정하는 데 적합하다. - 현재 파일과 디자인 시스템에 대한 추가 맥락을 활용한다. - Figma 파일을 직접 편집하며 결과물을 바로 조작할 수 있다. - **MCP 서버와 `use_figma`** - 코드를 캔버스로 가져오거나 디자인을 다시 코드로 보내는 작업에 사용한다. - 코드와 Figma 사이를 오가며 디자인 충실도를 유지할 수 있다. - 두 방식은 경쟁 관계가 아니라, 캔버스 작업과 코드-디자인 간 연결을 각각 담당한다. ## 다양한 디자인 방향 탐색 - 첫 번째 아이디어나 프롬프트에 머무르지 않고 여러 방향을 빠르게 실험할 수 있다. - 같은 문제에 대해 서로 다른 스타일의 시안을 여러 개 생성할 수 있다. - 예: 유기적 스타일, 현대적 스타일, 복고풍 스타일 - 서로 다른 비즈니스 목표에 맞춘 결제 흐름이나 정보 구조를 비교할 수 있다. - Figma Design에서 흐름, 상태, 문구, 구조를 구체화한 뒤 Figma Make로 보내 동작을 위한 코드 레이어를 생성할 수 있다. - 반대로 Figma Make에서 만든 프레임을 Figma Design으로 가져와 에이전트로 다듬은 뒤 다시 Make로 보낼 수도 있다. ## 디자인 시스템을 활용한 생성과 반복 - 에이전트는 자주 사용되거나 최근 사용된 컴포넌트를 우선 활용한다. - 특정 라이브러리를 선택하거나 토큰·변수·컴포넌트를 `@` 멘션해 결과를 세밀하게 통제할 수 있다. - 디자인 시스템에 맞는 화면을 생성하고 기존 디자인을 새로운 스타일로 리믹스할 수 있다. - 예시 작업: - 모바일 앱용 가로 스크롤 이미지 캐러셀 생성 - 이미지 위·아래에 제목을 배치한 여러 버전 비교 - 특정 디자인을 여러 시각적 스타일로 변환 - AI가 평균적인 결과물을 빠르게 만드는 데 그치지 않도록, 여러 대안을 비교한 뒤 최종 방향은 디자이너가 직접 선택하고 조작하도록 한다. ## 반복적인 대량 작업 자동화 - 에이전트는 맥락과 정밀성이 필요한 단순 반복 작업을 자동화한다. - 대표적인 활용 사례: - 파일 전체의 타이포그래피 업데이트 - 여러 화면의 동일 컴포넌트 일괄 교체 - 전체 플로우의 패딩 값 변경 - 변수 이름 일괄 변경 - 그리드 전체의 Lorem ipsum과 이미지를 실제에 가까운 콘텐츠로 교체 - 칩 컴포넌트를 모두 활성 상태로 변경 - 화면을 다크 모드로 변환 - 디자인 시스템 관리자는 라이브러리의 설명, 태그, 사용 사례, 컴포넌트 문서와 명명 규칙을 대량으로 정리할 수 있다. ## 코드와 디자인 사이의 연속적인 흐름 - 코드에서 시작한 결과물을 Figma의 코드-투-캔버스 기능으로 가져와 디자인 시스템을 적용하고 시각적으로 반복 수정할 수 있다. - 수정된 디자인은 MCP 서버를 통해 다시 코드로 전달할 수 있다. - 이 과정에서 Figma 에이전트가 캔버스 작업을 지원해 코드와 디자인 간 이동 중에도 작업 흐름과 맥락을 유지한다. - AI 지원과 직접 조작을 필요에 따라 오갈 수 있어, 모든 작업을 프롬프트로 해결하지 않아도 된다. 디자인 방향을 넓게 탐색할 때는 에이전트를 활용하고, 최종 선택과 세밀한 조정은 캔버스에서 직접 수행하는 방식이 가장 실용적이다. 특히 디자인 시스템을 사용하는 팀은 컴포넌트·토큰 기반의 대량 수정과 코드-디자인 동기화에 에이전트를 효과적으로 활용할 수 있다.

figma

디자인-코드 루프가 열어 주는 가능성 | Figma 블로그 (새 탭에서 열림)

AI는 디자인과 코드 사이의 장벽을 낮춰 두 영역을 하나의 연속적인 작업 흐름으로 만들고 있다. 이제 디자이너는 정적인 시안을 반복 제작하는 대신 기능하는 프로토타입을 코드로 만들고, 이를 다시 Figma 캔버스에서 편집하며 방향을 재탐색할 수 있다. 중요한 변화는 단순한 코드 생성 속도가 아니라, 디자인과 코드 간 변환이 기계적 번역에서 의미 중심의 협업으로 바뀐다는 점이다. ## 디자인과 코드의 경계가 사라지는 흐름 - 과거에는 코드가 복잡하고 수정 비용이 높아 디자인 단계에서 여러 정적 시안을 먼저 탐색하는 방식이 일반적이었다. - AI를 활용하면 기능하는 와이어프레임을 빠르게 만들고, 레이아웃뿐 아니라 상호작용과 동작까지 직접 실험할 수 있다. - 코드에서 Figma 캔버스로 이동하면 이미 구현한 방향에 고정되지 않고 새로운 구조와 시각적 대안을 다시 탐색할 수 있다. - Figma의 Alex Kern은 핵심 변화가 “코드를 더 빠르게 생성하는 것”이 아니라 디자인과 코드 사이의 변환을 더 의미론적이고 덜 기계적으로 만드는 것이라고 설명한다. ## 양방향 디자인-코드 루프 - 기존 개발 환경은 코드베이스에 이미 존재하는 구조와 패턴을 중심으로 한 방향으로 작업하기 쉽다. - AI 모델 역시 기존 코드의 관성에 영향을 받아 완전히 다른 제품 방향을 제안하는 데 한계가 있을 수 있다. - Figma 캔버스에서는 코드에서 구현한 결과를 다시 시각적으로 검토하고, 전혀 다른 방향으로 되돌아가 탐색할 수 있다. - 이처럼 `코드 → 캔버스 → 코드`를 반복하는 루프가 디자인과 엔지니어링의 협업 범위를 넓힌다. ## 협업 참여자의 확대 - 과거에는 “디자이너가 코딩을 배워야 하는가”가 주요 논점이었다면, 이제는 “디자이너가 AI에게 코드를 요청할 수 있는가”가 더 현실적인 질문이 되었다. - AI는 디자인 시스템이나 내부 개발 환경에 직접 접근하지 못하는 사람도 실제 제품을 Figma의 편집 가능한 프레임으로 가져와 작업할 수 있게 한다. - 결과적으로 특정 도구, 전문 지식, 조직 내 접근 권한이 협업의 진입장벽이 되는 문제가 줄어든다. - 디자인과 개발이 일부 전문가만의 영역이 아니라 더 많은 팀원이 참여할 수 있는 공동 작업 공간으로 변화한다. ## 학습 곡선에서 학습 램프로 - AI는 초보자의 출발점을 높여 복잡한 프레임워크와 개발 환경을 처음부터 모두 익히지 않아도 작업을 시작하게 한다. - 작업 중인 실제 맥락에서 “이 코드가 무엇을 하는지”, “React 라우팅이 어떻게 동작하는지”를 질문할 수 있어 추상적인 교육보다 이해가 쉽다. - 디자이너는 자신의 제품과 문제를 기반으로 학습하면서 점진적으로 전문성을 쌓을 수 있다. - Gui Seiz는 AI를 통해 셰이더, 3D, 자체 제작 도구처럼 과거에는 기술적 지식 부족으로 시도하지 않았던 영역까지 탐색하게 되었다고 말한다. ## 도구보다 중요한 호기심과 취향 - AI 도구 자체는 점점 많은 사람에게 동일하게 제공되므로 도구 접근성만으로는 차별화하기 어려워진다. - 앞으로는 무엇을 만들지 판단하는 취향과, 새로운 가능성을 계속 시험하는 호기심이 중요한 경쟁력이 된다. - AI는 문법, 프레임워크, 개발 환경을 설명해 주는 인내심 있는 튜터 역할을 할 수 있다. - 따라서 AI 시대에는 기존 전문성을 유지하는 것뿐 아니라 새로운 방식으로 배우고 실험하는 태도가 중요하다. ## 실용적인 결론 디자이너와 개발자는 디자인과 코드를 분리된 인수인계 단계로 보기보다, 서로 오가며 반복 개선하는 하나의 루프로 운영하는 것이 유리하다. AI를 최종 결과물을 자동 생성하는 도구로만 사용하기보다, 기능 프로토타이핑·코드 이해·대안 탐색·협업 진입장벽 완화에 활용할 때 가장 큰 효과를 얻을 수 있다.

figma

워크플로우 랩: Figma MCP로 캔버스 확장하기 | 피그마 블로그 (새 탭에서 열림)

빠르게 코드를 작성하는 팀에서는 구현 과정에서 새로운 상태와 예외가 생기며 디자인과 실제 제품 사이의 간극이 커질 수 있다. 이 글은 Figma MCP를 사용해 코드에만 존재하던 제품 상태를 Figma 캔버스로 가져오고, 디자이너가 이를 직접 검토·수정하는 워크플로를 소개한다. 결과적으로 캔버스가 초기 화면을 넘어 실제 제품 전체의 상태와 구현 결과를 다루는 공간으로 확장된다. ## 빠른 개발이 만드는 디자인 사각지대 - Astra라는 가상의 AI 영상 제작 플랫폼은 에이전트 코딩 도구를 활용해 매주 기능을 출시한다. - 초기 영상 내보내기 플로우는 다음 네 단계로 시작한다. - 시퀀스 선택 - 포맷 선택 - 설정 확인 - 영상 내보내기 - 실제 코드와 데이터에 연결되면서 다음과 같은 상태가 추가된다. - 인코딩 오류 - 렌더링 진행 중 상태 - 선택 항목이 없는 상태 - 지원하지 않는 포맷 - 이러한 상태는 디자이너가 초기 설계에서 누락한 것이 아니라, 기능이 실제 구현되는 과정에서 새롭게 드러난 디자인 결정 사항이다. - 캔버스가 초기 플로우만 담고 있으면 디자이너 역시 제품의 일부만 보고 작업하게 된다. ## Figma MCP로 캔버스 확장 - Figma MCP를 통해 에이전트가 코드를 읽고 Figma 캔버스에 결과를 작성할 수 있다. - 에이전트는 구현된 내보내기 플로우를 분석해 개발자가 처리한 모든 상태를 식별한다. - 각 상태를 Figma의 편집 가능한 프레임으로 생성하고, Astra의 디자인 시스템 컴포넌트를 적용한다. - 초기에는 4개였던 프레임이 구현된 전체 상태를 반영하며 14개로 늘어난다. - 사용된 주요 도구는 다음과 같다. - Figma Design - Dev Mode - Figma MCP server - `use_figma` - `generate_figma_design` - `/sync-figma-token` 스킬 ## 코드에 드러난 상태를 디자인으로 발전시키기 - 인코딩 오류 화면에는 단순한 빨간색 오류 메시지만 있었지만, 디자이너가 다음 내용을 추가한다. - 오류 원인 - 사용자가 시도할 수 있는 해결 방법 - 이전 단계로 돌아가는 방법 - 렌더링 중 화면에는 스피너만 있었지만, 디자이너가 진행률과 예상 소요 시간을 추가한다. - 선택 항목이 없는 화면은 비어 있었지만, 기능 사용을 유도할 수 있는 안내 문구와 개성을 부여한다. - 이 방식은 작업 티켓이나 요구사항 문서 중심의 피드백보다, 코드와 디자인이 캔버스에서 직접 대화하는 형태에 가깝다. - 구현 후 발견된 예외 상태를 별도의 긴 탐색 세션을 거치지 않고 바로 디자인 대상으로 전환할 수 있다. ## 디자인과 구현 결과 비교 - Figma 캔버스에서 원본 디자인과 코드로 구현된 화면을 나란히 비교할 수 있다. - 시각적 차이를 찾아내는 비교 결과에는 심각도별 불일치가 표시된다. - 예시로 다음과 같은 차이가 발견된다. - 모달 제목 크기 차이 - 구현본에만 추가된 “Post share link” 버튼 - 설정 패널의 배경 또는 표면 스타일 제거 - 설정 헤더의 시각적 우선순위 하락 - 이를 통해 디자인 검토가 “의도한 화면이 구현되었는가”뿐 아니라, 실제 구현 과정에서 추가·변경된 요소까지 포함하도록 확장된다. ## 실용적인 결론 Figma MCP는 코드를 디자인으로 자동 변환하는 도구라기보다, 구현 중 발생한 모든 제품 상태를 디자인 의사결정의 영역으로 되돌리는 연결 장치다. 빠르게 개발하는 팀이라면 에이전트로 코드의 상태를 캔버스에 동기화한 뒤, 디자이너가 오류·로딩·빈 상태·시각적 불일치를 직접 검토하는 절차를 구축하는 것이 유용하다.