figma2026년 8월 13일

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

motion-designfigmadesign-systemsai-agent+2

figma2026년 7월 27일

디지털 도구, 인간의 표현: 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를 활용한 브랜드 디자인에서도 결과물을 지나치게 매끈하게 만드는 것보다, 의도적인 불완전성과 인간의 판단을 남기는 것이 차별화에 도움이 된다. 또한 글리프·텍스처·모션처럼 재사용 가능한 시각 요소를 시스템화하면 디지털 콘텐츠와 오프라인 공간 전반에 일관된 경험을 효율적으로 확장할 수 있다.

motion-designfigmaaifigma-make+2

figma2026년 7월 2일

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

motion-designfigmadesign-systemscolor-theory+1

figma2026년 6월 29일

어디서든 시작하세요, 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를 기존 디자인 과정에 단계적으로 결합하되, 도구보다 디자인 원리와 사용자 경험에 대한 판단을 중심에 두는 것이 바람직하다.

motion-designfigmaaireact+1

figma2026년 6월 24일

움직이는 원칙 | Figma 블로그 (새 탭에서 열림)

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

motion-designfigmaaianimation+2

figma2026년 6월 10일

이 템플릿을 가져가세요: Figma Weave로 사용자 페르소나에 생동감을 불어넣기 | Figma 블로그 (새 탭에서 열림)

정적 이미지와 반복되는 프로필 사진만으로는 이상적 고객 프로필(ICP)을 실제 고객처럼 생생하게 전달하기 어렵다. Dropbox의 Sara Clayton은 Figma Weave를 활용해 사용자의 얼굴 사진과 간단한 프롬프트를 현실적인 작업 환경 이미지로 바꾸고, 참고 이미지를 추가해 의상과 스타일을 조정했다. 이를 통해 ICP의 스토리텔링을 강화하고, 고객에 대한 공감과 전략적 활용도를 높일 수 있었다. ### 정적인 ICP의 한계 - ICP는 제품을 만들 대상 고객을 구체적으로 묘사하는 문서다. - Dropbox Replay 팀은 영상 편집자, 오디오 엔지니어, 제작 관리자 등을 주요 사용자로 정의했다. - 기존에는 다이어그램, 사용자 스토리, 슬라이드 덱, 동일한 인물 사진을 반복 사용했다. - 이런 방식은 사용자가 실제로 어떤 환경에서 일하고 어떤 도구를 사용하는지 충분히 보여주지 못했다. - Sara Clayton은 사용자의 직업적 맥락과 현실감을 시각적으로 표현할 필요성을 느꼈다. ### 스토리 중심의 사용자 페르소나 - ICP 관점에서 상황을 시간 순서대로 보여주는 슬라이드 덱이 기존 방식보다 효과적이었다. - 예를 들어 미디어 제작자가 타임라인이나 믹싱 보드 앞에서 일하는 모습을 보여주면 사용자의 업무 맥락을 더 쉽게 이해할 수 있다. - 반복되는 증명사진 대신 실제 작업 공간, 복장, 주변 도구를 포함한 장면이 필요했다. - 이러한 시각적 디테일은 페르소나를 단순한 데이터 묶음이 아니라 현실적인 인물로 느끼게 한다. ### Figma Weave를 활용한 이미지 생성과 수정 - 사용자의 얼굴 사진과 한 줄 프롬프트만으로 재택근무 공간에서 작업하는 미디어 제작자 이미지를 생성했다. - 생성된 인물은 Premiere Pro 화면 앞에 앉아 있는 등 직업적 환경이 반영됐다. - 동료의 피드백을 받은 뒤 참고 이미지를 업로드해 의상과 전체적인 스타일을 수정했다. - 일반적인 챗봇형 이미지 생성 도구보다 변수별 결과를 확인하고 반복 수정하기 쉬웠다. - 여러 생성 결과를 시각적으로 비교하면서 원하는 인물, 복장, 환경을 구체화할 수 있었다. ### 페르소나 템플릿과 활용 방식 - 글에서 소개한 템플릿은 현실적인 장면을 포함한 ICP 이미지를 약 2분 안에 만드는 데 초점을 둔다. - 바로 사용할 수 있는 Figma Weave 템플릿에는 다음과 같은 유형이 포함된다. - 자동차 내부의 캐릭터 이미지 생성 - 전문적인 캐릭터 레퍼런스 시트 제작 - 변수 기능을 활용한 다양한 의상과 캐릭터 생성 - 템플릿을 활용하면 반복적인 페르소나 프로필을 여러 상황과 스타일로 확장할 수 있다. ### Figma Weave의 의미 - Figma가 인수한 Weavy를 기반으로 한 Figma Weave는 생성형 AI와 전문 편집 기능을 오픈 캔버스에 결합한다. - 이미지뿐 아니라 동영상, 애니메이션, 모션 디자인, VFX 생성 및 편집까지 지원하는 방향을 지향한다. - 단순히 이미지를 생성하는 것보다 결과를 보고 다양한 요소를 조정하는 반복 작업에 강점이 있다. - Dropbox 사례에서는 더 인간적이고 높은 해상도의 스토리텔링을 가능하게 해 ICP가 제품 전략에 실제로 영향을 주도록 했다. 팀의 ICP나 사용자 페르소나가 텍스트와 반복적인 스톡 이미지에 머물러 있다면, 실제 업무 환경과 행동을 보여주는 장면으로 확장하는 것이 효과적이다. Figma Weave 같은 도구를 사용할 때는 얼굴, 직업 환경, 복장, 참고 이미지 등의 변수를 단계적으로 조정하면 더 일관되고 설득력 있는 페르소나를 만들 수 있다.

motion-designfigmagen-aifigma-weave+2

figma2025년 9월 18일

Intercom AI 서밋의 (새 탭에서 열림)

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다. ## 인터콤의 브랜드를 확장하는 디자인 시스템 - Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다. - 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다. - Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다. - 무대 디자인 - 대형 디지털 스크린 - 안내 표지와 동선 표시 - 기념품 - 정적 이미지와 모션 콘텐츠 - 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다. ## 폭넓은 크리에이티브 영역 탐색 - 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다. - 무드보드에는 다음 자료를 함께 배치했다. - 모션 에셋 - 정지 이미지 - 벡터 파일 - 로고 - 영상 레퍼런스 - 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다. - 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다. - 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인 - 메시지와 움직임이 함께 작동하는지 조기에 테스트 - 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다. - 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사 - 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용 - 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현 - 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다. - 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능 - 각 보드에 직접 댓글 작성 가능 - 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리 ## 꽃과 꽃가루를 활용한 모션 언어 - 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다. - 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다. - 비현실적인 크기 - 과장된 개화 속도 - 낯설고 변형되는 형태 - 이는 빠르게 변화하는 AI 기술의 성격과 연결된다. - 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다. - 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현 - Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용 - 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능 - 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다. - Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다. - 움직임의 방향과 속도 표시 - 꽃잎 형태가 어떻게 바뀌어야 하는지 설명 - 별도 프로그램으로 파일을 옮기지 않고 반복 수정 ## Figma에서 진행한 웹 경험 프로토타이핑 - Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다. - 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다. - 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다. - Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소 - 변경 사항과 피드백을 같은 화면에서 확인 - 개발자와 디자이너가 인터랙션을 조기에 검증 - 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다. ## 실용적인 시사점 - 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다. - 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다. - 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.

motion-designfigmaaidesign-systems+3

figma2025년 7월 2일

Config 2025의 비 (새 탭에서 열림)

Figma는 Config 2025의 브랜드를 고정된 스타일이 아니라 다양한 매체와 상황에 유연하게 적용되는 시각 시스템으로 설계했다. 기본 도형에서 출발한 애니메이션 글리프와 컴포넌트 라이브러리를 활용해 컨퍼런스의 주제인 창작, 표현, 변화, 적응성을 표현했다. 그 결과 무대 화면부터 공간 장식, 소셜 콘텐츠, 배지와 굿즈까지 일관되면서도 확장 가능한 몰입형 경험을 구축했다. ## 대규모 행사를 위한 유연한 브랜드 시스템 - Config는 샌프란시스코와 런던에서 1만 명 이상이 참석하고, 온라인으로 수만 명이 시청하는 대형 사용자 컨퍼런스다. - Brand Studio 팀은 행사 시작 약 10개월 전부터 시각 아이덴티티 개발에 착수했다. - 브랜드 작업 범위는 다음과 같이 넓었다. - 메인 스테이지 화면 - 디지털 콘텐츠와 소셜 미디어 - 행사장 공간 경험 - 참석자 배지 - 굿즈와 각종 인쇄물 - 행사가 진행되며 요구사항과 제약이 달라질 수 있으므로, 처음부터 여러 환경에 대응할 수 있는 시스템을 만드는 것이 중요했다. ## 기본 도형에서 출발한 글리프 콘셉트 - Figma 브랜드의 핵심인 형태, 글리프, 프리미티브를 Config의 시각 언어로 확장했다. - 초기 단계에서는 무드보드나 구체적인 스타일보다 콘셉트 자체를 먼저 탐색했다. - 실행 방식을 지나치게 일찍 제한하면 결과물이 뻔하고 평면적으로 보일 수 있기 때문에, 콘셉트는 명확히 하되 표현 방식은 열어두었다. - 시각 콘셉트는 소셜 게시물, 대형 디지털 스크린, 실제 공간 설치물 등 서로 다른 크기와 매체에 적용될 수 있어야 했다. ## ‘늘어나고 흔들리는’ 글리프의 구조 - 각 글리프는 내부 요소와 외부 요소로 구성되며, 두 요소가 서로 반응하도록 설계됐다. - 글리프와 구성 요소의 변화는 창작 과정에서 나타나는 역동성, 변화, 적응성을 상징한다. - 정적인 그래픽에 그치지 않고 움직임을 통해 시각적 에너지를 강화했다. - 하나의 글리프가 움직이면 주변에 파동을 일으킨다. - 파동은 전체 구성을 변화시키며 연쇄적인 움직임을 만든다. - 이 구조 덕분에 같은 시각 언어를 사용하면서도 각 화면과 공간에서 서로 다른 조합과 움직임을 구현할 수 있었다. ## 컴포넌트 기반의 협업과 확장 - 팀은 Figma 안에서 글리프 라이브러리를 만들었다. - 글리프를 컴포넌트로 제작해 파트너와 외부 제작업체가 쉽게 재사용하고 수정할 수 있도록 했다. - 컴포넌트 기반 시스템의 장점은 다음과 같다. - 여러 표면과 매체에 빠르게 적용 가능 - 구성 요소를 교체하거나 커스터마이즈하기 쉬움 - 행사 전체의 시각적 일관성 유지 - 새로운 요구사항이 생겨도 기존 시스템 안에서 대응 가능 ## 제품 출시와 연결된 창작의 메시지 - Config 2025에서는 Figma Draw와 Figma Sites 등 사용자의 창의적 표현을 확장하는 제품 출시가 예정되어 있었다. - 이에 따라 시각 콘셉트도 단순한 장식보다 “더 자유롭고 예상 밖의 방식으로 자신을 표현한다”는 메시지에 초점을 맞췄다. - 글리프의 유기적인 움직임과 다양한 조합은 제품이 사용자의 창작 가능성을 넓힌다는 의미와 연결됐다. ## 새 Figma 브랜드 요소의 적용 - Config 2025는 Figma가 최근 진행한 브랜드 리프레시의 색상 체계와 새 서체인 Figma Sans를 활용할 수 있는 시점에 진행됐다. - 기존 브랜드 요소를 그대로 복사한 것이 아니라 Config의 행사 목적과 분위기에 맞게 변형해 사용했다. - 이를 통해 Config만의 표현력을 확보하면서도 Figma 전체 브랜드와의 연결성을 유지했다. Config처럼 규모가 크고 여러 채널에서 동시에 운영되는 행사는 처음부터 완성된 이미지 하나를 만드는 것보다, 재조합과 변형이 가능한 디자인 시스템을 구축하는 편이 효과적이다. 명확한 콘셉트, 컴포넌트화된 자산, 애니메이션 규칙을 함께 설계하면 행사 규모가 커져도 일관성과 창의성을 동시에 유지할 수 있다.

motion-designfigmatypographyfigma-draw+3

figma2025년 6월 16일

코드 레이어로 사이트를 인터랙티브 (새 탭에서 열림)

피그마(Figma)는 디자인 환경 내에서 커스텀 리액트(React) 코드를 활용해 역동적인 상호작용을 구현할 수 있는 ‘코드 레이어(Code Layers)’ 기능을 출시했습니다. 이 기능을 통해 디자이너는 복잡한 개발 지식 없이도 AI 채팅이나 직접적인 코드 수정을 통해 정적인 디자인을 실제 작동하는 웹 요소로 변환하고 실험할 수 있습니다. 결과적으로 디자인과 실제 제품 구현 사이의 장벽을 허물어, 별도의 개발 전달 과정 없이도 고도화된 애니메이션이나 기능적 컴포넌트를 피그마 사이츠(Figma Sites)에서 즉시 빌드할 수 있게 되었습니다. **코드 레이어를 활용한 인터랙션 구현** * 코드 레이어는 리액트 코드를 기반으로 구동되는 상호작용 요소로, 피그마 사이츠 내에서 기존 컴포넌트를 코드로 변환하거나 새롭게 생성할 수 있습니다. * 피그마 메이크(Figma Make)의 AI 기술을 활용하여 "꽃 이미지를 무한히 복제해서 드래그할 수 있게 해줘"와 같은 자연어 프롬프트만으로 복잡한 로직을 생성합니다. * 캔버스 위에서 바로 코드 레이어를 복제(Cmd + D)하여 여러 버전의 상호작용을 나란히 비교하고 실험하는 유연한 워크플로우를 제공합니다. **기존 디자인의 동적 변환 및 제작 방식** * 작업 중인 요소에 애니메이션(회전, 바운스 등)을 추가하거나, 마우스 호버 시 색상이 변하는 리플 효과 등 정적 이미지에 생명력을 불어넣을 수 있습니다. * 대출 계산기, 가격 추정기, 실시간 통계 카운터와 같이 단순한 프로토타입을 넘어 실제 로직이 작동하는 유틸리티 컴포넌트를 제작할 수 있습니다. * 단축키(E)를 사용하여 캔버스에 즉석에서 코드 레이어를 그려 넣고, AI에게 이모지 파티클 생성이나 이미지 갤러리 구축 등을 요청하여 빠르게 아이디어를 시각화합니다. **개발자 수준의 확장성과 재사용성** * **커스텀 속성 편집:** AI가 코드 기반의 속성(문자열, 숫자 등)을 자동으로 생성하며, 사용자는 코드 수정 없이도 패널에서 직접 값을 조정해 레이어의 동작을 변경할 수 있습니다. * **컴포넌트화:** 일반적인 피그마 프레임처럼 코드 레이어도 재사용 가능한 컴포넌트로 전환하여 여러 페이지나 팀 프로젝트에 공유할 수 있습니다. * **npm 패키지 지원:** `motion`이나 `@react-three/fiber`와 같은 외부 노드 패키지 매니저(npm) 라이브러리를 임포트하여 고난도의 3D 렌더링이나 정교한 모션 그래픽을 구현할 수 있습니다. 웹 디자인의 한계를 넓히고자 하는 디자이너라면 피그마 사이츠에서 제공되는 코드 레이어를 적극적으로 활용해 보시기 바랍니다. 특히 AI 프롬프트를 통해 기초 코드를 생성한 뒤, npm 패키지를 결합해 시중의 템플릿으로는 불가능했던 독창적인 사용자 경험을 직접 구축해 보는 것을 추천합니다.

motion-designaiprototypingreact+4

figma2024년 9월 15일

Figma on Figma: 최신 (새 탭에서 열림)

Figma는 디자이너 중심 도구에서 개발자·PM·제품팀 전체가 사용하는 생태계로 확장한 현실을 반영해 브랜드의 시각 언어를 재정비했다. 정적인 커서와 굵은 검은 윤곽선 중심의 기존 표현 대신, 공동 창작과 다양한 역할을 상징하는 프리미티브·색상·타이포그래피·모션을 도입했다. 새 브랜드는 누구나 아이디어를 현실로 만들 수 있는 협업 공간으로서의 Figma를 표현한다. ### 디자이너 도구에서 제품 개발 생태계로 - 지난 10년 동안 Figma는 순수한 디자인 도구에서 개발자, 제품 관리자, 전체 제품팀을 지원하는 플랫폼으로 성장했다. - 기존 브랜드는 벡터 그래픽의 문법에 가까웠다. - 정적인 마우스 커서 - 굵은 검은 외곽선 - 디자인 작업 자체에 초점을 둔 시각 표현 - 새로운 정체성은 아이디어 구상부터 개발, 협업, 완성까지 여러 사람이 참여하는 제품 제작 과정을 담는 데 초점을 맞췄다. ### 새 시각 언어를 구성하는 네 가지 기반 - **다목적 프리미티브** - 공동 창작에 참여하는 다양한 사람과 역할을 상징한다. - 특정 직군이나 작업 단계에 종속되지 않는 기본 형태로 활용된다. - **동적인 구성** - 만들고, 조정하고, 협업하는 다양한 작업 방식을 표현한다. - 정적인 결과물보다 제작 과정의 움직임과 상호작용을 강조한다. - **확장된 색상 팔레트** - 더 생생하고 폭넓은 색을 사용한다. - 색상 변수를 활용해 다양한 매체와 상황에 쉽게 적용할 수 있도록 설계했다. - **통합된 모션 원칙** - 창작 과정에서 발생하는 행동과 흐름을 애니메이션으로 표현한다. - 브랜드의 움직임이 단순 장식이 아니라 작업 과정과 연결되도록 했다. ### Figma 전용 서체 체계 - Figma는 Grilli Type과 협업해 독자적인 그로테스크 서체인 **Figma Sans**를 제작했다. - 브랜드에는 다음 네 가지 서체가 포함된다. - **Figma Sans**: 일반적인 브랜드 커뮤니케이션과 본문 - **Figma Sans Condensed**: 더 압축된 인상과 공간 효율이 필요한 표현 - **Figma Mono**: 개발, 코드, 정밀한 제작 작업을 연상시키는 표현 - **Figma Hand**: 브레인스토밍과 팀 협업처럼 인간적인 분위기를 전달 - 서로 다른 서체를 조합해 디자인, 엔지니어링, 협업 등 다양한 역할과 작업 방식을 표현한다. ### 샌드박스에서 시작한 탐색 - Figma Brand Studio는 사람들이 Figma를 사용하는 전 과정을 살펴보며 탐색을 시작했다. - 브레인스토밍 - 초기 아이디어 구상 - 요소 검사 - 최종 결과물의 세부 조정 - 팀은 여러 활동이 하나의 공유 공간에서 동시에 이루어지는 모습에 주목했다. - 이 개념은 사람들이 같은 공간에서 각자 놀고 만들며 상호작용하는 **parallel play**와 연결됐다. - Figma 캔버스를 사람들이 함께 만들고 실험하는 장소로 보고, 놀이터에서 시각적 영감을 얻었다. - Isamu Noguchi의 놀이터와 조경 작품 - Mitsuru Senda의 다채로운 패널형 놀이터 - 정교한 타일 작업과 인프라 구조 - 초기에는 놀이터의 형태를 직접적으로 차용했지만, 최종적으로는 이를 단순한 모방이 아니라 공동 창작과 실험을 상징하는 추상적 시각 언어로 발전시켰다. ### 실용적인 시사점 브랜드 리뉴얼은 로고나 색상만 바꾸는 작업이 아니라, 사용자의 역할과 제품이 지원하는 행동 범위를 다시 정의하는 과정이다. 특히 제품이 여러 직군의 협업 도구로 성장했다면, 시각 체계도 결과물뿐 아니라 아이디어 구상·소통·개발·수정 같은 전체 제작 흐름을 표현하도록 확장하는 것이 효과적이다.

motion-designfigmadesign-systemsdesign-tokens+2

figma2024년 3월 18일

지금 바로 북마크해야 할 (새 탭에서 열림)

프로토타이핑은 제품 개발 막바지의 보조 수단이 아니라, 아이디어 검증·사용자 조사·이해관계자 피드백·프레젠테이션 등 전 과정에서 팀의 공통 비전을 만드는 핵심 도구다. 이 글은 Figma 프로토타이핑 학습을 위해 기초 강의부터 발표, 모션과 플로우, 변수, 오피스 아워까지 23개의 영상·커뮤니티 파일·콘텐츠를 단계별로 큐레이션한다. 학습자는 자신의 수준과 목적에 맞는 자료를 골라 인터랙션 구현 능력을 높이고 더 나은 제품을 설계할 수 있다. ## 프로토타이핑의 역할 - 프로토타입은 제품의 동작과 사용자 경험을 시각화해 팀이 아이디어를 공유하도록 돕는다. - 사용자 테스트와 이해관계자 피드백을 통해 문제를 조기에 발견하고 반복적으로 개선할 수 있다. - 발표 자료에도 인터랙션을 추가해 정적인 화면보다 설득력 있게 제품의 흐름과 기능을 전달할 수 있다. - Figma는 모바일·태블릿·워치 등 다양한 디바이스 화면을 고려한 프로토타이핑 기능을 강화하고 있다. ## 기초 기능 익히기 - **「Build prototypes」(8분)** - 인터랙티브 프로토타입 제작의 기본 흐름을 소개한다. - 애니메이션을 적용하고 테스트 사용자에게서 피드백을 반영하는 방법을 다룬다. - **「Prototyping playlist」(50분)** - easing curve, transition, Smart Animate, 스크롤, 디바이스 프레임 등 핵심 기능을 짧은 영상들로 학습할 수 있다. - **「Prototyping 101」(63분)** - 프레임 간 기본 내비게이션부터 인터랙티브 컴포넌트 같은 고급 기능까지 설명한다. - **제품 담당자를 위한 Figma 학습 시리즈** - 디자이너가 아닌 제품 담당자도 가벼운 프로토타입을 직접 만들 수 있도록 안내한다. - 두 번째 영상에서는 transition, Smart Animate, 스크롤 동작 등을 활용해 화면을 더 실제처럼 만드는 방법을 다룬다. - **접근 가능한 프로토타입 커뮤니티 파일** - Figma의 접근성 모드를 활용해 프로토타이핑 화면의 정보를 스크린 리더로 읽을 수 있다. - macOS의 VoiceOver와 Windows의 JAWS 같은 도구를 통한 접근성 테스트에 활용할 수 있다. ## 발표 자료를 인터랙티브하게 만들기 - **「Presenting with Figma」(70분)** - Figma 프로토타이핑 기능을 활용해 역동적인 슬라이드 프레젠테이션을 구성하는 방법을 소개한다. - **발표 팁 영상** - 슬라이드 안에 프로토타입을 중첩해 실제로 스크롤되는 모바일 화면 등 인터랙티브 요소를 넣을 수 있다. - 이 방식은 이사회 보고, 수업, 제품 소개처럼 메시지 전달이 중요한 상황에 유용하다. - **Figma 앱으로 발표하기** - 모바일 앱에서 슬라이드를 직접 클릭하며 발표하는 방법을 보여준다. ## 영상·모션·사용자 플로우 학습 - 프로토타입의 완성도를 높이려면 단순한 화면 연결뿐 아니라 전환 효과, 애니메이션, 스크롤 동작을 함께 설계해야 한다. - Smart Animate와 easing curve를 사용하면 화면 변화가 더 자연스럽고 제품의 실제 동작에 가까워진다. - 모션과 플로우를 활용하면 사용자가 어떤 순서로 기능을 경험하는지 명확하게 검증할 수 있다. ## 변수와 고급 프로토타이핑 - 변수 기능을 활용하면 하나의 프로토타입에서 상태, 값, 조건에 따른 다양한 동작을 관리할 수 있다. - 반복되는 상태나 화면을 개별 프레임으로 복제하는 대신 변수와 인터랙티브 컴포넌트로 구성해 유지보수성을 높일 수 있다. - 복잡한 사용자 플로우와 여러 상태를 표현할 때 변수 기반 설계가 특히 유용하다. ## 오피스 아워와 실습 자료 - Figma의 오피스 아워 콘텐츠는 프로토타이핑 기능과 실제 활용 사례를 보충 학습할 수 있는 자료로 제공된다. - 영상뿐 아니라 Figma 커뮤니티 파일을 직접 열어 결과물을 확인하고 따라 해볼 수 있다. - 학습 방식에 따라 짧은 영상, 장시간 강의, 실습 파일, 소셜 콘텐츠 중 적합한 자료를 선택할 수 있다. 처음 시작한다면 기초 프로토타입 제작과 프레임 간 내비게이션부터 익힌 뒤, Smart Animate·스크롤·인터랙티브 컴포넌트로 확장하는 순서가 좋다. 이후 접근성 테스트, 변수, 발표용 프로토타입을 적용하면 실무에서 검증과 커뮤니케이션을 동시에 강화할 수 있다.

motion-designfigmaprototypingaccessibility+3

figma2022년 3월 23일

모션의 예술과 영향력 (새 탭에서 열림)

디지털 제품의 모션은 장식이 아니라 사용자의 이해를 돕고, 상태와 피드백을 전달하며, 물리적 세계와 유사한 정신 모델을 형성하게 하는 중요한 설계 도구다. 좋은 애니메이션은 실용성과 개성을 함께 갖추되 사용자의 시간을 존중하고 방해하지 않아야 한다. 특히 접근성을 해치거나 불필요하게 산만한 모션은 제품 경험과 브랜드 인상을 악화시킬 수 있다. ## 물리적 세계를 디지털 경험으로 번역하는 모션 - 인간은 3차원적이고 움직임이 존재하는 물리적 환경에 적응해 왔기 때문에, 움직임을 통해 많은 의미를 직관적으로 해석한다. - 디지털 인터페이스에 모션을 추가하면 사용자가 별도의 설명 없이도 공간과 기능을 이해하는 데 도움이 된다. - 예를 들어 메뉴가 서랍처럼 열리고 닫히는 애니메이션은 다음과 같은 정신 모델을 전달한다. - 콘텐츠 상자가 열리고 닫힌다. - 다시 열어도 이전과 같은 내용이 있다. - 사용자가 인터페이스의 상태 변화를 예측할 수 있다. - 모션은 디지털 공간에서 “무엇이 일어나고 있는지”를 시각적으로 설명하는 역할을 한다. ## 상태와 피드백을 전달하는 움직임 - 로딩 바는 작업이 진행 중이며 곧 완료될 것이라는 정보를 제공한다. - 잘못된 비밀번호 입력 시 입력창이 흔들리는 효과는 고개를 젓는 동작처럼 오류를 직관적으로 전달한다. - 새로고침 후 차트나 그래프가 재배치되는 애니메이션은 데이터가 갱신되었다는 사실을 보여준다. - FigJam 타이머의 종료 시 흔들리는 축하 애니메이션처럼, 모션은 단순한 상태 전달을 넘어 감정과 분위기도 만들 수 있다. - Figma의 커서 채팅에서는 입력 중인 대화 말풍선이 커지며, 즉흥적이고 자연스러운 대화감을 형성한다. ## 마이크로애니메이션은 목적 중심으로 설계해야 한다 - 마이크로애니메이션은 짧은 시간 동안 UI를 활성화하거나 사용자의 흐름을 안내하는 움직임이다. - 아이콘을 의미 없이 추가하지 않듯, 애니메이션도 “움직임을 넣기 위해” 넣어서는 안 된다. - 각각의 애니메이션은 구체적인 사용자 문제를 해결해야 한다. - 오래된 백엔드 시스템 때문에 발생하는 처리 지연을 1~2초의 전환 애니메이션으로 자연스럽게 감출 수 있다. - 이때 애니메이션은 실제 처리 속도를 높이지 않더라도 제품이 더 빠르고 덜 끊기는 것처럼 느끼게 한다. ## 실용성과 개성을 함께 갖춘 좋은 모션 - 좋은 모션은 기능적 목적과 제품의 개성을 균형 있게 결합한다. - 사용자의 시간을 존중하고, 주의를 빼앗거나 작업을 지연시키지 않아야 한다. - 애플의 창 최소화 애니메이션은 창이 독의 아이콘 속으로 빨려 들어가는 듯한 효과를 보여준다. - 이 효과는 짧고 미묘하지만 다음 정보를 동시에 전달한다. - 창이 어디로 이동했는지 - 창을 다시 열려면 어떤 아이콘을 눌러야 하는지 - 창이 사라진 것이 아니라 보관되었다는 사실 - 다시 창을 열 때는 아이콘에서 창이 자라나는 듯한 역방향 애니메이션을 사용해 상태 변화의 연속성을 보여준다. ## 과도한 모션과 접근성 문제 - 애니메이션이 없어도 핵심 기능을 사용할 수 있도록 설계해야 한다. - 특정 움직임은 간질 환자 등 일부 사용자에게 발작을 유발할 수 있으므로 접근성을 고려해야 한다. - 모션은 다음과 같은 부작용을 일으킬 수 있다. - 화면을 복잡하고 산만하게 만든다. - 사용자의 작업을 중단시킨다. - 불필요한 단계를 추가한다. - 사용자를 혼란스럽게 하거나 불편하게 한다. - 반복되면서 브랜드에 대한 호감도를 서서히 떨어뜨린다. - 화면 곳곳에서 빠르고 과장된 움직임이 반복되면 사용자는 정확한 원인을 의식하지 못하더라도 제품을 피곤하고 성가시게 느낄 수 있다. - 따라서 각 애니메이션은 가장 우아하고 절제된 방식으로 사용자 문제를 해결하는지 검토해야 한다. 모션은 기능을 이해시키고 상태 변화를 설명하는 경우에 우선 적용하는 것이 좋다. 구현 전에는 “이 움직임이 어떤 정보를 전달하는가”, “없어도 사용 가능한가”, “접근성 설정이나 모션 감소 환경에서도 문제가 없는가”를 확인해야 한다.

motion-designfigmaaccessibilityux+3

figma2019년 7월 8일

GIF로 피그마 프로토타 (새 탭에서 열림)

Figma는 2019년부터 프로토타입에서 애니메이션 GIF를 재생할 수 있도록 지원했다. 파일에 GIF를 추가한 뒤 **Present**를 누르면 움직임이 재생되며, 모션 디자인·영상·미세한 인터랙션을 실제 제품처럼 표현할 수 있다. 편집 화면에서는 GIF가 정지 이미지로 보이지만, 원하는 프레임을 커버 이미지로 지정해 여러 GIF를 쉽게 구분할 수 있다. ## 프로토타입에서 GIF 사용하기 - Figma 파일에 GIF를 이미지처럼 추가한다. - **Present** 모드에서 GIF가 자동으로 애니메이션을 재생한다. - GIF는 편집 화면에서는 정지 이미지로 표시되고, 프로토타입에서만 움직인다. - GIF 제작 도구로 ScreenFlow, LICEcap, Principle, After Effects 등이 소개됐다. ## 커버 프레임 지정 - GIF 속성 패널의 GIF 모달을 열어 원하는 프레임으로 이동할 수 있다. - 선택한 프레임은 편집 화면에 표시되는 대표 이미지가 된다. - 첫 프레임이 비어 있거나, 비슷한 시작 화면을 가진 GIF가 여러 개일 때 유용하다. ## 모바일 프로토타입 개선 - 모바일 프로토타입에는 OS에 맞춘 관성 스크롤이 적용됐다. - 새로운 터치 커서가 추가되어 실제 모바일 기기와 비슷한 조작감을 제공한다. - GIF 기능과 함께 모바일 인터랙션의 사실성을 높이는 업데이트다. ## GIF를 활용할 수 있는 디자인 사례 - **Uber**: 애니메이션 스플래시 화면을 로딩 상태와 브랜드 인사말로 활용한다. - **Slack**: 로딩 중 제품 팁이나 재미있는 문구를 보여준다. - **Material Design**: 선형·원형 진행 표시기로 작업 상태를 단순하게 전달한다. - **Headspace**: 온보딩 과정에서 일러스트 애니메이션으로 기능과 사용 맥락을 설명한다. - **Hyperlapse**: 동영상 촬영 앱의 사용 시나리오를 온보딩 영상으로 소개한다. - **Mapbox**: 웹사이트 히어로 영역에서 위치 기술을 설명하는 반복 영상을 사용한다. - **Mailchimp**: 일러스트에 미세한 움직임을 더해 화면에 생동감과 질감을 부여한다. ## 실용적인 활용 방향 GIF는 복잡한 동영상 구현 없이도 로딩 상태, 온보딩, 진행 표시, 제품 소개, 일러스트 애니메이션을 프로토타입에 포함하는 간단한 방법이다. 다만 편집 화면에서는 정지 이미지로 보이므로 의미 있는 커버 프레임을 설정하고, 실제 사용 환경을 확인하려면 반드시 **Present** 모드에서 테스트하는 것이 좋다.

motion-designfigmaprototypingux-design+2

figma2018년 10월 22일

새로운 Principle 연동 기능 (새 탭에서 열림)

Figma가 프로토타이핑 도구 Principle과 연동되어, Figma에서 만든 정적 디자인에 고급 애니메이션과 인터랙션을 추가할 수 있게 되었다. 사용자는 코딩 없이 스크롤, 스와이프, 버튼 상태 변화, 스프링·이징·선형 전환 등을 구현해 실제 모바일 앱과 유사한 프로토타입을 만들 수 있다. 또한 Figma에서 디자인을 수정하면 Principle이 변경 사항을 감지해 기존 애니메이션을 유지한 채 동기화한다. ## Figma와 Principle의 통합 - Principle에서 Figma를 가져오기 소스로 인증하면 Figma 디자인을 Principle로 불러올 수 있다. - Figma의 화면과 객체를 기반으로 Principle에서 인터랙션과 모션을 설정한다. - 정적인 UI 시안을 실제 앱처럼 동작하는 프로토타입으로 발전시킬 수 있다. - 이 통합은 Figma의 웹 기반 API를 활용해 구축되었다. ## 구현할 수 있는 인터랙션과 애니메이션 - 페이지에 스크롤 동작 추가 - 이미지 카드 사이의 스와이프 전환 구현 - 사용자의 상호작용에 따른 버튼 상태 변화 설정 - 객체 간 전환 애니메이션 적용 - 스프링(spring) - ease in - ease out - 선형(linear) 전환 - 별도의 코딩 없이 모바일 앱에 가까운 동작과 화면 전환 표현 ## 코딩 없이 사용하는 시각적 프로토타이핑 - Principle은 인터페이스 디자이너에게 익숙한 시각적 UI를 제공한다. - 디자인과 엔지니어링 작업을 오가는 대신, 디자이너가 시각적·창의적 사고에 집중할 수 있도록 설계되었다. - 초보자도 비교적 쉽게 사용할 수 있으며, 복잡한 프로토타입을 만들면서도 코드를 배울 필요가 없다. - 단순한 사용성과 강력한 애니메이션 기능의 균형이 Principle의 장점으로 소개된다. ## Figma 수정 사항의 동기화 - 이미 Principle로 가져온 디자인을 Figma에서 수정해도 두 도구 사이의 동기화가 가능하다. - Principle은 Figma의 변경 사항을 자동으로 인식하고 기존 작업에 병합한다. - 예를 들어 Figma에서 버튼 크기를 변경하면 Principle에서도 버튼 크기가 자동으로 조정된다. - 이때 Principle에서 설정한 기존 애니메이션은 유지된다. - 따라서 디자인 수정 때마다 프로토타입의 인터랙션을 처음부터 다시 설정할 필요가 없다. ## 개발자를 위한 Figma API 활용 - Principle 제작자는 Figma의 API 문서와 도구를 활용해 연동 기능을 개발했다. - Figma의 API Explorer에서는 특정 Figma 파일 ID를 입력해 API 호출 결과를 확인할 수 있다. - 개발자는 API의 기본 구성 요소와 파일 데이터 구조를 직접 테스트하며 연동 방식을 이해할 수 있다. - 이는 디자인 도구를 외부 서비스와 연결하려는 개발자에게 실용적인 검증 환경을 제공한다. ## 활용과 의의 - Figma는 화면 설계에, Principle은 모션과 인터랙션 구현에 특화된 역할을 맡는다. - 두 도구를 함께 사용하면 디자인 단계에서 사용자 경험을 더 현실적으로 검증할 수 있다. - 디자이너는 개발에 넘기기 전에 전환 효과와 인터랙션의 완성도를 확인할 수 있다. - 통합 기능은 Figma 사용자들의 지속적인 요청에 대한 대응으로 제공되었다. 실무에서는 Figma에서 레이아웃과 시각 디자인을 관리하고, Principle에서 핵심 사용자 흐름과 애니메이션을 빠르게 검증하는 방식이 효과적이다. 특히 디자인 변경 후에도 애니메이션이 유지되므로, 반복적인 프로토타입 수정 작업을 줄일 수 있다.

motion-designfigmaprototypingui-ux+2