figma2026년 3월 5일

슬롯(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)로 흉내 내던 패턴을 더 직접적으로 표현할 수 있다. - 기본 콘텐츠가 예측 가능한 경우에는 미리 채운 슬롯을, 콘텐츠 입력이 필수인 경우에는 빈 슬롯을 사용하는 것이 적절하다. ## 도입 시 고려할 기준 - 모든 컴포넌트에 한꺼번에 슬롯을 적용하기보다, 실제 우회 사용이 많이 발생하는 소수의 고빈도 컴포넌트부터 시작한다. - 구조는 유지되지만 콘텐츠가 자주 바뀌는 영역을 우선 찾는다. - 슬롯의 기본 콘텐츠가 사용자에게 충분한 맥락을 주는지, 혹은 빈 상태가 명확한 행동을 유도하는지 검토한다. - 이를 통해 디자인 시스템의 통제력은 유지하면서도 실제 제품에 필요한 유연성을 확보할 수 있다.

ui-designfigmadesign-systemsdesign-to-development+1

figma2026년 2월 16일

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로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

ui-designfigmaaiprototyping+2

figma2025년 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를 디자인 프로세스에 효과적으로 통합하여 고도화된 사용자 경험을 신속하게 제공할 수 있는 역량을 갖추어야 합니다. 이러한 변화의 흐름 속에서 디자인과 개발의 경계를 허물고 협업 효율을 극대화하는 것이 미래 소프트웨어 시장의 핵심 경쟁력이 될 것입니다.

ui-designfigmagen-aiux-design+3

figma2025년 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)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

ui-designfigmadesign-systemsproduct-design+2

figma2025년 6월 17일

딜런 필드가 전하는 (새 탭에서 열림)

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의 사례는 창업자의 이력이 반드시 한 방향으로만 이어질 필요는 없다는 점을 보여준다. 낯선 경험에서 얻은 끈기와 논리적 사고, 과감한 실험, 초기의 실패를 인정하고 방향을 수정하는 태도가 새로운 제품을 만드는 데 실질적인 자산이 될 수 있다.

ui-designfigmaproduct-designjavascript+2

figma2025년 4월 30일

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의 파일을 분석하고 변형해보면 학습 내용을 실제 디자인 역량으로 발전시킬 수 있다.

ui-designfigmaprototypinginteraction-design+1

figma2025년 4월 15일

버전 관리: 피그마 (새 탭에서 열림)

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

ui-designfigmareactjavascript+4

figma2025년 3월 24일

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의 위치와 동작을 그대로 찾기보다, 캔버스 중심 설계와 디자인 토큰 활용을 전제로 새로운 작업 흐름을 익히는 것이 전환에 효과적이다.

ui-designfigmadesign-systemsprototyping+1

figma2024년 12월 4일

요점 정리: 제 (새 탭에서 열림)

피그마의 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를 현재 협업 프로세스에 어떻게 연결할지 점검하는 것이 유용하다. 특히 개발자를 초기 디자인 논의에 참여시키고, 디자인 시스템을 실제 제품과 웹 경험에 일관되게 적용하는 방식이 실질적인 개선으로 이어질 수 있다.

ui-designfigmadesign-systemsdev-mode+2

figma2024년 9월 30일

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를 도입할 때는 시각적 새로움보다 캔버스 공간, 작업 속도, 화면 크기별 사용성, 장시간 사용자의 효율을 우선적으로 측정하는 것이 바람직하다.

ui-designfigmadesign-systemsux+2

figma2024년 8월 28일

입문하기: 첫 프로덕트 (새 탭에서 열림)

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

ui-designfigmagen-aiproduct-design+3

figma2024년 8월 14일

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를 순서대로 적용하는 방식이 효과적이다. 처음부터 모든 기능을 익히려 하기보다 작은 요소 하나를 만들고, 재사용 가능한 컴포넌트로 발전시킨 뒤, 팀과 공유하는 실습부터 시작하는 것이 좋다.

ui-designfigmadesign-systemsprototyping+2

figma2024년 7월 16일

'디자인 제작' 기능 (새 탭에서 열림)

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와 디자이너의 검토를 거치는 초안 생성 도구로 활용하는 것이 바람직하다.

ui-designaidesign-systemsgen-ai+3

figma2024년 6월 25일

AI 시대의 좋은 디자인이란 무엇 (새 탭에서 열림)

AI가 제품 개발을 대중화할수록 제품을 차별화하는 요소는 디자인이 된다. 모바일 시대에 데스크톱 경험을 작은 화면에 그대로 옮겼던 것처럼, 초기 AI 제품도 단순한 챗봇과 템플릿에 머물고 있지만 새로운 상호작용 패턴을 발견할 가능성이 크다. 따라서 AI 시대의 좋은 디자인은 기술 자체를 좇기보다 공감, 창의성, 실제 사용자 문제 해결이라는 변하지 않는 원칙을 바탕으로 AI와 디자이너의 역할을 재정의하는 것이다. ## AI 시대에 디자인이 더 중요해지는 이유 - AI는 간단한 프롬프트만으로 코드, 디자인, 애플리케이션 전체를 생성할 수 있어 아이디어에서 구현까지의 속도를 크게 높인다. - 더 많은 사람이 제품 제작 과정에 참여할 수 있게 되지만, 결과적으로 비슷한 제품이 빠르게 양산될 가능성도 커진다. - 제품의 차별화는 기능 구현보다 다음과 같은 디자인 경험에서 나타날 수 있다. - 풍부한 상호작용 - 직관적인 제스처 - AI라는 매체에 적합한 새로운 사용 패턴 - 2007년 아이폰 등장 직후 많은 기업이 기존 데스크톱 화면을 모바일에 단순히 축소했던 것처럼, 현재의 단순 챗봇과 템플릿형 AI 제품도 새로운 기술에 적응하는 초기 단계로 볼 수 있다. - 새로운 기술의 잠재력을 실현하려면 충분한 시간과 반복적인 실험이 필요하다. ## 좋은 디자인의 원칙을 AI가 이해하도록 만들기 - Figma는 디자인 시스템을 활용해 UI의 첫 시안을 생성하는 AI 기능을 개발하면서, 먼저 “좋은 디자인”이 무엇인지 정의해야 했다. - LLM은 본질적으로 텍스트 기반 모델이므로 글쓰기나 코딩에는 강하지만, 시각적·구조적 판단이 필요한 UI 디자인을 생성하는 일은 더 어렵다. - 모든 디자인 규칙을 AI에 전달하는 방식은 현실적이지 않다. - 좋은 디자인의 모든 세부 사항을 유한한 규칙으로 정의하기 어렵다. - 방대한 규칙을 하나의 프롬프트에 넣으면 토큰 제한에 걸린다. - 상황에 따라 달라지는 디자인 판단까지 규칙화하기도 어렵다. - 이에 따라 어떤 UI에도 대체로 적용할 수 있는 작지만 강력한 원칙으로 디자인 지식을 압축해야 한다. - 디자인을 가르치는 과정처럼, 디자이너의 직관을 다른 사람이 실행할 수 있는 명확한 원칙으로 분해하는 작업이 중요하다. - 좋은 원칙은 다음 조건을 갖춰야 한다. - 명확할 것 - 구체적일 것 - 실제 제작 과정에서 적용 가능할 것 - 다양한 UI 상황에 일반화될 것 ## 디자인에서 코드까지의 순환 고리 단축 - AI는 디자인 결과물을 코드로 옮기는 시간을 줄여 제품 제작 주기를 단축할 수 있다. - 디자인과 개발 사이의 간극이 줄어들면 더 많은 시안을 빠르게 구현하고 검증할 수 있다. - 중요한 것은 단순히 코드를 자동 생성하는 것이 아니라, 디자인 의도와 사용자 경험이 구현 단계에서도 유지되도록 하는 것이다. - 빠른 생성 능력은 한 번에 정답을 얻는 수단이라기보다 실험과 반복을 늘리는 수단으로 활용해야 한다. ## 실용주의와 반복적인 실험 - AI 기술이 빠르게 변하는 상황에서는 완벽한 미래상을 기다리기보다 현재 가능한 도구로 실제 문제를 해결하는 접근이 필요하다. - 기술을 사용하기 위한 기능보다 사용자에게 실질적인 가치를 주는 경험을 우선해야 한다. - 초기 AI 제품의 어색함은 실패라기보다 새로운 상호작용 방식을 발견하기 위한 실험의 일부다. - 디자이너는 생성된 결과를 그대로 받아들이기보다 사용자 맥락에 맞는지 검토하고, 반복적인 수정과 검증을 통해 품질을 높여야 한다. ## 디자이너와 AI의 공동 창작 - AI는 디자이너를 단순히 대체하는 자동화 도구가 아니라 아이디어를 확장하고 제작 속도를 높이는 협업 파트너가 될 수 있다. - AI가 초안과 반복 작업을 담당하면 디자이너는 문제 정의, 사용자 공감, 우선순위 설정, 창의적 판단에 더 집중할 수 있다. - 공동 창작 모델에서는 인간과 AI의 강점을 결합하는 작업 분담이 중요하다. - AI: 빠른 생성, 변형, 탐색, 반복 작업 - 디자이너: 목적 설정, 맥락 이해, 품질 판단, 사용자 관점의 의사결정 - AI가 발전할수록 디자이너의 역할이 사라지는 것이 아니라, 무엇을 만들고 왜 만들어야 하는지 결정하는 능력이 더욱 중요해진다. AI를 도입할 때는 생성 속도 자체보다 사용자 문제와 디자인 원칙을 먼저 정의하는 것이 좋다. 작은 원칙을 명확히 정리하고, AI로 여러 시안을 빠르게 만든 뒤 사람의 판단과 사용자 검증을 통해 반복 개선하는 방식이 가장 현실적인 접근이다.

ui-designfigmaaidesign-systems+2

figma2024년 6월 25일

새로워진 Figma 내부 (새 탭에서 열림)

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다. ## UI3를 시작한 배경 - Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다. - 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다. - UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다. - 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다. ## UI3가 해결하려는 네 가지 문제 - **UI보다 사용자의 아이디어를 중심에 두기** - 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다. - 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다. - **신규 사용자와 전문 디자이너의 요구 균형** - 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다. - 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다. - 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다. - **변화하는 디자인 방식에 대응** - 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다. - 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다. - **Figma의 미래를 위한 기반 마련** - Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다. - Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다. ## 캔버스 공간을 넓히는 인터페이스 - 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다. - 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다. - 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다. - 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다. - 최종적으로 다음과 같은 방향을 선택했다. - 크기를 조절할 수 있는 패널 - 캔버스 하단의 얇은 새 툴바 - 상단 영역을 비워 더 넓고 여유로운 화면 구성 - 필요할 때 패널을 열고 닫을 수 있는 구조 - UI 전체를 숨겨 작업물에만 집중할 수 있는 기능 - 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다. ## 실용적인 의미 UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.

ui-designfigmadesign-systemsgen-ai+2