techlist.io
KREN

디자인 시스템

252 개의 포스트

figma3분 읽기큐레이션 요약

올바른 방향으로 빠르게 나아가는 방법 | 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 결과물을 반드시 사람의 관점과 제품 기준으로 검토해야 평균적인 결과와 기술 부채를 피할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템AI대규모 언어 모델React+3
figma3분 읽기큐레이션 요약

이 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 에이전트로 초안을 만들고 실제 결과를 확인하며 반복 개선하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
디자인 시스템FigmaAI 에이전트markdown+2
figma3분 읽기큐레이션 요약

더 나은 코드, 더 적은 토큰: 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를 단순한 인간 개발자용 문서화 도구가 아니라 에이전트의 코드 생성 품질과 비용을 개선하는 컨텍스트 계층으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템ReactTypeScriptcode-connect+2
discord3분 읽기큐레이션 요약

스퀴클, 스타일, 간격: 여러분의 피드백이 모바일 환경 개선에 어떻게 도움이 되고 있는가

Discord는 데스크톱과 모바일의 디자인 경험을 통일하기 위해 모바일 앱의 테마, 형태, 간격과 채팅 입력창을 개선했습니다. 데스크톱의 네 가지 기본 테마를 모바일에 도입하고, 사람은 원형·사물은 스퀘어클이라는 형태 규칙을 적용했습니다. 또한 채팅 바를 정리해 메시지 작성 공간을 넓히고, 자주 쓰는 기능에 더 쉽게 접근할 수 있도록 조정했습니다. ## 데스크톱과 모바일의 테마 통일 - 모바일에서도 데스크톱의 네 가지 기본 테마를 사용할 수 있습니다. - Light - Ash - Dark - Onyx - **Ash**는 기존 Discord의 클래식 다크 테마를 계승하면서 현대적인 접근성 기준에 맞게 대비를 개선했습니다. - **Onyx**는 단순히 어두운 회색이 아니라 완전한 검정색 배경을 사용하는 AMOLED 테마입니다. - OLED 화면에서 검정색 픽셀을 끌 수 있어 배터리 절약에 도움이 될 수 있습니다. - 모바일과 데스크톱에서 동일한 테마로 제공됩니다. - 접근성 설정에서 화면의 대비와 채도를 세부적으로 조절할 수 있습니다. ## 기기 설정에 맞춘 테마 자동 전환 - 사용자가 지정한 Light 테마와 Dark 테마를 기기의 시스템 모드에 맞춰 자동으로 전환할 수 있습니다. - Appearance 설정에서 **“Same as Device Theme”**를 활성화하면 됩니다. - 이 설정은 **Sync Across Devices**보다 우선 적용됩니다. - 모바일뿐 아니라 데스크톱에서도 지원됩니다. - Nitro 사용자는 프로필 테마의 색상에 맞춰 음성·영상 통화 타일의 배경도 변경할 수 있습니다. ## 사람은 원형, 사물은 스퀘어클 - 모바일과 데스크톱 전반에 일관된 형태 규칙이 적용됩니다. - 사용자, 친구, DM의 봇: 원형 - 서버, 앱 등 사물: 모서리가 둥근 사각형인 스퀘어클 - 서버 목록의 아이콘이 스퀘어클 형태로 바뀌어 사람과 서버를 빠르게 구분할 수 있습니다. - 버튼, 입력창, 컨테이너 등 다른 UI 요소의 둥근 모서리도 같은 기준에 맞춰 정리했습니다. - 개인 DM과 그룹 DM은 ‘친구 관계’를 나타내기 때문에 기존처럼 원형을 유지합니다. ## 메시지 입력창과 빠른 작업 메뉴 개편 - 채팅 바가 지나치게 복잡해진 문제를 해결하기 위해 메시지 작성 공간을 넓혔습니다. - 채팅 바 오른쪽에는 다음 기능이 계속 유지됩니다. - 이모지 - 선물 - 음성 메시지 - 자주 사용하는 빠른 작업 - 다음 기능은 **+ 메뉴** 안으로 이동했습니다. - 스레드 - 앱 사용 - **+ 버튼을 길게 누르면** 전체 메뉴를 열지 않고 원하는 작업으로 바로 이동할 수 있습니다. - 스레드나 앱을 자주 사용하는 사용자는 이전보다 한 단계 더 거쳐야 하지만, 길게 누르기 단축 동작으로 기존 접근 속도에 가깝게 사용할 수 있도록 했습니다. ## 플랫폼 간 일관성을 높인 모바일 업데이트 - 이번 업데이트의 목표는 모바일과 데스크톱을 서로 다른 앱처럼 느끼지 않도록 만드는 것입니다. - 동일한 테마 체계, 형태 규칙, UI 간격을 적용해 플랫폼을 바꿔도 익숙한 사용 경험을 제공하려 했습니다. - 변경 사항은 사용자 피드백을 바탕으로 모바일의 시각적 일관성과 사용성을 함께 개선하는 데 초점을 맞췄습니다. 모바일에서 클래식한 분위기를 원한다면 **Ash**, 배터리 효율과 완전한 검정 배경을 원한다면 **Onyx**를 선택하는 것이 적합합니다. 스레드나 앱을 자주 사용한다면 + 버튼 길게 누르기 동작을 익혀 새 채팅 바에 적응하는 것이 좋습니다.

원문 읽기(새 탭에서 열림)
디자인 시스템discord접근성dark-mode+3
figma3분 읽기큐레이션 요약

Sightlines 1호: Config에서 얻은 인사이트 | Figma 블로그

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

원문 읽기(새 탭에서 열림)
디자인 시스템AI프로토타이핑product-development+2
figma3분 읽기큐레이션 요약

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을 통해 동일한 컴포넌트를 사용하게 하면 디자인-개발 간 불일치를 줄이면서 빠른 개발 속도와 품질을 함께 확보할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템FigmaAI 에이전트design-to-code+2
figma3분 읽기큐레이션 요약

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에 제품이 나오기까지의 과정을 공유한다. - 제품, 커뮤니티, 일러스트레이션을 연결하며 창작이 개인 작업을 넘어 다양한 사람과 매체를 통해 확장된다는 점을 보여준다. ## 글 전체를 관통하는 창작 철학 - 기술과 제작 방식은 변화하지만, 비전을 실제 결과물로 구현할 때 느끼는 기쁨은 변하지 않는다. - 창작자는 새로운 도구를 익히는 데 그치지 않고, 무엇이 좋은지 판단하는 기준과 자신만의 관점을 길러야 한다. - 세부적인 움직임과 색상 선택도 브랜드와 사용자 경험의 의미를 형성하므로, 결과물의 작은 요소까지 의도적으로 설계해야 한다. 실무에서는 새로운 기능을 무작정 도입하기보다, 먼저 전달하려는 의도와 관점을 정한 뒤 도구·모션·색상을 선택하는 것이 좋다. 꾸준히 다양한 작업을 관찰하고 직접 실험하면서 자신만의 취향과 디자인 기준을 발전시키는 것도 중요하다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figmamotion-designcolor-theory+1
figma3분 읽기큐레이션 요약

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

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

원문 읽기(새 탭에서 열림)
디자인 시스템FigmaAI 에이전트접근성+2
figma3분 읽기큐레이션 요약

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를 활용해 디자인 초기부터 개발자와 움직임을 조율하는 방식으로 활용하는 것이 좋다.

원문 읽기(새 탭에서 열림)
디자인 시스템dev-modefigma-motionanimation-timeline+3
figma3분 읽기큐레이션 요약

색의 언어로 말하기 | 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는 색을 단순히 예쁜 조합으로 고르는 것이 아니라, 사회 변화와 문화적 분위기, 소비자의 감정 변화를 반영하는 방식으로 해석한다. 제품이나 브랜드에 색을 적용할 때는 먼저 “어떤 메시지를 전달할 것인가”를 정한 뒤, 목표 시장의 문화적 맥락과 실제 소재·매체에서의 구현 가능성을 함께 검토하는 것이 좋다. 유행하는 색을 그대로 따라가기보다 브랜드의 가치와 사용자의 감정을 연결하는 색상 체계를 설계해야 한다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figmabrandingcolor-theory+2
figma3분 읽기큐레이션 요약

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를 도입할 때는 모든 결과를 자동 게시하기보다, 에이전트가 자료 조사와 초안 작성을 맡고 사람이 사실관계·문구·시각 요소를 검토하는 방식이 현실적이다. 특히 팀 템플릿, 디자인 시스템, 사용자 정의 폰트, 업무별 스킬을 함께 제공할수록 자동화 결과의 품질과 브랜드 일관성이 높아진다.

원문 읽기(새 탭에서 열림)
디자인 시스템AI 에이전트figjamfigma-make+2
figma3분 읽기큐레이션 요약

취향을 가꾸는 일은 결코 멈추지 않는다 | Figma 블로그

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

원문 읽기(새 탭에서 열림)
디자인 시스템AI프로덕트 디자인user-experience-design+1
figma3분 읽기큐레이션 요약

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프로토타이핑모델 컨텍스트 프로토콜+4
figma3분 읽기큐레이션 요약

피그마 디자인 에이전트가 출시되었습니다 | 피그마 블로그

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 지원과 직접 조작을 필요에 따라 오갈 수 있어, 모든 작업을 프롬프트로 해결하지 않아도 된다. 디자인 방향을 넓게 탐색할 때는 에이전트를 활용하고, 최종 선택과 세밀한 조정은 캔버스에서 직접 수행하는 방식이 가장 실용적이다. 특히 디자인 시스템을 사용하는 팀은 컴포넌트·토큰 기반의 대량 수정과 코드-디자인 동기화에 에이전트를 효과적으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템AI생성형 AI모델 컨텍스트 프로토콜+2
figma3분 읽기큐레이션 요약

Friends of Figma의 브랜드 리뉴얼이 글로벌 커뮤니티의 이야기를 전하다 | Figma 블로그

Friends of Figma는 전 세계 지역 커뮤니티의 다양성과 연결성을 표현하기 위해 브랜드를 새롭게 개편했다. 새 디자인은 Figma와의 연관성은 유지하면서도 각 지역 챕터가 도시와 문화를 반영해 자유롭게 활용할 수 있도록 설계됐다. 핵심은 통일된 결과물을 강요하기보다, 공통된 정신과 최소한의 규칙 안에서 챕터들이 직접 브랜드를 소유하고 발전시키도록 하는 것이다. ## 전 세계로 확장된 Friends of Figma - Friends of Figma는 Figma 사용자를 연결하고 서로 배우며 영감을 나누는 공식 사용자 그룹 프로그램이다. - 2026년 기준 전 세계 **82개국, 250개 이상의 챕터**가 운영되고 있다. - 지난해에는 워크숍, 웨비나, 디자인 토크, 시청 파티, 친목 모임 등 **900개 이상의 행사**가 열렸다. - 2018년부터 커뮤니티 주도의 모임이 형성됐고, Figma는 2020년 Friends of Figma 프로그램을 출범해 챕터 리더 선정, 행사 지원, 신기능 사전 공개 등을 제공했다. - AI로 산업이 빠르게 변화하는 상황에서, 지역 기반의 실제 만남과 사람 간 연결이 더욱 중요해졌다는 점이 브랜드 개편의 배경이다. ## Figma와 연결되면서도 지역적인 브랜드 - 새 디자인 시스템은 두 가지 목표를 동시에 추구한다. - Figma와 구별되지만 Figma의 정체성은 유지할 것 - 각 챕터가 도시와 지역의 특성을 반영해 자신만의 방식으로 표현할 수 있을 것 - Figma 브랜드와 연결된 시각적 정체성은 지역 커뮤니티가 신규 참가자와 후원자를 유치하는 데 도움을 준다. - 특히 디자인 커뮤니티가 충분히 형성되지 않은 지역에서는 Figma와의 공식적인 연계가 신뢰와 참여를 높이는 역할을 한다. - 이 시스템은 모든 챕터가 똑같은 결과물을 만드는 방식이 아니라, 공통된 정신을 공유하는 **민주적 디자인 시스템**을 지향한다. ## Figma 로고의 기본 형태를 활용한 심벌 - 새 Friends of Figma 로고는 기존 Figma 로고를 구성하는 기본 도형을 분리해 새로운 조합의 building block으로 활용한다. - 각각의 도형은 서로 다른 지역 챕터를 상징하고, 이들이 모여 하나의 글로벌 커뮤니티를 구성한다는 의미를 담는다. - 따라서 로고는 단순한 브랜드 변형이 아니라, 독립적인 챕터들이 공동체로 연결되는 과정을 시각화한다. ## 제약을 줄이고 창의성을 여는 디자인 규칙 - 브랜드 가이드라인은 색상, 챕터 배지, 스티커 등 기본적인 공통 요소를 제공한다. - 모든 챕터는 핵심 색상 체계를 공유하지만, 제공된 팔레트에서 **추가 색상 6개를 직접 선택**할 수 있다. - 스티커 템플릿은 최소한의 형태만 제공하며, 그 안에 어떤 그래픽과 메시지를 담을지는 각 챕터가 결정한다. - 즉, 브랜드가 모든 표현을 통제하기보다 “창의성을 발휘할 수 있을 만큼만 제한”하는 접근이다. - 최종 결과물보다 각 지역의 사람, 장소, 행사처럼 실제 커뮤니티를 구성하는 요소가 중심이 된다. ## 지역의 현실을 담는 사진과 콘텐츠 - 새 사진 가이드는 전문적인 연출보다 지역의 일상과 거리에서 포착되는 모습을 중시한다. - 해당 지역 주민이 알아볼 수 있는 장소와 분위기, 실제 행사 참여자의 모습을 통해 챕터의 정체성을 표현한다. - 이를 통해 Friends of Figma가 전 세계적으로 통일된 브랜드이면서도, 서울·상파울루·바쿠·나이로비 등 각 지역에서 서로 다른 모습으로 존재하도록 한다. ## 실용적인 시사점 - 글로벌 커뮤니티 브랜드는 모든 지역에 동일한 디자인을 적용하기보다, **공통 요소와 지역 자율성의 균형**을 설계하는 것이 효과적이다. - 브랜드 가이드라인을 세밀하게 통제하기보다 핵심 원칙, 기본 자산, 선택 가능한 범위를 제공하면 참여자들의 소유감과 창의성을 높일 수 있다. - 특히 사용자 그룹이나 지역 지부를 운영하는 조직이라면 로고보다 실제 사람과 장소, 활동이 드러나는 콘텐츠를 브랜드의 중심에 두는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figmabrandingvisual-identity+1