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

슬롯(Slots)으로

Figma의 ‘슬롯(slots)’은 컴포넌트의 구조와 연결 상태는 유지하면서 내부 콘텐츠를 자유롭게 바꾸는 기능이다. 이를 통해 디자이너는 컴포넌트를 분리(detach)하지 않고도 다양한 콘텐츠를 구성할 수 있으며, 디자인 시스템 관리자는 과도한 variants와 유지보수 부담을 줄일 수 있다. 글은 초기 사용자들의 사례를 바탕으로 슬롯을 효과적으로 도입하는 방법을 소개한다. ## 슬롯이 해결하는 디자인 시스템의 문제 - 디자인 시스템이 커질수록 일관성을 위한 제약이 표현의 자유를 제한할 수 있다. - 디자이너들은 이를 해결하기 위해 다음과 같은 우회 방법을 사용한다. - 컴포넌트 variants를 계속 추가 - 모든 가능한 상태를 고려해 숨겨진 레이어를 미리 포함 - 컴포넌트를 detach해 개별 수정 - 그 결과 라이브러리가 비대해지고, 디자인과 실제 코드 구현 사이의 연결도 약해진다. - 슬롯은 안정적인 컴포넌트 구조 안에 콘텐츠를 동적으로 삽입한다는 점에서 코드의 컴포넌트 구성 방식과 유사하다. ## 팀별 기대 효과 - **디자인 시스템 관리자** - variants 수와 유지보수 작업 감소 - 실제 제품 구조와 더 밀접하게 연결 - **디자이너** - 시스템 밖으로 나가지 않고도 콘텐츠와 표현을 자유롭게 조정 - 컴포넌트를 detach하지 않고 맞춤 구성 가능 - **개발자** - 코드로 구현되는 구조와 유사한 예측 가능한 디자인 전달 - 핸드오프와 구현 과정 단순화 - 슬롯은 자동화와 AI가 디자인 구조를 해석하는 데에도 유리한 형태를 제공한다. - Figma는 Schema 2025에서 슬롯을 공개했으며, 글 작성 시점에는 오픈 베타로 제공하고 있다. ## 1. 사용 빈도가 높은 컴포넌트부터 시작하기 - 슬롯 도입 효과가 가장 큰 대상은 이미 많은 사용자가 detach하고 있는 컴포넌트다. - 초기 사용자들이 우선 적용한 대표 컴포넌트는 다음과 같다. - 대화상자(dialog) - 메뉴와 드롭다운 - 모달 - 카드 - 패널 - 특히 다음 조건을 만족하는 컴포넌트를 우선순위로 삼는 것이 좋다. - 여러 화면에서 반복적으로 사용됨 - 시스템 안에서 중복되어 있음 - variants가 지나치게 많음 - 다양한 유형의 콘텐츠를 수용해야 함 ### 반복 요소가 있는 컴포넌트 - 메뉴와 리스트는 가능한 항목 수를 처리하기 위해 숨겨진 레이어를 다수 포함하는 경우가 많다. - 예를 들어 기본 리스트에 3개 항목을 표시하면서 7개 항목을 숨겨둘 수 있지만, 11번째 항목이 필요하면 결국 컴포넌트를 detach하게 된다. - 슬롯을 사용하면 필요한 항목만 추가할 수 있다. - 기본 컴포넌트가 불필요하게 커지지 않음 - 콘텐츠가 늘어나도 원래 컴포넌트와의 연결 유지 - 모든 가능한 항목 수를 variants로 미리 만들 필요 없음 ### variants가 급증하는 컴포넌트 - 모달과 카드는 제목, 설명, 미디어, 버튼 조합에 따라 수많은 variants가 생기기 쉽다. - 슬롯을 사용하면 구조는 그대로 유지하면서 필요한 콘텐츠만 교체하거나 삽입할 수 있다. - 따라서 구조는 일정하지만 콘텐츠가 자주 달라지는 컴포넌트에 특히 효과적이다. ## 2. 미리 채운 슬롯과 빈 슬롯을 목적에 맞게 사용하기 - 슬롯을 만들 때 기본 콘텐츠를 넣을지 비워둘지 결정해야 한다. - **미리 채운 슬롯** - 컴포넌트가 어떻게 사용되는지 보여주는 맥락을 제공한다. - 대부분의 사용자가 수정하지 않아도 되는 기본 상태를 표현할 수 있다. - 예를 들어 카드 오른쪽 위에 항상 아이콘이 있다면 매번 아이콘을 삽입하게 만들 필요가 없다. - **빈 슬롯** - 디자이너가 반드시 콘텐츠를 추가해야 한다는 점을 명확히 전달한다. - 사용자의 다음 행동을 유도하는 자리 표시자 역할을 한다. - 기존에 인스턴스 교체(instance swap)로 흉내 내던 패턴을 더 직접적으로 표현할 수 있다. - 기본 콘텐츠가 예측 가능한 경우에는 미리 채운 슬롯을, 콘텐츠 입력이 필수인 경우에는 빈 슬롯을 사용하는 것이 적절하다. ## 도입 시 고려할 기준 - 모든 컴포넌트에 한꺼번에 슬롯을 적용하기보다, 실제 우회 사용이 많이 발생하는 소수의 고빈도 컴포넌트부터 시작한다. - 구조는 유지되지만 콘텐츠가 자주 바뀌는 영역을 우선 찾는다. - 슬롯의 기본 콘텐츠가 사용자에게 충분한 맥락을 주는지, 혹은 빈 상태가 명확한 행동을 유도하는지 검토한다. - 이를 통해 디자인 시스템의 통제력은 유지하면서도 실제 제품에 필요한 유연성을 확보할 수 있다.

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

사용자 인터페이스Figma디자인 시스템design-to-development+1

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

Claude Code에서 Figma로: 프로덕

Claude Code에서 실행 중인 UI를 Figma로 가져와 편집 가능한 프레임으로 변환할 수 있게 되었다. 이를 통해 코드의 빠른 프로토타이핑과 Figma 캔버스의 협업·탐색 기능을 연결하고, 개발자·디자이너·PM이 동일한 결과물을 바탕으로 더 이른 시점에 의견을 나눌 수 있다. 핵심은 코드를 최종 결과로 고정하지 않고, Figma에서 여러 방향을 비교·발전시키는 것이다. ## 코드에서 캔버스로 확장하는 이유 - Claude Code를 사용하면 실제 데이터와 상호작용을 포함한 UI를 빠르게 구축하고 테스트할 수 있다. - 코드 기반 작업은 한 번에 하나의 상태를 구현하고 확인하는 데 강하다. - 반면 Figma 캔버스는 전체 흐름과 여러 대안을 한눈에 배치하고, 팀과 함께 논의하는 데 유리하다. - 따라서 코드는 아이디어를 빠르게 수렴시키고, 캔버스는 아이디어를 다시 확장하고 탐색하는 공간이 된다. ## 브라우저 화면을 편집 가능한 Figma 프레임으로 변환 - 프로덕션, 스테이징, 로컬호스트에서 실행 중인 UI를 캡처할 수 있다. - 캡처한 화면은 클립보드로 복사하거나 Figma 파일로 전송할 수 있다. - Figma에 붙여넣은 결과는 단순한 이미지가 아니라 정리·복제·수정 가능한 프레임으로 변환된다. - 여러 화면을 한 세션에서 캡처하면 화면 간 순서와 흐름도 함께 보존할 수 있다. ## 혼자 만드는 프로토타입에서 팀 협업으로 - 코드 우선 작업은 초기에는 빠르지만, 화면과 상태가 늘어나면 한 사람이 브랜치·개발 서버·전체 맥락을 모두 관리해야 한다. - 기존에는 피드백을 받기 위해 스크린샷이나 녹화 영상을 공유하거나, 다른 사람이 직접 로컬에서 빌드를 실행해야 했다. - Figma로 가져오면 팀원들이 같은 캔버스에서 직접 주석을 달고, 불명확한 부분을 표시하며, 개선 방향을 제안할 수 있다. - 다른 사람이 코드 환경으로 전환하거나 여러 파일을 수정하지 않아도 대안을 논의할 수 있다. ## 첫 번째 아이디어가 아닌 최선의 아이디어 찾기 - AI로 작동하는 프로토타입을 빠르게 만들 수 있게 되면서, 논의의 초점은 “어떻게 만들까”에서 “어떤 버전을 발전시킬까”로 이동했다. - Figma Make의 결과물을 캔버스로 가져오는 방식과 마찬가지로, Claude Code의 구현 결과도 편집 가능한 디자인 산출물로 전환된다. - 출발점이 Figma Make인지 Claude Code인지와 관계없이, 구체적인 결과물을 먼저 만든 뒤 반복적으로 발전시키는 것이 목표다. ## Figma에서 가능한 네 가지 탐색 - **전체 시스템을 시각적으로 확인** - 여러 화면과 단계별 흐름을 나란히 배치할 수 있다. - 반복되는 패턴, 누락된 단계, 디자인 불일치, 트레이드오프를 쉽게 발견할 수 있다. - **코드를 다시 작성하지 않고 변형 실험** - 프레임을 복제하고 순서를 재배치하며 구조적 대안을 비교할 수 있다. - 단순한 아이디어 검증을 위해 코드를 다시 구현할 필요가 없다. - 폐기한 대안도 남겨둘 수 있어 이후 재검토가 가능하다. - **더 이른 시점에 의사결정** - 디자이너, 엔지니어, PM이 동일한 맥락과 완성도의 결과물을 함께 검토한다. - 정답이 명확하지 않은 문제도 초기에 질문과 쟁점을 드러낼 수 있다. - 변경 비용이 낮을 때 방향을 조정할 수 있다. - **구현된 UI를 팀의 방향성으로 전환** - 실제로 작동하는 UI를 개인의 코드 환경에만 머무는 결과물이 아니라 공유 가능한 디자인 자산으로 만든다. - 팀은 구현 결과를 기준으로 제품의 사용감, 사용자 안내 방식, 가치 전달 방법을 함께 논의할 수 있다. ## 실용적인 결론 Claude Code는 빠른 구현과 실제 동작 검증에 사용하고, 방향을 비교하거나 팀의 피드백을 모을 때는 결과물을 Figma로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

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

사용자 인터페이스FigmaAI프로토타이핑+2

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

프레스 스타트: 컨트롤러

게임 인터페이스는 사용자가 어떤 입력 장치를 쓰는지에 따라 형성된다. 초기 게임의 단순한 시작 화면부터 현대 AAA 게임의 복잡한 메뉴·탭·인벤토리 구조까지 발전했지만, 방향키와 버튼을 중심으로 한 컨트롤러는 일관된 탐색 경험과 근육 기억을 유지해 왔다. 앞으로 AR·VR 같은 기술은 입력 장치와 인터페이스의 경계를 물리적 공간까지 확장할 것으로 보인다. ## 게임 인터페이스의 발전 - 1958년의 **Tennis for Two**부터 초기 아케이드 게임까지는 인터페이스가 매우 단순했다. - *Pong*, *PAC-MAN*, *Super Mario Bros.* 같은 게임은 사실상 단일 화면과 시작 버튼만으로 플레이가 가능했다. - 현대 AAA 게임은 다음과 같은 다양한 기능을 제공한다. - 여러 게임 모드 - 캐릭터 및 코스튬 커스터마이징 - 게임 내 상점 - 월드 맵과 인벤토리 - 퀘스트와 설정 메뉴 - 이에 따라 게임 UI는 단일 타이틀 화면에서 메뉴, 탭, 화면 간 연결로 구성된 복합적인 허브 구조로 확장됐다. ## 컨트롤러가 만든 일관된 탐색 원칙 - Atari 2600부터 PlayStation 5까지 컨트롤러는 방향 입력과 버튼을 핵심 구조로 유지했다. - 세대가 바뀌어도 기본적인 조작 방식이 크게 변하지 않아 플레이어는 기존의 근육 기억을 활용할 수 있었다. - 컨트롤러의 공통 규칙은 게임 UI 설계의 기반이 됐다. - 플랫폼마다 완전히 새로운 탐색 방식을 만들 필요가 줄어들어 디자인·개발 비용도 절감된다. - 게임이 거대한 문화 산업으로 성장하고 스트리밍, e스포츠 등으로 확장됐지만, 플레이어와 게임을 연결하는 핵심 장치는 여전히 컨트롤러다. ## 입력 장치가 인터페이스를 결정한다 - 디지털 인터페이스는 사용하는 표면과 입력 방식에 맞춰 설계된다. - 데스크톱: 마우스 - 모바일: 손가락 터치 - TV: 리모컨 - 마우스는 빠르고 정밀하며 여러 버튼을 제공한다. - 화면을 한 번에 가로질러 이동할 수 있다. - 몇 픽셀 크기의 작은 컨트롤도 조작할 수 있다. - 가운데 버튼, 오른쪽 클릭처럼 추가 기능을 제공한다. - 따라서 데스크톱 UI는 작고 밀도 높은 컨트롤과 많은 정보를 한 화면에 배치할 수 있다. - 손가락은 마우스 커서보다 크고 정밀도가 낮기 때문에 모바일 UI는 다음과 같은 특성을 갖는다. - 크고 둥근 버튼 - 충분한 버튼 간격 - 오작동을 줄이는 넓은 터치 영역 - 모바일은 탭, 스와이프, 핀치 같은 제스처도 적극적으로 활용한다. - 마우스와 손가락은 모두 화면의 특정 위치를 가리키는 “포인터”라는 공통점을 가지지만, 정밀도와 조작 방식의 차이가 UI 형태를 바꾼다. ## 2D 메뉴에서 3D 공간으로 - 기존 게임에서는 플레이어가 컨트롤러로 2D 인터페이스를 탐색하고, 게임 속 3D 세계를 조작했다. - 최신 기술에서는 플레이어의 신체와 주변 환경 자체가 입력 영역이 되기 시작했다. - AR·VR 컨트롤러는 기존의 버튼과 방향 입력을 넘어 공간 이동, 손동작, 시선 등 새로운 상호작용을 가능하게 한다. - 입력과 경험의 관계를 분석하면 게임뿐 아니라 차세대 디지털 인터페이스가 어떻게 이동하고 반응해야 하는지도 이해할 수 있다. ## 실용적인 시사점 새로운 인터페이스를 설계할 때는 화면 구성보다 먼저 입력 장치의 특성을 파악해야 한다. 정밀한 마우스에는 높은 정보 밀도를, 손가락에는 큰 터치 영역을, 컨트롤러에는 명확한 방향 이동과 일관된 포커스 규칙을 적용하는 방식이 효과적이다. AR·VR에서는 화면 안의 UI뿐 아니라 사용자의 몸과 주변 공간까지 인터페이스로 고려해야 한다.

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

사용자 인터페이스사용자 경험augmented-realityvirtual-reality+3

figma·2025년 12월 15일·3분 읽기큐레이션 요약

“Chat, 우리 망했

소셜 미디어 알고리즘은 유행어를 퍼뜨리는 데 그치지 않고, 사람들이 자신을 표현하고 타인을 이해하는 방식까지 바꾼다. 알고리즘은 특정 커뮤니티의 언어를 맥락에서 분리해 대중화하며, 단어의 의미와 문화적 배경을 재구성한다. 따라서 새로운 표현 자체를 문제 삼기보다, 어떤 플랫폼 구조와 문화적 경로가 그 언어를 유행시켰는지 비판적으로 살펴봐야 한다. ## 인터페이스가 사고와 관계를 바꾸는 방식 - Tinder의 ‘스와이프’는 단순한 조작법을 넘어 호감과 선택을 표현하는 언어가 됐다. - 오른쪽을 긍정적으로, 왼쪽을 부정적으로 인식하는 서구 문화의 상징 체계도 인터페이스에 반영된다. - Marshall McLuhan의 “미디어가 메시지다”라는 개념처럼, 플랫폼의 형식과 기능 자체가 사용자의 행동과 의미 해석을 만든다. - Hinge의 프로필 질문은 사용자를 특정한 서사 방식으로 자기소개하게 한다. - Grindr의 ‘bear’, ‘twink’ 같은 분류 체계는 사용자가 자신의 정체성을 특정 부족이나 유형으로 표현하도록 유도한다. - 즉, 플랫폼은 사용자의 외적 표현뿐 아니라 자기 자신을 이해하는 방식에도 영향을 준다. ## 알고리즘과 ‘맥락 붕괴’ - 인터넷은 특정 커뮤니티에서 만들어진 언어를 더 넓은 대중에게 빠르게 확산시킨다. - 알고리즘은 해시태그뿐 아니라 게시물과 영상에서 사용된 단어 자체를 메타데이터처럼 활용한다. - 특정 집단에서만 통용되던 표현이 ‘For You’ 피드에 등장하면, 이용자는 그 말이 자신의 문화권을 위한 것이라고 오해할 수 있다. - 원래의 역사·공동체·정치적 맥락이 사라진 채 표현만 확산되는 현상을 ‘맥락 붕괴’라고 볼 수 있다. - 예를 들어 ‘slay’는 뉴욕의 흑인·라틴계 게이 남성들이 중심이었던 볼룸 문화에서 출발했지만, 소셜 미디어를 거치며 훨씬 넓은 대중어가 됐다. ## 커뮤니티 언어의 대중화와 의미 변화 - ‘slay’, ‘serve’, ‘queen’, ‘cooked’, ‘ate’, ‘bussin’’, ‘it’s giving’ 등은 볼룸 문화와 AAVE에서 유래한 표현의 사례로 제시된다. - 인터뷰이는 유행어의 상당수가 AAVE 또는 4chan에서 비롯된다는 경험적 견해를 말한다. - 대중화 과정에서 단어는 더 많은 사람에게 사용되지만, 원래의 문화적 의미와 정서적 뉘앙스는 약해질 수 있다. - 인플루언서가 유행어를 사용하고, 알고리즘이 이를 확산시키면서 단어의 인지도와 바이럴성이 서로 강화된다. - 언어 변화는 자연스러운 현상이지만, 어떤 공동체의 표현이 누구에 의해 소비되고 재해석되는지는 살펴볼 필요가 있다. ## 밈을 통한 이념과 문화의 확산 - 밈은 단순한 농담이나 유행어가 아니라 특정 생각과 가치관을 전달하는 매개체가 될 수 있다. - ‘looksmaxxing’이나 ‘-pilled’처럼 인셀 문화에서 사용되던 표현도 밈의 형태로 주류에 진입할 수 있다. - 밈은 거부감이 큰 사상이나 온라인 하위문화의 관점을 재미있는 표현 속에 숨겨 전달하는 ‘트로이 목마’처럼 작동할 수 있다. - 다만 새로운 단어를 사용하는 것 자체가 곧 해롭다는 뜻은 아니며, 그 표현이 어디서 왔고 어떤 관점을 포함하는지 인식하는 태도가 중요하다. ## 언어가 바이럴리티의 지표가 되는 과정 - 오늘날 언어는 콘텐츠의 설명 수단을 넘어 알고리즘이 포착하는 핵심 신호가 된다. - 특정 단어를 사용하면 콘텐츠가 유행 흐름에 편입될 가능성이 높아지고, 다시 더 많은 사람이 그 단어를 접하게 된다. - 플랫폼은 이런 순환을 통해 어떤 표현을 ‘바이럴한 언어’로 만들고, 사용자는 유행에 참여하기 위해 그 표현을 모방한다. - 결과적으로 알고리즘은 사람들이 무엇을 말하는지뿐 아니라, 어떤 단어를 가치 있고 영향력 있다고 느끼는지도 결정한다. 플랫폼에서 유행어를 사용할 때는 뜻만 따라 하기보다 그 표현의 기원, 원래 사용하던 공동체, 현재의 의미 변화를 함께 확인하는 것이 좋다. 서비스를 설계하거나 운영한다면 특정 언어가 어떤 맥락에서 확산되는지와 인터페이스가 정체성 표현에 미치는 영향까지 고려해야 한다.

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

사용자 인터페이스algorithmsmetadatasocial-media-algorithms+2

figma·2025년 9월 2일원문

IDC 조사: 전 세계 (새 탭에서 열림)

글로벌 시장 분석 기관인 IDC의 최신 연구에 따르면, 소프트웨어 디자인 및 개발에 참여하는 인력은 2025년 107만 명에서 2029년 144만 명으로 약 30% 이상 급증할 것으로 전망됩니다. 이는 디자인이 기업의 핵심적인 경쟁 우위 요소로 자리 잡고 있음을 시사하며, 특히 사용자 경험(UX) 중심의 솔루션에 대한 수요가 폭발적으로 늘어나고 있음을 보여줍니다. 생성형 AI의 발전은 이러한 흐름을 가속화하여 더 정교하고 시각적으로 뛰어난 디지털 제품의 생산을 촉진할 것으로 보입니다. **소프트웨어 디자인 인력의 양적 팽창** - IDC는 디지털 제품 및 인터페이스 디자인에 참여하는 지식 근로자와 개발자의 수가 2025년 1억 7백만 명에서 2029년 1억 4천 4백만 명으로 증가할 것으로 예측했습니다. - 이러한 성장은 전 산업군과 기업 규모를 막론하고 소프트웨어 디자인의 중요성이 비즈니스 전략의 핵심으로 부상했음을 의미합니다. - 디자인 중심의 문제 해결을 위한 전문 인력에 대한 수요는 향후 몇 년간 지속적으로 강화될 것입니다. **UX 디자인 직무의 독보적인 성장세** - UX 디자인 전문가 집단은 2025년부터 2029년까지 연평균 성장률(CAGR) 7.6%를 기록할 것으로 보입니다. - 이는 다른 지식 근로자 하위 범주의 성장 속도를 앞지르는 수치로, 복잡한 기술을 사용자 친화적으로 풀어내는 디자인 집약적 솔루션의 중요성을 방증합니다. - 기업들은 단순한 기능 구현을 넘어, 차별화된 인터페이스와 사용자 경험을 제공하기 위해 UX 인력을 공격적으로 확충할 전망입니다. **생성형 AI가 가져올 개발 속도와 품질의 변화** - 생성형 AI는 소프트웨어 개발의 속도와 물량을 비약적으로 증가시켜 사용자에게 더 넓은 선택지를 제공하는 촉매제 역할을 할 것입니다. - 제품 내 AI 기능 통합이 보편화됨에 따라, 디자이너와 개발자는 고도로 사용 가능하고 시각적으로 매력적인 AI 인터페이스를 구현해야 한다는 도전에 직면하게 됩니다. - 결과적으로 AI는 디자인 과정을 보조하는 동시에, 더 높은 수준의 디자인 표준을 유지해야 하는 압박으로 작용하여 숙련된 디자인 인력의 가치를 높일 것입니다. 디자인은 이제 단순한 미적 요소를 넘어 제품의 성패를 가르는 전략적 자산이 되었습니다. 기업들은 증가하는 디자인 인력 수요에 대비하고, 특히 생성형 AI를 디자인 프로세스에 효과적으로 통합하여 고도화된 사용자 경험을 신속하게 제공할 수 있는 역량을 갖추어야 합니다. 이러한 변화의 흐름 속에서 디자인과 개발의 경계를 허물고 협업 효율을 극대화하는 것이 미래 소프트웨어 시장의 핵심 경쟁력이 될 것입니다.

사용자 인터페이스Figma사용자 경험생성형 AI+3

figma·2025년 7월 1일원문

피그마, 라틴 아 (새 탭에서 열림)

Figma가 중남미 디자인 및 개발자 커뮤니티와의 접점을 넓히기 위해 라틴 아메리카 스페인어 현지화 버전을 공식 출시했습니다. 이번 업데이트는 단순한 번역을 넘어 문화적으로 최적화된 UI와 전용 지원 시스템을 포함하며, 전 세계 활성 사용자의 85%가 미국 외 지역에 거주하는 Figma의 글로벌 확장 전략의 일환입니다. 이를 통해 중남미 지역 기업들은 디자인 시스템을 더 효율적으로 확장하고 제품 개발 생산성을 높일 수 있게 되었습니다. ### 라틴 아메리카 시장의 성장과 현지화 배경 * **다섯 번째 현지화 언어:** 일본어, 스페인어(본토), 한국어, 브라질 포르투갈어에 이어 라틴 아메리카 스페인어가 Figma의 다섯 번째 공식 현지화 언어로 채택되었습니다. * **폭발적인 커뮤니티 성장:** 지난 한 해 동안 라틴 아메리카 지역에서만 1,000만 개 이상의 Figma 파일이 생성되었을 정도로 해당 지역의 창의적 에너지가 높습니다. * **주요 고객사 확보:** iFood, Mercado Libre, Nubank 등 중남미를 대표하는 유니콘 기업과 대형 금융기관들이 이미 Figma를 통해 디자인과 엔지니어링 워크플로우를 통합하고 있습니다. * **문화적 최적화:** 단순 텍스트 번역에 그치지 않고, 지역 사용자의 문화적 특성을 반영한 인터페이스와 전담 고객 지원을 통해 현지 기업들이 더 원활하게 제품을 설계할 수 있도록 돕습니다. ### 글로벌 플랫폼으로서의 데이터와 지표 * **압도적인 해외 사용자 비중:** 2024년 4분기 기준, Figma 월간 활성 사용자(MAU)의 약 85%가 미국 이외의 지역에 분포하고 있습니다. * **글로벌 매출 구조:** 2024년 전체 매출의 50% 이상이 미국 이외의 글로벌 시장에서 발생하며 명실상부한 글로벌 플랫폼으로 자리 잡았습니다. * **다양해진 사용자 직군:** 전체 사용자의 약 30%가 스스로를 개발자로 정의하고 있으며, 전통적인 디자이너 역할을 넘어 협업에 참여하는 비중이 전체 MAU의 2/3에 달합니다. ### 협업 환경에 주는 시사점 * **직군 간 장벽 완화:** 현지어 지원은 디자이너뿐만 아니라 제품 매니저, 개발자 등 다양한 이해관계자들이 디자인 시스템에 더 쉽게 접근하고 소통하게 만듭니다. * **글로벌 표준화 가속:** 전 세계 어디서든 동일한 수준의 현지화된 도구를 사용할 수 있게 됨에 따라, 다국적 기업 내에서의 협업 생산성이 더욱 향상될 것으로 기대됩니다. * **디자인 경쟁력 강화:** 현지 문화를 반영한 제품 제작이 쉬워지면서, 각 지역 기업들이 차별화된 사용자 경험(UX)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

사용자 인터페이스Figma디자인 시스템프로덕트 디자인+2

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

딜런 필드가 전하는

Figma의 성장에는 창업자 Dylan Field의 다양한 경험과 우연한 계기, 그리고 실패에서 배우는 태도가 영향을 미쳤다. 아역 배우 시절의 경험, 수학적 사고를 키워준 멘토, 독특한 Thiel Fellowship 지원서, 초기 아이디어의 방황, 젊은 CEO로서의 시행착오가 Figma의 창업과 발전에 연결됐다. 글은 성공이 단번에 완성되는 것이 아니라 끈기와 실험, 성장 과정을 통해 만들어진다는 점을 보여준다. ## 배우 경험이 길러준 끈기 - Dylan은 1990년대 후반 캘리포니아 소노마 카운티에서 아역 배우로 활동했다. - Peter Pan 공연 중 무대에서 잠든 일은 본인이 꼽는 가장 당황스러운 연기 경험이었다. - 하지만 공연에서 얻은 와이어 비행 경험 덕분에 훗날 Windows XP 광고에 출연할 수 있었다. - 오디션 경험을 통해 “오랜 시간 계속 시도하는 사람이 결국 이긴다”는 태도를 배웠다. ## 학교 관리인이 키운 수학적 호기심 - Dylan은 6살 때부터 대수 문제를 풀 정도로 수학에 관심이 많았다. - 중학교 수업이 지루해 학교 관리인과 시간을 보내곤 했다. - 수학과 물리학에 관심이 많았던 관리인은 Dylan에게 여러 개념을 설명해 주었다. - 특히 단순 계산보다 증명이 중요하다며 집합론을 공부해 보라고 권했다. - 이 경험은 Dylan이 수학을 공식 암기가 아니라 논리와 구조를 탐구하는 학문으로 바라보는 데 영향을 주었다. ## 초콜릿에 대한 괴상한 답변과 Thiel Fellowship - Thiel Fellowship 지원서는 “대부분의 사람들이 무엇을 잘못 생각하고 있는가”를 물었다. - Dylan은 “초콜릿은 역겹다”라고 답하고, 그 주장을 진지하게 논증하는 에세이를 작성했다. - 일반적인 통념을 뒤집으면서도 유머와 논리를 결합한 답변이 심사위원의 관심을 끌었을 가능성이 있다. - Dylan은 이를 실리콘밸리의 반(反)주류 사고를 다시 뒤집은 “메타-contrarian” 접근이라고 설명했다. - Fellowship을 받으면서 Brown University를 중퇴하고 Evan Wallace와 함께 창업에 전념하게 됐다. ## WebGL을 활용하려다 만든 밈 생성기 - Dylan과 Evan은 WebGL을 이용해 웹에서 고성능 그래픽을 구현하는 디자인 도구를 만들고 싶어 했다. - 그러나 기술을 먼저 확보한 뒤 용도를 찾으려 하면서 방향을 잃었다. - 한때 WebGL이라는 “망치”에 맞는 “못”으로 밈 생성기를 고려했다. - Dylan은 밈 시장의 성장 데이터를 근거로 밈 제작 서비스를 만들자고 주장했다. - 이 아이디어는 약 5일간 이어졌지만, 두 사람은 곧 더 본질적인 제품을 만들어야 한다는 결론에 도달했다. - 이 짧은 방황은 Figma가 초기부터 명확한 제품 비전을 가지고 출발한 것은 아니었음을 보여준다. ## 스무 살 CEO로서의 성장통 - Dylan은 이전 직함이 인턴이었을 정도로 어린 나이에 CEO가 됐다. - 제품 경험의 세부 사항을 직접 고민해 왔기 때문에 초기에는 모든 일을 통제하려는 경향이 있었다. - 본인도 당시의 경영 방식을 “마이크로매니징”이라고 표현했다. - 빠르게 제품을 출시해야 한다는 압박감이 통제 욕구를 더욱 키웠다. - 이후 사무실에서의 긴장된 상황 등을 겪으며, 제품에 대한 높은 기준과 팀에 대한 신뢰 사이의 균형을 배워갔다. - 공개된 내용에서는 Figma의 UI를 만들기 위해 드롭다운, 컴포넌트, 효과 등을 화이트보드에 반복적으로 탐색한 과정도 소개된다. Figma의 사례는 창업자의 이력이 반드시 한 방향으로만 이어질 필요는 없다는 점을 보여준다. 낯선 경험에서 얻은 끈기와 논리적 사고, 과감한 실험, 초기의 실패를 인정하고 방향을 수정하는 태도가 새로운 제품을 만드는 데 실질적인 자산이 될 수 있다.

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

사용자 인터페이스Figma프로덕트 디자인JavaScript+2

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

Figma가 Figma

Figma는 초보자가 도구를 익히는 과정을 돕기 위해 문서, 영상, 실습 파일, 커뮤니티를 결합한 교육 생태계를 운영한다. 학습자의 피드백을 반영해 실습과 실제 사례를 강화한 새 입문 과정을 공개했으며, 포트폴리오 웹사이트 제작까지 이어지도록 구성했다. Figma는 작은 프로젝트를 꾸준히 시도하고 다른 사람의 작업을 참고하며 실수를 통해 배우는 것이 실력을 키우는 가장 effective한 방법이라고 강조한다. ## 다양한 학습 방식을 지원하는 교육 생태계 - **Help Center** - 기능 설명, 사용 방법, 문제 해결 가이드를 제공하는 기본 학습 공간이다. - **YouTube 튜토리얼** - 기능을 실제 사례와 함께 영상으로 설명해 개념을 시각적으로 이해할 수 있다. - **플레이그라운드 파일** - 완성된 실습 파일을 직접 조작하고 변형하며 안전하게 기능을 실험할 수 있다. - **Figma Design for beginners** - 초보자가 직접 포트폴리오 웹사이트를 제작하며 Figma의 주요 기능을 익히는 실습 중심 과정이다. - 학생과 교사는 자격을 확인하면 Professional 플랜의 제품과 기능을 무료로 이용할 수 있다. ## 학습자 피드백을 반영한 입문 과정 개편 - 2020년 첫 초보자 과정 이후 약 300만 명이 영상을 시청했다. - Figma는 학습자 의견을 통해 다음과 같은 요구를 확인했다. - 직접 손으로 따라 해볼 수 있는 실습 확대 - 복잡한 기능에 대한 더 명확한 설명 - 학습 내용을 실제 작업과 연결하는 사례 제공 - 누구나 참여할 수 있도록 무료 기능 중심으로 구성 - 개편된 과정에는 다음 요소가 포함된다. - 어려운 기능을 자세히 설명하는 feature deep dive - 창의성을 발휘할 수 있는 단계별 탐색 활동 - Figma 전문가의 팁과 활용법 - 실제로 사용할 수 있는 포트폴리오 웹사이트 템플릿 ## 지식을 실제 기술로 전환하기 - 강의를 끝내는 것보다 직접 파일을 만들고 수정하는 과정이 중요하다. - 막연히 큰 웹사이트를 만들기보다 작은 UI 요소부터 시작하는 것이 좋다. - 인터랙티브 버튼 제작 - 로딩 애니메이션 구현 - 간단한 화면이나 컴포넌트 재현 - 작은 과제는 핵심 기능을 반복 연습하면서도 초보자가 느끼는 부담을 줄여준다. ## 꾸준한 연습과 커뮤니티 활용 - 매주 학습 목표를 정하고 관심 있는 튜토리얼을 선택해 규칙적으로 연습한다. - 반복 학습은 기능 숙련도와 작업 속도, 단축키 활용 능력을 높인다. - Figma Community에서 다른 디자이너의 작업을 살펴보고 파일을 복제해 직접 재현해볼 수 있다. - 다른 사람의 디자인을 분석하면 효과적인 구성 방식을 이해하고 자신만의 취향과 스타일을 발전시키는 데 도움이 된다. - Figma Forum에서는 질문을 올리고 조언을 얻거나 다른 사용자와 함께 작업할 수 있다. ## 실수와 반복을 학습의 일부로 받아들이기 - 빈 캔버스를 완벽하게 채우려 하기보다 다양한 시도를 하며 결과를 비교해야 한다. - 잘못된 작업을 되돌아보는 과정에서 기능의 작동 방식과 문제 해결 방법을 배울 수 있다. - `Cmd/Ctrl + Z`로 언제든 작업을 되돌릴 수 있으므로 실험을 두려워할 필요가 없다. - 새로운 도구를 익히는 데는 시간이 걸리므로 작은 성취를 인정하고 필요할 때 휴식하는 태도도 중요하다. 처음 시작한다면 입문 과정을 따라가며 작은 UI 요소를 직접 구현하고, 매주 정해진 시간에 반복 연습하는 방법이 가장 현실적이다. 이후 Figma Community의 파일을 분석하고 변형해보면 학습 내용을 실제 디자인 역량으로 발전시킬 수 있다.

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

사용자 인터페이스Figma프로토타이핑interaction-design+1

figma·2025년 4월 15일·3분 읽기큐레이션 요약

버전 관리: 피그마

Figma의 Layers 패널에 가로 스크롤을 추가하는 일은 단순한 UI 개선이 아니었다. 계층 구조, 접기·펼치기와 잠금·숨김 상태, 가상화 렌더링, 다양한 텍스트 길이와 다중 스크롤 방향이 서로 얽혀 있었기 때문이다. Figma 팀은 세 가지 프로토타입을 시험하며 사용자의 계층 구조 인식과 작업 맥락을 해치지 않는 방향을 탐색했다. ## 가로 스크롤이 어려웠던 이유 - Layers 패널은 자주 사용되고 신뢰성이 중요해 작은 동작 변화도 신중해야 했다. - 레이어는 정적인 목록이 아니라 다음과 같은 상태를 가진다. - 숨김·잠금 - 계층 접기·펼치기 - 부모·자식 관계 - 성능을 위해 현재 화면에 보이는 레이어만 렌더링하는 **가상화**가 적용되어 있었다. - 세로로 스크롤하면 새 레이어가 렌더링되고, 레이어 이름 길이가 달라져 가로 스크롤 영역과 정렬이 복잡해졌다. - 핵심 목표는 단순히 콘텐츠를 옮기는 것이 아니라 사용자가 현재 계층상의 위치와 “더 볼 내용이 있음”을 계속 이해하도록 하는 것이었다. - 디자이너 Giorgio Caviglia는 JavaScript, HTML, CSS, React로 직접 프로토타입을 만들어 수천 개 레이어와 다양한 상호작용을 실제로 검증했다. ## 첫 번째 시도: 화면 왼쪽의 보이지 않는 레이어 표시 - 레이어가 패널의 왼쪽 위나 오른쪽 아래 경계를 벗어나면 해당 위치에 아이콘을 표시하는 대칭형 UI를 실험했다. - 아이콘을 패널 가장자리에 고정하는 것은 쉬웠지만, 레이어 이름이 스크롤될 때 배경이 일부 요소 아래로 지나가고 다른 텍스트는 가려야 했다. - 컴포넌트가 위에 놓인 요소의 정확한 위치를 알지 못해 다음 문제가 발생했다. - 배경이 텍스트를 제대로 덮지 못함 - 레이어 행 구조와 불투명 배경 처리가 충돌함 - 스크롤 상태에 따라 시각적 가림 처리가 달라짐 - 디자인 측면에서도 왼쪽 상단에 레이어 이름의 끝부분이 들쭉날쭉하게 남아 시각적으로 어색했다. - 결과적으로 대칭성을 유지하려던 해결책이 새로운 문제를 만들었고, 패널 상단의 빈 공간을 어떻게 다룰지 재검토하게 됐다. ## 두 번째 시도: 선택한 레이어로 자동 스크롤 - 캔버스에서 선택한 레이어가 Layers 패널에 보이지 않으면 해당 레이어가 패널 중앙에 오도록 자동으로 가로 스크롤하는 방식을 실험했다. - 이론적으로는 편리했지만, 실제 사용에서는 가로와 세로 스크롤이 동시에 발생해 사용자가 현재 위치를 잃었다. - 특히 깊게 중첩된 레이어를 선택하면 부모 레이어가 화면에서 사라져 계층 구조를 파악하기 어려웠다. - 사용자는 작업 대상의 이름뿐 아니라 다음 정보도 함께 확인해야 한다. - 어떤 부모 아래에 있는지 - 계층상 어디에 위치하는지 - 특정 컴포넌트의 일부인지 - 화면을 갑자기 다른 위치로 이동시키는 동작은 Google Maps가 주행 중 지도를 갑자기 다른 장소로 옮기는 것과 비슷한 혼란을 유발했다. - 도구가 사용자를 돕기보다 현재 작업에 대한 정신적 모델을 깨뜨리는 결과가 되어 채택되지 않았다. ## 세 번째 시도: 레이어 이름 변경 중 스크롤 - 가로 스크롤 도입으로 레이어 이름을 편집하는 동안 다른 레이어로 스크롤할 때의 동작도 새롭게 정의해야 했다. - 사용자가 이름 입력 중 다른 레이어를 보기 위해 스크롤하면, 입력 중인 텍스트를 자동으로 새 이름으로 확정하는 방안을 검토했다. - 그러나 스크롤은 이름 변경을 확정했다는 충분히 강한 신호가 아니었다. - 이 동작을 채택하면 사용자가 의도하지 않게 레이어 이름을 변경할 위험이 있었다. - 따라서 스크롤과 편집 확정의 관계를 별도로 설계해야 한다는 점이 드러났다. ## 실용적인 시사점 - 복잡한 UI에서는 정적인 화면 설계만으로 모든 상태를 예측하기 어렵기 때문에 실제 코드 기반 프로토타이핑이 유용하다. - 자동 이동은 편리함보다 사용자의 공간적·계층적 맥락 보존을 우선해야 한다. - 스크롤, 선택, 편집처럼 서로 다른 의도를 가진 동작을 하나의 암묵적 신호로 처리하면 오작동과 혼란이 발생한다. - 특히 가상화된 계층형 UI에서는 렌더링 구조, 텍스트 가림, 상태 변화까지 함께 고려해야 한다.

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

사용자 인터페이스FigmaReactJavaScript+4

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

UI3로의 전환:

Figma는 2025년 4월 30일부터 기존 UI2를 종료하고, 작업 영역을 넓히고 기능을 간소화한 UI3로 완전히 전환한다. UI3는 단순한 배치 변경이 아니라 변수 인식, 색상 선택, 메뉴 정리 등 실제 작업 흐름을 더 직관적이고 효율적으로 만드는 데 초점을 맞췄다. Figma는 사용자 피드백을 반영한 추가 개선을 거친 뒤, 향후에는 UI3에서만 제공되는 새로운 기능과 Properties 패널 개선에 집중할 계획이다. ## UI3 전환과 UI2 종료 - Figma는 4월 30일 기존 인터페이스인 UI2를 종료한다. - Config를 앞두고 UI3 전용 기능과 새로운 사용 경험을 제공하기 위해 전면 전환을 결정했다. - UI3의 주요 방향은 다음과 같다. - 캔버스와 작업물을 더 넓게 보여주기 - 인터페이스를 간결하게 만들기 - 반복적인 작업을 줄이고 기능 접근성을 높이기 - 향후 확장될 기능을 UI3를 기반으로 제공하기 ## 사용자 피드백을 반영한 개선 Figma는 UI3 공개 이후 사용자의 의견을 바탕으로 여러 세부 요소를 수정하고 있다. - 중복성이 있던 “Reset others” 아이콘을 교체한다. - Boolean 연산 관련 문구를 더 단순하게 정리한다. - Overflow 메뉴에서 중복으로 표시되는 액션을 제거한다. - 의미를 명확히 전달하도록 마스크 아이콘을 변경한다. - “Tidy up” 기능의 동작과 경험을 UI2에 더 가깝게 되돌린다. - 전환 이후에는 Properties 패널을 중심으로 추가 개선을 진행할 예정이다. ## 새로운 인터페이스에 대한 적응 - 기존 작업 흐름과 단축키에 익숙한 사용자는 처음에는 UI3 전환을 부담스럽게 느낄 수 있다. - 그러나 일부 사용자는 몇 시간 만에 자연스럽게 적응했다고 평가했다. - 다른 사용자는 기존의 근육 기억을 바꾸는 데 약 일주일이 걸렸지만, 이후에는 UI3를 선호하게 되었다고 전했다. - 글의 관점은 UI3가 단순히 “다른” 인터페이스가 아니라, 익숙해진 뒤에는 더 나은 작업 방식을 제공한다는 것이다. ## 스마트해진 Eyedropper 도구 UI3의 색상 추출 도구는 기존 단축키 `I`를 그대로 사용하면서 변수와 스타일을 인식하도록 개선되었다. - 캔버스를 살펴보는 동안 Eyedropper 도구가 계속 활성화된 상태로 유지된다. - `Tab` 키를 사용해 Hex, HSB, RGB 등 다양한 색상 모델 사이를 전환할 수 있다. - 단순한 색상 값뿐 아니라 다음 항목을 감지한다. - 색상 스타일 - 변수 - 특정 요소에 적용된 디자인 토큰 - 요소를 선택한 뒤 Eyedropper를 실행하고 캔버스의 색상 위에 마우스를 올리면, Figma가 해당 색상에 사용된 스타일이나 변수를 표시한다. - 작업 중인 위치에서 바로 변수를 생성할 수 있어, 색상을 확인하고 디자인 시스템에 연결하는 과정이 빨라진다. ## 실용적인 결론 UI3 전환을 앞둔 사용자는 미리 새 인터페이스에 적응하고, 특히 Eyedropper의 변수·스타일 인식 기능과 변경된 메뉴 구조를 익혀두는 것이 좋다. 기존 UI2의 위치와 동작을 그대로 찾기보다, 캔버스 중심 설계와 디자인 토큰 활용을 전제로 새로운 작업 흐름을 익히는 것이 전환에 효과적이다.

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

사용자 인터페이스Figma디자인 시스템프로토타이핑+1

figma·2024년 12월 4일·3분 읽기큐레이션 요약

요점 정리: 제

피그마의 2024년 업데이트는 사용자 커뮤니티와의 상호작용을 바탕으로 제품과 브랜드를 함께 확장한 과정이었다. 180개의 신규 릴리스, 1만 명이 참석한 Config, 전 세계 220개 이상의 Friends of Figma 그룹을 통해 피그마는 디자인뿐 아니라 개발·마케팅·제품팀 전체를 위한 도구로 영역을 넓혔다. 글은 주요 제품 출시와 브랜드 개편, 커뮤니티 콘텐츠를 되돌아보며 “피그마가 만들고 사용자가 완성한다”는 메시지를 강조한다. ## 제품 기능과 워크플로 확장 - UI3를 개선해 사용자가 인터페이스를 더 세밀하게 제어할 수 있도록 했다. - AI 도구를 재정비해 기능을 무작정 늘리기보다 의도와 활용성을 중심으로 발전시켰다. - Dev Mode를 강화해 디자인과 코드 사이의 연결을 원활하게 만들었다. - 프레젠테이션 제작 도구인 Figma Slides를 출시해 디자인 결과물을 발표하고 공유하는 단계까지 지원했다. - 2024년에는 대규모 기능 출시뿐 아니라 사용성을 높이는 작은 업데이트까지 총 180개의 릴리스를 진행했다. ## Config를 통한 커뮤니티 확장 - 2024년 Config에는 1만 명 이상이 샌프란시스코에 모여 제품 개발의 미래를 논의했다. - 피그마는 Config 2025의 얼리버드 티켓을 소개하며 행사를 지속적으로 확대하고 있다. - 발표자들의 강연에서 영감을 얻는 방법과 기억에 남는 세션을 만드는 방식을 공유했다. - 전 세계 220개 이상의 Friends of Figma 그룹이 커뮤니티 기반 학습과 교류를 뒷받침했다. ## 새로운 도구에 맞춘 브랜드 개편 - 개발자, 마케터, 제품팀 등 더 넓은 사용자를 지원하게 되면서 브랜드 정체성도 함께 개편했다. - 새로운 시각적 아이덴티티와 서체를 도입했다. - 피그마 자체 도구를 사용해 웹 시스템을 재설계했다. - 컴포넌트를 점검하고 정리해 일관성을 높였으며, 변수·색상·타이포그래피 스타일을 활용해 향후 확장 가능한 디자인 시스템을 구축했다. - 웹 제작 워크플로를 간소화하고 팀 간 협업 효율을 높이는 데 초점을 맞췄다. ## 커뮤니티가 만든 활용 방식 - Figma Slides에서는 커뮤니티 템플릿을 활용해 발표의 완성도와 표현력을 높이는 사례를 소개했다. - Ableton Note 앱 디자이너 Pablo Sánchez는 예상 밖의 경험을 만드는 7가지 디자인 원칙을 공유했다. - 핵심은 사용자를 놀라게 하는 요소를 설계하기 전에 디자이너 스스로 작업 과정에서 즐거움과 호기심을 느끼는 것이다. - One North의 Nick Villapiano는 개발자도 디자인 과정에 적극 참여해야 한다고 주장했다. - Dev Mode를 단순한 개발 전달 도구가 아니라 개발자가 디자인 의사결정에 기여하는 협업 공간으로 바라본다. ## 사용자 피드백을 통한 제품 발전 - 피그마의 업데이트는 커뮤니티의 작업 방식과 제작 결과물에 대한 관찰에서 출발한다. - 새로운 기능은 출시 자체보다 사용자가 실제 프로젝트에서 어떻게 활용하고 변형하는지가 중요하다고 설명한다. - 제품, 행사, 브랜드 시스템, 교육 콘텐츠를 함께 발전시키며 피그마 생태계를 확장하는 전략을 보여준다. 피그마를 사용하는 팀이라면 2024년 기능을 단순히 추가된 도구로 보기보다, UI3·AI·Dev Mode·Slides를 현재 협업 프로세스에 어떻게 연결할지 점검하는 것이 유용하다. 특히 개발자를 초기 디자인 논의에 참여시키고, 디자인 시스템을 실제 제품과 웹 경험에 일관되게 적용하는 방식이 실질적인 개선으로 이어질 수 있다.

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

사용자 인터페이스Figma디자인 시스템dev-mode+2

figma·2024년 9월 30일·4분 읽기큐레이션 요약

Figma on Figma:

Figma UI3는 작업물을 화면의 중심에 두고 사용자의 작업 흐름을 방해하지 않는 것을 목표로 2년 넘게 설계·개선된 인터페이스다. 초기에는 탐색·속성 패널을 플로팅 방식으로 바꿨지만, 실제 사용 데이터와 피드백을 통해 캔버스 공간과 작업 속도를 해친다는 점을 확인하고 고정 패널로 되돌렸다. Figma는 명확한 미래 비전을 세우되, 사용자 피드백과 성능 지표에 따라 과감하게 설계를 수정하는 접근을 강조한다. ## 작업 중심 인터페이스를 위한 UI3 - UI3의 핵심 목표는 캔버스와 디자이너의 작업을 중심에 두고 불필요한 방해 요소를 줄이는 것이다. - 팀은 2년 이상 다양한 인터페이스를 반복적으로 실험했으며, 출시 이후에도 기존의 핵심 설계 결정을 되돌렸다. - “완성도와 작업 흐름”처럼 직접 측정하기 어려운 요소는 정량 지표만으로 판단하기 어렵기 때문에 사용자 의견을 수집하고 신중하게 해석했다. - UI3는 2024년 10월 10일 모든 사용자에게 제공될 예정이었다. ## 도킹 패널과 플로팅 패널 실험 - 탐색 패널과 속성 패널은 Figma 인터페이스의 핵심 요소였기 때문에 다양한 실험이 진행됐다. - 마우스를 올릴 때만 나타나는 패널 - 캔버스 위에 떠 있는 패널 - 제품 전반에 일관되게 적용되는 플로팅 UI - 최종적으로 초기 UI3에서는 패널을 플로팅 방식으로 제공했다. - 플로팅 패널의 장점은 단순하고 친근한 인터페이스를 만들며, 제품 생태계 전체에 일관된 경험을 제공할 수 있다는 점이었다. - 그러나 오픈 베타 이후 실제 사용 데이터를 분석한 결과 다음 문제가 드러났다. - 작은 화면에서 캔버스 공간을 과도하게 차지함 - 디자인이 패널 뒤에서 일부 가려져 시각적으로 산만함 - 눈금자가 디자인에서 멀어져 활용성이 떨어짐 - 장시간 Figma를 사용하는 사용자들의 작업 속도를 저하시킴 - Figma는 “속도는 기능”이라는 판단 아래, 정식 출시에서는 탐색·속성 패널을 다시 고정했다. - 다만 패널 크기는 조절할 수 있도록 해 사용자가 작업 환경에 맞게 유연하게 배치할 수 있게 했다. - 플로팅 UI 자체가 완전히 사라지는 것은 아니다. - Figma Design의 Minimize UI 상태 - Figma Slides의 그리드 보기 - FigJam의 기본 인터페이스 - 모든 Figma 제품의 하단 툴바 에서는 플로팅 요소가 유지된다. ## Minimize UI와 작업 집중 - 기존의 Hide UI 기능은 작업물을 전면에 보여주지만, UI를 숨기거나 다시 표시하는 방식이 다소 극단적이고 제한적이었다. - UI3의 Minimize UI는 측면 패널을 접어 캔버스를 넓히면서도 필요할 때 도구에 쉽게 접근할 수 있도록 설계됐다. - 특히 다음 환경에서 유용하도록 개선됐다. - 작은 화면 - 분할 화면 - 원격·하이브리드 근무 환경 - Figma는 UI가 항상 많이 표시되어야 한다는 전제 대신, “작업이 캔버스의 중심이어야 한다”는 원칙을 장기적인 기준으로 삼았다. ## 확장성을 고려한 정보 구조 - UI3에서는 기능을 단순히 재배치하는 데 그치지 않고, 앞으로 추가될 기능을 수용할 수 있는 구조를 만들려 했다. - 기존 인터페이스는 새로운 기능을 넣을 때마다 화면에 요소를 억지로 끼워 넣는 방식에 가까웠다. - 새 탐색 패널은 다음과 같은 논리적 순서로 정보를 배치한다. - 파일 이름 - 브랜치 이름 - 프로젝트 이름 - 페이지 - 레이어 - 향후 파일 이동이나 탐색 방식이 추가되더라도 기존 구조를 크게 훼손하지 않고 확장할 수 있도록 설계했다. - 이는 현재의 편의성뿐 아니라 아직 구현되지 않은 미래의 기능까지 고려한 정보 구조다. ## 변화하는 인터페이스 관습과 블렌드 모드 - Figma는 UI3에서 과거 인터페이스의 일부 관습을 그대로 유지하기보다, 현재 사용자가 익숙하게 받아들이는 패턴을 재검토했다. - 예를 들어 다음과 같은 방식은 기술적으로는 다소 비직관적일 수 있지만 널리 정착됐다. - Shift 키를 사용하는 명령 단축키 - 화면에 거의 드러나지 않는 스크롤바 - 블렌드 모드 역시 과거의 사용 방식과 새로운 인터페이스 관습 사이의 균형을 맞추는 대상으로 다뤄졌다. - 제공된 글 내용은 블렌드 모드 섹션 초반에서 끝나므로, 구체적인 변경 사항은 확인할 수 없다. UI3의 가장 실용적인 교훈은 큰 폭의 redesign도 가설로 시작하되 실제 사용성 검증을 거쳐 수정해야 한다는 점이다. 새로운 UI를 도입할 때는 시각적 새로움보다 캔버스 공간, 작업 속도, 화면 크기별 사용성, 장시간 사용자의 효율을 우선적으로 측정하는 것이 바람직하다.

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

사용자 인터페이스Figma디자인 시스템사용자 경험+2

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

입문하기: 첫 프로덕트

제품 디자인의 첫 직무를 얻으려면 포트폴리오를 통해 실력뿐 아니라 문제 해결 과정과 제품 사고를 보여줘야 한다. 특히 결과물 자체보다 “왜 그렇게 결정했는가”를 설명하고, 제약·트레이드오프·배운 점까지 설득력 있게 전달하는 것이 중요하다. Figma는 인턴과 신입 디자이너에게 관찰자가 아닌 제품에 기여하는 구성원으로서의 창의성과 새로운 관점을 기대한다. ## Figma의 초기 커리어 기회 - Figma는 매년 인턴과 신입 졸업생을 제품 디자인 팀에 영입한다. - 초기 경력 디자이너도 단순히 업무를 관찰하는 데 그치지 않고 제품에 새로운 아이디어와 에너지를 더한다. - 글은 Figma의 채용 기준과 초기 커리어 지원 방법, 인터뷰 과정 등을 안내한다. - 인터뷰에는 Figma 제품 디자이너인 Chia Amisola, Julia Han, Keeyen Yeo, Kelly Hu, Tammy Taabassum의 경험과 조언이 담겼다. ## 포트폴리오의 기본 원칙 - 포트폴리오는 첫인상을 결정하므로 자신의 역량, 창의성, 디자인 프로세스, 결과의 영향력을 가장 잘 보여주는 작업을 앞에 배치해야 한다. - 사이트 제작 도구, 프로젝트 개수, 시각적 스타일보다 다음 요소가 더 중요하다. - 최고의 작업을 선별했는가 - 프로젝트를 이해하기 쉬운 이야기로 구성했는가 - 방문자가 콘텐츠를 쉽게 탐색할 수 있는가 - 포트폴리오가 자신의 관점과 개성을 드러내는가 - 포트폴리오의 형식은 개인적일 수 있으며, 정해진 템플릿을 따르기보다 자신과 작업을 잘 표현하는 방식을 선택하면 된다. ## 가장 강한 프로젝트를 앞에 배치하기 - 첫 번째 프로젝트는 전체 포트폴리오의 기준을 설정하므로 가장 종합적으로 자신의 능력을 보여주는 작업을 선택해야 한다. - 어떤 프로젝트를 앞에 둘지 고민된다면, 가장 자연스럽게 설명할 수 있고 설득력 있는 이야기를 들려줄 수 있는 작업을 고르는 것이 좋다. - 좋은 프로젝트 사례에는 다음 내용이 포함된다. - 명확한 문제 정의 - 프로젝트의 주요 단계와 마일스톤 - 결과에 대한 해석과 결론 - 성과를 측정한 지표 - 진행 과정에서 얻은 교훈 - 다시 한다면 바꾸고 싶은 점 - 프로젝트가 큰 성공을 거두지 못했더라도 실패 원인과 배운 점을 설명할 수 있다면 충분히 강력한 사례가 될 수 있다. ## 결과보다 디자인 의사결정이 중요한 이유 - 제품 디자인 포트폴리오에서는 최종 화면보다 각 선택의 이유를 설명하는 능력이 중요하다. - 색상, 컴포넌트, 스타일, 문구 등 모든 요소는 의도적인 결정으로 다뤄야 한다. - 설명할 때 다음 내용을 구체적으로 제시해야 한다. - 어떤 문제를 해결하려 했는가 - 고려한 대안은 무엇이었는가 - 각 대안의 장단점은 무엇이었는가 - 시간·기술·비즈니스 등 어떤 제약이 있었는가 - 최종 선택으로 인해 발생한 트레이드오프는 무엇인가 - 이러한 설명은 단순히 화면을 제작하는 능력을 넘어, 제품의 맥락과 다양한 선택의 영향을 이해하고 있음을 보여준다. ## 포트폴리오 제작에 활용할 수 있는 자료 - Figma는 포트폴리오 발표 구성과 제작을 돕는 커뮤니티 템플릿을 제공한다. - 활용 가능한 자료에는 다음이 포함된다. - 제품 디자이너 포트폴리오 발표 가이드 및 템플릿 - 여러 기기 화면을 보여주는 디바이스 목업 - 15페이지 분량의 제품 디자인 포트폴리오 발표 템플릿 - HTML 포트폴리오 템플릿 - UI·UX 디자이너용 개인 포트폴리오 템플릿 - 템플릿은 완성된 정답이라기보다 작업의 구조를 잡고 빠르게 시작하기 위한 도구로 활용하는 것이 적절하다. 프로젝트를 많이 넣기보다 가장 잘 설명할 수 있는 작업을 선별하고, 화면보다 문제 정의·과정·의사결정·성과·배움을 중심으로 구성하는 것이 효과적이다. 포트폴리오를 완성한 뒤에는 각 선택의 “왜”를 말로 설명하는 연습을 해보는 것이 좋다.

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

사용자 인터페이스Figma사용자 경험생성형 AI+3

figma·2024년 8월 14일·2분 읽기큐레이션 요약

Figma의 3C:

Figma 입문자는 개별 기능을 순서대로 외우기보다 **생성(Creation), 사용자화(Customization), 협업(Collaboration)**이라는 세 가지 관점으로 학습하는 것이 효과적이다. 기본 요소를 만들고, 다양한 상황에 맞게 유연하게 개선한 뒤, 팀원들이 재사용할 수 있도록 공유하는 단계적 접근이 Figma 활용 능력과 협업 역량을 함께 높여준다. 명확한 목표와 일정, 그리고 직접 시도하고 질문하는 학습 태도도 중요하다. ## 목표·일정·학습 태도 설정 - 학습을 시작하기 전에 무엇을 배우고 어떻게 활용할지 목표를 적어 둔다. - 예시 목표: - Figma와 자신의 디자인 프로세스에 필요한 기본 도구 익히기 - 효율적으로 협업하는 팀원 되기 - 예시 일정: - **30일:** 기본 도구, 협업 방식, 파일 정리와 관리 습관 이해 - **60일:** 몇 가지 프로젝트에 적용해 부족한 부분 파악 - **90일:** 고급 기능을 실제 업무 흐름에 도입 - 권장 학습 태도: - 직접 만들고, 망가뜨리고, 다시 만들며 기능을 실험한다. - 작업물을 공유하고 Slack, 소셜 미디어, Figma Community Forum 등에서 질문한다. - 새로운 도구와 프로세스에 익숙해지는 데 시간이 걸리므로 필요할 때 휴식한다. ## 세 가지 C로 배우는 Figma - **Creation(생성)** - 기본적인 디자인 요소를 직접 만든다. - 에디터의 핵심 조작과 기본 도구 사용법을 익히는 단계다. - **Customization(사용자화)** - 만든 요소를 더 유연하고 재사용 가능하게 만든다. - 다양한 사용 사례에 대응하도록 고급 기능을 적용한다. - **Collaboration(협업)** - 완성한 디자인을 팀원과 공유한다. - 다른 사람이 자신의 파일에서 사용할 수 있도록 컴포넌트와 문서를 제공한다. - 세 단계는 사다리의 각 발판처럼 연결된다. 먼저 요소를 만들고, 이를 확장·정리한 뒤, 팀의 공동 자산으로 공유해야 효과적인 협업이 가능하다. ## 버튼 제작으로 이해하는 학습 과정 - 글은 버튼을 만드는 과정을 세 가지 C의 사례로 제시한다. - 버튼을 직접 만든다: **생성** - 버튼을 컴포넌트로 전환한다: **사용자화** - 다른 사람이 사용할 수 있도록 게시한다: **협업** - 최종적으로는 하나의 버튼이 아니라 여러 상황에서 재사용할 수 있는 버튼 세트를 구축하는 방향으로 발전한다. - 이 과정을 통해 Figma 기능 자체보다 실제 업무 흐름에 기능이 어떻게 연결되는지 이해할 수 있다. ## 학습에 활용할 자료 - Figma Help Center에서 기능별 상세 설명을 확인할 수 있다. - Figma YouTube 채널에서는 튜토리얼, 라이브 방송 녹화본, 기능 출시 영상을 제공한다. - 정기적인 온라인 이벤트와 Figma Community의 플레이그라운드 파일을 통해 실습할 수 있다. - 특히 기능을 따로 암기하기보다 하나의 디자인 요소를 완성해 가며 세 가지 C를 순서대로 적용하는 방식이 효과적이다. 처음부터 모든 기능을 익히려 하기보다 작은 요소 하나를 만들고, 재사용 가능한 컴포넌트로 발전시킨 뒤, 팀과 공유하는 실습부터 시작하는 것이 좋다.

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

사용자 인터페이스Figma디자인 시스템프로토타이핑+2

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

'디자인 제작' 기능

Figma는 AI 기능 ‘Make Designs’가 실제 앱과 유사한 디자인을 생성하는 문제를 발견해 일시적으로 중단했다. 원인은 모델 자체가 아니라, 충분히 검토되지 않은 디자인 시스템의 컴포넌트와 예시 화면이었다. Figma는 관련 자산을 제거하고 QA 절차를 개선한 뒤, 기능을 ‘First Draft’라는 이름으로 재출시했다. ## Make Designs의 작동 방식 - 사용자의 프롬프트, AI 모델, 디자인 시스템의 컴포넌트와 예시를 결합해 초기 UI 시안을 생성한다. - OpenAI의 GPT-4o와 Amazon Titan 등 상용 모델을 사용했으며, 별도 학습이나 파인튜닝은 진행하지 않았다. - 모바일·데스크톱용으로 제작한 두 개의 디자인 시스템에 수백 개의 컴포넌트와 조합 예시를 포함했다. - 모델은 버튼, 헤드라인, 이미지 등 컴포넌트를 선택·배치하고, 속성과 스타일을 설정해 완성된 화면을 구성한다. - Amazon Titan의 확산 모델이 디자인에 필요한 이미지를 생성한다. - 결과물은 완성품이 아니라 디자이너가 수정하고 발전시키기 위한 ‘첫 초안’을 목표로 했다. ## 실제 앱과 유사해진 원인 - Config 2024 직전 디자인 시스템에 새 컴포넌트와 예시 화면이 추가됐다. - 일부 자산이 실제 서비스의 UI 요소와 충분히 유사했지만, 추가된 자산을 철저히 검토하지 못했다. - 특정 프롬프트를 입력하면 해당 자산이 결과물에 포함될 수 있었다. - 한 디자이너가 날씨 앱을 생성했을 때 Apple의 기본 앱과 유사한 화면이 나온 것을 지적하면서 문제가 드러났다. - Figma는 문제의 원인이 기반 모델의 학습 데이터가 아니라 자체적으로 제공한 디자인 시스템과 예시 자산에 있다고 판단했다. ## Figma의 대응 - 문제를 확인한 즉시 관련 디자인 시스템 자산을 제거했다. - Make Designs 기능을 일시적으로 비활성화했다. - 기능 재개를 보류하고 디자인 시스템에 대한 개선된 QA 프로세스를 마련하기로 했다. - Visual Search, 레이어 이름 변경, 텍스트 번역 등 다른 Figma AI 기능은 제한적 베타로 계속 제공했다. ## 향후 방향과 디자이너의 역할 - Make Designs의 초기 이름은 ‘First Draft’였으며, 완성된 디자인보다 작업을 시작하기 위한 출발점을 의미한다. - 향후에는 기업이 자체 디자인 시스템을 연결해 컴포넌트 검색·조합·설정에 드는 시간을 줄이는 것이 목표다. - AI는 초기 아이디어와 구조를 제시할 수 있지만, 의미 있는 사용자 경험을 만들고 완성하는 일은 여전히 디자이너의 역할이다. - Figma는 제한적 베타를 통해 실제 사용 과정에서 문제를 배우고 개선하겠다고 밝혔다. - 편집자 주에 따르면 기능은 이후 개선 사항과 함께 ‘First Draft’라는 새 이름으로 재활성화됐다. AI 기반 디자인 생성 기능은 모델 성능뿐 아니라 입력되는 디자인 시스템과 예시 자산의 품질 관리가 중요하다. 따라서 자동 생성 결과를 완성품으로 신뢰하기보다, 철저한 QA와 디자이너의 검토를 거치는 초안 생성 도구로 활용하는 것이 바람직하다.

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

사용자 인터페이스AI디자인 시스템생성형 AI+3