Figma

736 개의 포스트

www.figma.com/blog/engineering

태그로 필터

figma3분 읽기큐레이션 요약

디자인 면접에서 포트폴

신입 디자이너의 포트폴리오 면접 발표는 작품의 완성도만큼이나 전달 방식이 중요하다. 발표자는 자신이 어떤 디자이너인지 명확히 소개하고, 가장 애정을 가진 프로젝트를 중심으로 문제·역할·해결 과정·성과를 간결하게 설명해야 한다. 또한 면접 회사의 브랜드를 무리하게 차용하기보다 자신의 역량과 디자인 사고를 정확히 보여주는 데 집중해야 한다. ## 발표의 시작은 천천히, 정체성은 분명하게 - 발표 초반에는 이름과 전문 분야를 먼저 소개한다. - 모든 디자인 분야를 잘한다고 포장하기보다 자신이 강점을 가진 영역을 명확히 말한다. - 타이포그래피 - UX/UI 디자인 - 커뮤니케이션 디자인 - 모션 그래픽 - 프런트엔드 개발 - 경험해 본 분야와 전문 분야를 구분해 설명하면 자신의 역량 범위를 더 신뢰감 있게 전달할 수 있다. - 경력이 많은 디자이너라면 여러 분야에 걸친 폭넓은 전문성을 강조해도 좋지만, 신입이라면 핵심 강점과 열정을 선명하게 보여주는 편이 효과적이다. ## 가장 오래 한 프로젝트보다 가장 좋아하는 프로젝트를 먼저 보여주기 - 신입 지원자는 규모가 크고 작업 시간이 긴 프로젝트를 먼저 제시하려는 경향이 있다. - 그러나 발표 초반에는 자신이 가장 즐겁게 작업했고 애정을 가진 프로젝트를 선택하는 것이 좋다. - 열정이 담긴 프로젝트는 발표자의 디자인 감각과 개성을 더 자연스럽게 드러낸다. - 작은 프로젝트라도 본인의 관점과 성향을 잘 보여준다면 복잡하고 장황한 프로젝트보다 인상적일 수 있다. ## 프로젝트는 “무엇을, 누가, 왜, 현재 어떻게 되었는가”로 설명하기 면접관에게 프로젝트의 모든 세부 과정을 전달하려 하기보다, 핵심 흐름만 남겨 이해하기 쉽게 구성해야 한다. - 간단한 프로젝트 소개 - 해결해야 했던 문제 - 프로젝트 목표 - 실제 실행 과정 - 최종 디자인 - 결과와 성공을 판단한 기준 ### 무엇을 만든 프로젝트인가 - 발표 자료에 긴 아티스트 스테이트먼트가 있더라도 면접관이 모두 읽는다고 기대하지 않는다. - 배경지식이 없는 사람도 이해할 수 있도록 프로젝트의 성격과 목적을 간단히 설명한다. ### 누가 어떤 역할을 맡았는가 - 팀 프로젝트에서는 자신의 기여 범위를 반드시 분명히 한다. - 담당한 업무와 의사결정에 참여한 부분을 설명해야 면접관이 실제 역량을 정확히 판단할 수 있다. - 역할을 밝히지 않으면 팀의 성과를 자신의 성과처럼 말하는 것으로 오해받거나, 반대로 본인의 기여가 제대로 드러나지 않을 수 있다. ### 왜 필요한 프로젝트였는가 - 대부분의 디자인 과제는 특정한 문제를 해결하기 위해 진행된다. - 사용자의 문제, 비즈니스 요구, 커뮤니케이션상의 제약 등 프로젝트가 시작된 이유를 구체적으로 제시한다. - 면접관이 디자인 과제의 맥락과 난점을 공감할 수 있도록 상황을 생생하게 설명한다. ### 현재 어떤 결과를 만들었는가 - 디자인이 실제로 어떻게 사용되었는지 설명한다. - 가입자 증가, 전환율, 사용량 등 측정 가능한 성과가 있다면 수치로 제시한다. - 결과물이 실제 채택되지 않았더라도, 채택되었다면 어떤 효과가 있었을지와 향후 가능성을 설명할 수 있다. - 기업은 마감 시점의 결과물뿐 아니라 디자인이 실제 환경에서 어떻게 살아갈 수 있는지도 보고 싶어 한다. ## 면접 회사의 브랜드를 과도하게 활용하지 않기 - 지원 회사의 브랜드를 발표 자료나 작품에 무리하게 적용하는 것은 신중해야 한다. - 회사의 브랜드 사용 지침을 정확히 모르면 의도치 않게 브랜드를 잘못 표현할 수 있다. - 면접관 중에는 해당 브랜드의 디자인 시스템과 컴포넌트를 직접 만든 디자이너가 있을 수 있다. - 회사를 만족시키려는 의도가 오히려 브랜드를 피상적으로 모방하거나 잘못 이해한 결과로 보일 수 있다. - 회사에 맞춘 준비보다 자신의 디자인 역량, 문제 해결 과정, 협업 기여도를 명확히 전달하는 데 집중하는 것이 안전하다. 발표를 준비할 때는 프로젝트 수를 늘리기보다 자신을 가장 잘 보여주는 작업을 선정하고, 각 프로젝트를 짧고 일관된 구조로 연습하는 것이 좋다. 특히 “내 역할은 무엇이었는가”, “어떤 문제를 해결했는가”, “그 결과 무엇이 달라졌는가”를 명확히 답할 수 있어야 한다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

#FigmaTip 라운드

FigmaTip Roundup 7.0은 디자인 커뮤니티가 공유한 Figma 단축키와 작업 팁을 모은 글이다. 주요 내용은 컴포넌트를 활용해 대칭 도형을 만들고, 선택한 레이어로 빠르게 확대하며, 프레임 외곽선을 사용해 복잡한 화면을 명확하게 확인하는 방법이다. 작은 기능과 단축키를 익히면 반복 작업과 캔버스 탐색을 크게 줄일 수 있다. ## 컴포넌트로 대칭 도형 만들기 - 꽃병, 플라스크처럼 좌우 대칭이 필요한 도형은 한쪽 윤곽만 먼저 그린다. - 한쪽 윤곽을 컴포넌트로 만든다. - 단축키: `⌥⌘K` - 컴포넌트를 복제한다. - 단축키: `⌘D` - 복제한 요소를 수평 반전한다. - 단축키: `⇧H` - 반전된 복제본을 원본의 반대편으로 이동해 대칭 형태를 구성한다. - 원본 컴포넌트를 수정하면 연결된 인스턴스에도 변경 사항을 적용할 수 있어, 양쪽 형태를 일관되게 관리할 수 있다. - 단순히 좌우를 복사하는 것보다 컴포넌트 기반으로 작업하면 이후 모양을 수정하거나 변형하기 쉽다. ## 스페이스바로 선택 영역 고정하기 - 스페이스바를 누르면 선택한 객체의 경계(bounds)를 고정할 수 있다. - 객체를 이동하거나 조정할 때 선택 영역이 변해 작업 기준이 흔들리는 상황을 줄이는 데 유용하다. - 정밀한 배치나 크기 조정처럼 선택 영역을 일정하게 유지해야 하는 작업에 활용할 수 있다. ## 선택한 레이어로 정밀하게 확대하기 - 레이어 패널에서 원하는 레이어를 선택한 뒤, “Keyboard Zooms Into Selection” 기능을 사용하면 해당 객체를 화면 중앙에 가깝게 확대할 수 있다. - 캔버스에서 직접 객체를 찾을 필요 없이 레이어 목록에서 선택한 요소를 즉시 확인할 수 있다. - 복잡한 화면이나 작은 요소를 편집할 때 유용하며, 캔버스를 여러 번 확대·축소하는 시간을 줄여준다. ## 프레임 외곽선으로 구조 확인하기 - “Frame Outlines” 기능을 사용하면 프레임의 외곽선을 표시할 수 있다. - 내부 콘텐츠가 많거나 프레임 배경과 요소가 비슷한 경우에도 프레임의 경계를 쉽게 식별할 수 있다. - 중첩된 프레임과 레이아웃 구조를 파악하고, 요소가 어느 프레임에 속하는지 확인하는 데 도움이 된다. Figma에서 반복적으로 사용하는 작업은 단축키와 컴포넌트로 표준화하는 것이 좋다. 특히 대칭 도형은 한쪽만 제작한 뒤 컴포넌트와 수평 반전을 조합하고, 복잡한 파일에서는 레이어 선택 후 선택 영역 확대와 프레임 외곽선 표시를 함께 사용하면 작업 속도와 정확도를 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Figma가 Sounds 앱의

Sounds 앱은 디자인 에이전시에 의존하지 않고 Figma 템플릿과 소규모 광고비를 활용해 페이스북 성장을 크게 끌어올렸다. 게시물당 수십 건에 불과하던 반응은 수천 건으로 늘었고, 주간 도달률은 100만 회 이상으로 상승했으며, 페이스북 페이지 좋아요는 4개월 만에 1.4만에서 6만, 이후 15만 이상으로 증가했다. 핵심은 데이터 기반 콘텐츠 분석, 비디자이너도 편집할 수 있는 템플릿, 지속적인 실험이었다. ## 제한된 예산과 인력으로 페이스북 운영 시작 - 기존 페이스북 페이지는 인스타그램 유입을 위한 보조 채널에 가까웠다. - 게시물당 좋아요는 최대 약 20개, 1.4만 명의 팬 중 평균 도달률은 약 500명에 그쳤다. - 외주 에이전시를 이용하면 월 3,000~5,000달러 이상이 필요했고 광고비는 별도였다. - 마케팅 담당자는 커뮤니티 관리, 아티스트 관계, 고객 지원도 함께 맡고 있어 시간과 예산이 모두 제한적이었다. - 이에 따라 Sounds는 페이스북 운영을 내부에서 직접 개선하기로 했다. ## 콘텐츠 분석과 재사용 가능한 템플릿 - 음악·미디어·앱 분야의 인기 페이스북 페이지를 분석해 높은 참여를 유도하는 게시물 유형을 파악했다. - 분석 결과를 바탕으로 Sounds 브랜드에 맞는 콘텐츠 형식을 정리했다. - 디자이너 Thomas와 협업해 아티스트 사진만 교체하면 되는 브랜드 템플릿을 제작했다. - 템플릿은 전문 디자인 툴을 매번 처음부터 다루지 않아도 되도록 구성됐다. - Figma는 Mac과 Windows에서 사용할 수 있고, 별도 라이선스 부담이 적으며, 디자이너와 비디자이너가 함께 작업하기에 적합했다. ## 비디자이너의 제작 속도를 높인 Figma - 처음에는 Photoshop 경험이 거의 없어 Figma 인터페이스가 다소 어렵게 느껴졌다. - 디자이너가 작업 공간과 템플릿을 미리 구성하고, Slack 세션과 짧은 화면 녹화 영상으로 사용법을 설명했다. - 그 결과 비디자이너인 마케팅 담당자도 일상적으로 콘텐츠를 직접 제작할 수 있었다. - 디자이너가 다른 시간대에 있어도 아이디어가 떠오른 즉시 게시물을 만들 수 있었다. - 디자인 요청을 주고받는 대기 시간이 줄어들어 콘텐츠 제작과 게시 속도가 빨라졌다. ## 소규모 광고비와 추적 링크를 활용한 성장 - 2017년 10월 말부터 Figma로 만든 콘텐츠를 페이스북에 게시했다. - Branch.io의 맞춤 링크를 사용해 어떤 게시물이 앱 다운로드를 유도하는지 추적했다. - 페이스북과 인스타그램에 하루 최대 25달러 정도만 광고비를 사용했다. - 게시물당 좋아요·댓글·공유가 10~20건 수준에서 수천 건으로 증가했다. - 주간 도달률은 100만 회 이상으로 상승했으며, 기존 월간 도달률에 해당하는 수준을 매주 달성했다. - 페이지 좋아요는 4개월도 되지 않아 1.4만에서 6만으로 증가했고, 한 달 뒤 15만을 넘겼다. - 알고리즘상 게시물 부스팅은 여전히 필요했지만, 일반적으로 게시물당 5달러, 성과가 좋은 경우 최대 10달러만 투자했다. - 광고로 도달한 이용자들이 게시물을 자신의 네트워크에 공유하면서 유기적 도달률도 함께 높아졌다. ## 에이전시보다 낮은 비용으로 달성한 결과 - 같은 기간 외주 에이전시를 이용했다면 2만 달러 이상이 들 것으로 예상했다. - 실제로는 광고비를 포함해 총 3,000달러 미만을 사용했다. - 절약한 예산은 사용자 유지율과 수익화에 영향을 주는 제품 내 도구에 재투자할 수 있었다. - 댓글에서 더 활발한 대화가 발생해 단순한 페이지 지표뿐 아니라 커뮤니티 참여도도 개선됐다. ## 소규모 마케팅 팀을 위한 교훈 - **디자이너가 아니어도 콘텐츠를 만들 수 있다.** - 채널별 규격에 맞춘 템플릿과 적절한 도구가 있으면 매일 콘텐츠를 제작할 수 있다. - **전문 마케터가 아니어도 마케팅할 수 있다.** - 소셜 마케팅의 핵심은 전통적인 마케팅 경력보다 고객을 이해하고 어떤 콘텐츠가 반응을 얻는지 파악하는 능력이다. - **자원이 적다고 도달 범위까지 제한되는 것은 아니다.** - 작은 광고비라도 콘텐츠 형식과 타깃 반응을 실험하며 개선하면 큰 성과를 만들 수 있다. - **실패를 허용하는 실험 문화가 중요하다.** - 시행착오를 두려워하지 않고 게시물 유형과 광고 집행 방식을 반복적으로 테스트한 것이 성장의 기반이 됐다. 소규모 팀이라면 외주를 먼저 고려하기보다, 성과가 검증된 콘텐츠 유형을 분석하고 재사용 가능한 템플릿을 만든 뒤 소액 광고와 추적 링크로 결과를 측정하는 방식을 추천한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

스쿼클을 간절히 찾

피그마 엔지니어가 iOS의 ‘스퀴클(squircle)’을 Figma에 구현하기 위해 수학적 형태를 분석한 과정을 설명한다. 스퀴클은 단순한 둥근 사각형이 아니라 직선과 곡선의 연결부에서 곡률이 연속적으로 변해 더 자연스럽고 독립적인 형태로 인식된다. 처음에는 슈퍼타원으로 설명할 수 있다고 보았지만, 실제 애플 아이콘과 비교한 결과 체계적인 오차가 발견되며 더 정교한 모델이 필요해졌다. ## 디자인 문제로서의 스퀴클 - 스퀴클은 ‘square’와 ‘circle’을 합친 표현으로, iOS 7에서 애플 앱 아이콘에 적용되며 널리 알려졌다. - 기존의 둥근 사각형은 직선과 원호가 만나는 지점에서 곡률이 갑자기 바뀐다. - 스퀴클은 이 전환을 부드럽게 만들어 외곽선 전체의 곡률이 연속적으로 이어진다. - 수학적으로 작은 차이지만, 시각적으로는 형태가 단순히 모서리를 깎은 사각형이 아니라 하나의 유기적인 물체처럼 보이게 한다. - 맥북 모서리나 유선 이어버드 케이스처럼 산업 디자인에서도 곡률의 연속성은 표면의 하이라이트와 물체의 인상에 큰 영향을 준다. ## 공학에도 적용되는 디자인의 제약 - 글은 Charles Eames의 디자인 정의인 “특정 목적을 달성하기 위해 요소를 배열하는 계획”에서 출발한다. - 디자인의 핵심은 가능한 많은 제약을 인식하고, 그 제약 안에서 작업하는 데 있다. - 엔지니어링에서도 시간, 단순성, 유지보수성, 미적 완성도 같은 제약을 함께 고려해야 한다. - 스퀴클 구현 과정은 수학적 문제를 다루지만, 탐색·실패·숨은 문제 발견·제약의 변화·해결이라는 전형적인 디자인 과정과 동일한 구조를 가진다. ## 슈퍼타원이라는 첫 번째 해법 - 스퀴클의 정확한 수학적 표현을 찾기 위해 기존 연구를 조사했고, 초기에는 슈퍼타원이 유력한 후보로 제시됐다. - 슈퍼타원은 다음과 같은 형태로 표현할 수 있다. \[ \left|\frac{x}{a}\right|^n + \left|\frac{y}{b}\right|^n = 1 \] - \(n=2\)이면 일반적인 타원이 된다. - \(a=b=1, n=2\)이면 단위원이 된다. - \(n>2\)로 설정하면 모서리가 점점 사각형에 가까워진다. - \(n\)이 무한대로 커지면 경계가 직사각형에 가까워진다. - 초기 분석에서는 \(n=5\) 정도의 슈퍼타원이 애플 아이콘과 매우 비슷하게 보였다. - 이 모델이 정확하다면 Bézier 곡선 여러 개로 근사한 뒤 Figma의 도형 시스템에 통합할 수 있었다. ## 실제 아이콘과의 불일치 - 슈퍼타원은 시각적으로는 매우 유사했지만 실제 iOS 아이콘의 외곽선을 정확히 설명하지 못했다. - 가능한 \(n\) 값을 바꿔도 실제 형태와 비교하면 작지만 일관된 차이가 남았다. - 이는 단순한 측정 오차가 아니라 모델 자체의 구조적 한계였다. - 따라서 “비슷하게 보이는 우아한 공식”을 사용하는 것만으로는 충분하지 않았고, 사용자가 기대하는 실제 애플 형태를 재현하려면 더 정확한 곡선 모델이 필요했다. - 이후 연구에서는 여러 개의 Bézier 곡선을 조합해 스퀴클 모서리를 구성하는 가설이 제시되며 다음 단계로 이어진다. 정확한 그래픽 구현에서는 시각적으로 비슷한 근사식과 실제 디자인을 충실히 재현하는 모델을 구분해야 한다. 특히 곡률 연속성처럼 작은 수학적 차이가 최종 형태의 인상과 품질을 좌우할 수 있으므로, 공식의 단순성보다 실제 데이터와의 검증이 중요하다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Figma 플랫폼을 소개합니다

Figma는 디자인 파일을 다른 도구·스크립트·웹 앱과 연결하는 **Figma Platform**을 공개하며, 전문 디자인 도구 최초의 웹 API를 지향했다. API를 통해 디자인 데이터를 실시간으로 읽고, 댓글을 주고받고, 이미지로 렌더링할 수 있어 조직 맞춤형 협업 자동화가 가능해진다. 이를 기반으로 디자인을 고립된 파일이 아니라 조직 전체가 공유·검색·활용하는 개방형 데이터로 전환하는 것이 글의 핵심 결론이다. ## Figma Platform의 목표 - Figma를 외부 도구, 사내 스크립트, 웹 애플리케이션과 연결하는 플랫폼을 제공한다. - 기존 데스크톱 디자인 도구는 운영체제, 로컬 파일 경로, 특정 소프트웨어 버전에 종속되어 통합이 어려웠다. - Figma는 웹 기반이므로 서로 다른 컴퓨터나 웹 서비스에서도 디자인의 최신 상태에 접근할 수 있다. - 기업은 조직별 업무 방식에 맞춘 검색, 공유, 모니터링, 자동화 도구를 직접 만들 수 있다. ## 초기 Web API의 세 가지 기능 - **디자인 파일 읽기** - 디자인을 개방형 JSON 형식으로 제공한다. - 도형, 텍스트, 컴포넌트, 프로토타입 링크, 전환 효과, 제약 조건 등 디자인을 구성하는 트리 구조를 확인할 수 있다. - 파일 URL에 포함된 고유 키를 사용해 특정 디자인의 실시간 스냅샷을 가져온다. - **댓글 읽기·쓰기** - 외부 서비스가 Figma 디자인의 댓글을 조회하거나 작성할 수 있다. - 디자인 검토와 협업 프로세스를 다른 업무 도구와 연결할 수 있다. - **이미지 렌더링** - 전체 파일 또는 파일의 일부를 JPG, PNG, SVG 등 표준 이미지 형식으로 변환한다. - 별도의 수동 내보내기 없이 외부 서비스에서 최신 디자인 이미지를 활용할 수 있다. ## 개방형 웹 API가 제공하는 장점 - 특정 운영체제나 설치된 디자인 프로그램에 의존하지 않는다. - 별도의 독점 플러그인 언어나 프레임워크 대신 일반적인 웹 개발 기술을 사용할 수 있다. - 잘 정의된 API를 사용하므로 사내 자동화와 외부 서비스 통합을 빠르게 구현할 수 있다. - 통합 기능을 유지·보수하고 최신 상태로 업데이트하기가 상대적으로 쉽다. - 디자인 데이터를 이미지뿐 아니라 구조화된 정보로 활용할 수 있어 새로운 형태의 협업 도구를 만들 수 있다. ## 실제 활용 사례: Uber와 GitHub - **Uber** - 여러 도시에 분산된 디자인 팀의 작업을 조직 전체에 보여주기 위해 API를 활용했다. - 진행 중인 디자인을 사무실 TV에 실시간으로 표시하는 피드를 만들고 있다. - Dribbble과 유사한 내부 디자인 저장소에서 프로젝트를 탐색하는 기능도 계획했다. - **GitHub** - 아이콘 제작 과정 일부를 자동화해 반복 작업을 줄이고 효율성을 높였다. - 이러한 사례는 API가 단순한 파일 내보내기를 넘어 조직 내부의 가시성, 검색, 자동화 문제를 해결할 수 있음을 보여준다. ## 오픈소스 프로젝트와 외부 통합 - Figma는 커뮤니티가 활용할 수 있도록 여러 데모 프로젝트를 오픈소스로 공개했다. - 예시: - Figma 디자인 맞춤법 검사기 - 생성형 아트 도구 - 디자인을 Ethereum 블록체인에 기록하는 방법 - Avocode, Haiku, Zeplin, Pagedraw 등 다른 디자인·개발 도구와의 통합도 강화했다. - 플랫폼의 가치는 Figma가 모든 기능을 직접 제공하는 데보다 커뮤니티와 기업이 각자의 문제를 해결하는 데 있다. ## 향후 공개 예정 기능 - **Webhooks** - 파일이나 팀에 연결해 디자인 변경 이벤트를 콜백 형태로 전달한다. - 디자인 업데이트를 감지해 외부 시스템을 자동으로 갱신할 수 있다. - **Write API** - 초기 버전은 주로 디자인 데이터를 읽는 데 초점을 맞췄다. - 이후 외부 애플리케이션이 Figma 디자인 자체를 수정할 수 있는 쓰기 API를 제공할 계획이다. - **Extensions** - 인앱 확장 기능은 강력하지만 품질, 안정성, 예측 가능성을 떨어뜨릴 수 있다. - Figma는 개발자 자유와 제품 안정성을 함께 확보할 수 있는 모델을 마련한 뒤 확장 기능을 도입하려 했다. - 당시에는 구체적인 출시 일정이 정해지지 않았다. ## 대규모 협업에서 해결하려는 문제 - 디자인은 UI 디자이너만 사용하는 산출물이 아니라 카피라이터, 엔지니어, 연구자, 마케터, 경영진 등 여러 부서가 함께 다루는 정보가 되었다. - 전통적인 데스크톱 도구에서는: - 파일을 내보내고 업로드해야 공유할 수 있다. - 원본이 변경되면 공유된 파일이 즉시 오래된 버전이 된다. - 경영진이 실시간 작업을 보고 의견을 남기기 어렵다. - 엔지니어가 필요한 최신 에셋을 찾는 데 많은 시간을 쓴다. - 다른 팀이 이미 해결한 문제와 해결책을 발견하기 어렵다. - Figma API는 조직 전체에서 디자인을 실시간으로 공유하고, 검색하고, 모니터링하는 맞춤형 워크플로를 구축하는 기반이 된다. Figma Platform은 디자인 도구를 폐쇄적인 제작 환경에서 개방형 협업 플랫폼으로 확장하려는 시도다. 실제 도입 시에는 API로 최신 디자인 조회·렌더링·댓글 연동부터 시작하고, Webhooks와 자동화 기능을 결합해 사내 디자인 검색 및 배포 시스템으로 발전시키는 접근이 실용적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

이제 Figma 버전 히스토리에 이름을

Figma는 웹 기반 자동 저장의 장점을 살려 버전 기록을 직접 이름 붙이고 주석을 추가할 수 있는 기능을 출시했다. 이를 통해 디자인 마일스톤을 쉽게 찾고 복원·복제할 수 있으며, 협업자는 각 변경 사항을 버전별로 검토할 수 있다. 결과적으로 별도 파일을 내보내거나 대면 회의를 할 필요가 줄어들고, 디자인 검토와 협업 속도가 향상된다. ## 웹 기반 자동 저장의 한계 보완 - Figma 파일은 웹에서 지속적으로 자동 저장되므로 별도의 동기화가 필요 없다. - 하지만 자동 저장 버전이 많아지면 중요한 변경 시점을 찾기 어려워지는 문제가 있었다. - 기존 데스크톱 디자인 도구에서는 버전 검토와 변경 문서화를 위해 파일을 별도로 내보내거나 우회적인 작업을 해야 했다. - 새 버전 기록 기능은 자동 저장 흐름 위에 사용자가 직접 중요한 버전을 표시하고 설명하도록 한다. ## 버전에 이름과 주석 추가 - 사용자는 특정 디자인 단계를 직접 저장하고 이름을 붙일 수 있다. - 각 버전에 메모를 추가해 변경 내용이나 해당 단계의 목적을 기록할 수 있다. - 예를 들어 다음과 같은 시점을 명확히 남길 수 있다. - 첫 번째 디자인 리뷰 전 상태 - 사용자 테스트에 처음 사용한 디자인 - 특정 기능이 완성된 마일스톤 - 중요한 버전은 나중에 복원하거나 새 파일로 복제할 수 있다. - 단축키: - macOS: `⌘ + ⌥ + S` - Windows: `Ctrl + Alt + S` ## 자동 저장 기록 정리 - 사용자가 수동으로 저장한 버전 사이의 자동 저장 기록은 자동으로 묶여 표시된다. - 중요하지 않은 중간 기록이 화면을 가득 채우지 않아 전체 변경 흐름을 빠르게 훑을 수 있다. - 버전 기록은 파일 이름을 클릭한 뒤 **Show Version History**에서 확인할 수 있다. ## 페이지별 버전 관리 - 기존에는 파일 전체 단위로만 버전 기록을 확인할 수 있었다. - 새 기능에서는 특정 페이지를 선택한 뒤 해당 페이지의 버전 기록을 따로 볼 수 있다. - 여러 페이지에서 동시에 작업하는 파일에서도 변경 사항을 구분하기 쉬워진다. - 페이지를 선택하고 파일 이름을 클릭한 뒤 **View Version History**를 선택하면 된다. ## 주석을 활용한 빠른 디자인 리뷰 - 이해관계자는 각 버전에 변경 사항과 검토 의견을 직접 남길 수 있다. - 디자이너는 버전별 변경 내용을 별도의 문서나 회의에서 다시 설명할 필요가 줄어든다. - 협업자는 서로 다른 디자인 단계의 결과를 비동기적으로 검토할 수 있다. - 결과적으로 리뷰 시간을 줄이고 더 빠르게 합의에 도달할 수 있다. ## 실용적인 활용 방법 - 큰 변경을 완료할 때마다 버전에 이름을 붙이고 한두 문장으로 변경 목적을 기록하는 것이 좋다. - 페이지별로 버전을 관리하면 기능·화면 단위의 변경 이력을 추적하기 쉽다. - 리뷰 전, 사용자 테스트 전, 최종 승인 전처럼 팀의 업무 흐름에 맞춰 마일스톤을 정의하면 버전 기록을 효과적으로 활용할 수 있다. - 별도 파일을 반복해서 내보내기보다 Figma의 버전 기록을 협업과 검토의 기준으로 사용하는 것이 권장된다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

UI/UX 디지털 노마드로 떠

디지털 노마드로 UI/UX 일을 하려면 여행보다 먼저 안정적인 고객, 사업 기반, 인터넷 환경을 준비해야 한다. 원격 근무의 핵심은 시간대와 거리의 불편을 정기적인 소통과 투명한 업무 공유로 보완해 고객의 신뢰를 유지하는 것이다. 또한 현지 커뮤니티에 참여하면 새로운 고객과 동료를 만나면서 고립감도 줄일 수 있다. ## 출발 전 고객과 수입원 확보 - 일방적으로 여행을 떠나기 전에 기존 직장이나 고객을 확보하는 것이 좋다. - 출발 전에는 고객과 같은 시간대에 있고 재정적 압박도 적기 때문에 계약을 성사시키기 쉽다. - 가능하면 고객을 여러 번 직접 만나 커뮤니케이션 방식과 비즈니스 요구사항을 파악해야 이후의 오해를 줄일 수 있다. - 고객을 찾는 방법: - 디자인 밋업과 기술 행사에 참석해 프리랜서임을 알리고 포트폴리오 링크를 공유한다. - Craigslist 같은 구인·서비스 플랫폼에 서비스를 등록한다. - 잠재 고객에게 처음부터 해외 체류 계획을 강조하기보다, 먼저 한두 개의 프로젝트를 성공적으로 수행해 신뢰를 쌓는다. - 기존 전문 네트워크에 지속적으로 신규 고객을 받고 있음을 알린다. ## 프리랜서 사업 운영 기반 마련 - 해외에 나간 뒤에는 자국에서 처리해야 할 행정 업무가 훨씬 어려워질 수 있으므로 출국 전에 사업 구조를 갖춰야 한다. - 고려할 사항: - 세금 공제를 위해 LLC 등 사업체를 설립한다. - 프리랜서 수입과 지출을 관리할 별도 사업용 은행 계좌를 만든다. - 포트폴리오와 연락처가 포함된 웹사이트를 준비한다. - 해외에서 만난 사람에게 건넬 명함 등 홍보물을 제작한다. - 세무사를 통해 세금과 프리랜서 재정을 사전에 관리한다. - 사업자명을 등록한다. ## 안정적인 인터넷 환경 확보 - UI/UX 디자이너는 화상회의, 이메일, 디자인 파일 작업을 위해 안정적인 인터넷이 필수적이다. - 숙소를 예약하기 전에 Wi-Fi 제공 여부뿐 아니라 실제 속도와 이용자 리뷰를 확인해야 한다. - 필요하다면 숙소 호스트에게 속도 테스트 결과를 요청한다. - 연결 상태가 불확실한 경우 고객에게 미리 연락이 어려울 수 있음을 알리고 기대치를 조정해야 한다. - 인터넷 장애에 대비해 예비 SIM 카드를 준비하는 방법도 유용하다. - Figma처럼 링크로 파일을 공유하고 실시간 댓글을 받을 수 있는 도구를 사용하면 최신 파일을 반복해서 내보내거나 이메일로 전달할 필요가 줄어든다. - 인터넷이 끊기기 전에 파일을 열어 둔 경우, 오프라인에서도 Figma 파일 작업을 이어갈 수 있다. ## 현지 커뮤니티와 디지털 동료 찾기 - 여러 도시를 이동하면 외로움을 느끼기 쉬우므로 도착 직후 디지털 노마드 커뮤니티에 참여하는 것이 좋다. - Facebook의 디지털 노마드 그룹이나 여성 디지털 노마드 전용 커뮤니티를 활용할 수 있다. - 하노이, 치앙마이, 우붓은 양호한 Wi-Fi, 비교적 높은 생활 수준, 코워킹 스페이스와 카페가 많아 디지털 노마드에게 적합한 도시로 소개된다. - Roam이나 Remote Year처럼 전문가를 위한 체계적인 장기 체류 프로그램을 이용하는 방법도 있다. ## 시간대가 다른 고객과 신뢰 유지 - 고객과 지리적으로 멀어질수록 업무 진행 상황을 더 투명하게 공유해야 한다. - 한 사례에서는 매일 업무 내용을 이메일로 보고하고, 이틀에 한 번씩 정기 통화를 진행했다. - 정기적인 업데이트는 고객의 질문을 빠르게 해결하고, 디자이너가 팀의 중요한 구성원이라는 인식을 유지하는 데 도움이 된다. - 여행의 자유를 누리기 위해 시작한 원격 근무가 과도한 업무로 변하지 않도록 일과 여행의 균형도 지켜야 한다. 장기적으로 성공하려면 출국 전에 고객·재정·사업 등록·통신 환경을 준비하고, 여행 중에는 정기적인 보고와 명확한 기대치 조율을 습관화하는 것이 가장 중요하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마 프로토타이

Figma는 프로토타입에 **디졸브, 슬라이드, 푸시 전환 효과**를 추가해 디자인의 움직임과 사용감을 더 현실적으로 표현할 수 있게 했다. 이를 통해 디자이너와 개발자·마케터·고객 등 이해관계자가 정적인 화면뿐 아니라 앱의 실제 흐름과 감각까지 더 정확히 공유할 수 있다. 전환 시간과 이징을 조절하고 미리보기로 결과를 확인할 수 있어, 반복적인 커뮤니케이션과 수정도 줄일 수 있다는 것이 글의 결론이다. ## 전환 효과로 프로토타입의 완성도 향상 - 프레임 사이에 다음과 같은 전환 효과를 적용할 수 있다. - **Dissolve**: 한 화면이 다른 화면으로 자연스럽게 녹아드는 효과 - **Slide**: 한 프레임이 특정 방향으로 밀려나며 다음 프레임이 나타나는 효과 - **Push**: 다음 화면이 이전 화면을 밀어내며 전환되는 효과 - 애니메이션 지속 시간을 밀리초 단위로 설정할 수 있다. - 전환의 이징을 조절해 애니메이션이 시작이나 끝에서 더 빠르거나 느려지도록 만들 수 있다. - 툴바의 미리보기 상자에서 프레임 간 전환을 즉시 확인할 수 있다. - iOS 앱과 같은 자연스러운 화면 이동을 재현해 제품의 사용감을 더 잘 전달할 수 있다. ## 프로토타입이 필요한 이유 - 오늘날 제품 디자인은 디자이너만의 작업이 아니라 개발자, 마케터, 프로젝트 관리자 등 여러 역할의 협업으로 완성된다. - 고충실도 프로토타입은 제품이 개발되기 전에 화면과 사용자 흐름을 공유하는 공통 언어 역할을 한다. - 화면 사이의 애니메이션은 앱의 인상을 크게 바꾸므로, 이를 생략하면 이해관계자 사이에 반복적인 설명과 수정이 발생할 수 있다. - 전환 효과를 포함하면 정적인 목업만으로는 전달하기 어려운 제품의 분위기와 상호작용을 구체적으로 보여줄 수 있다. ## Figma 프로토타이핑의 장점 - **실시간으로 동기화되는 디자인** - 웹 기반 플랫폼이므로 디자인 프레임을 수정하면 프로토타입에도 자동으로 반영된다. - 디자인을 다시 내보내거나 프로토타입을 별도로 갱신할 필요가 없다. - **모바일 프레젠테이션** - Android와 iOS 스마트폰의 웹 브라우저에서 프로토타입을 탐색할 수 있다. - 고객 미팅에서 휴대폰으로 발표를 진행하거나, 참석자들이 각자의 노트북에서 디자인 흐름을 따라갈 수 있다. - 관찰 모드에서는 이해관계자가 발표자의 프로토타입을 함께 확인할 수 있다. - **컴포넌트와 프로토타이핑의 결합** - 컴포넌트에 한 번 내비게이션을 설정하면 모든 인스턴스에 해당 동작이 적용된다. - 예를 들어 공통 홈 버튼에 홈 화면 이동을 연결하면 여러 화면에서 동일한 동작을 반복 설정하지 않아도 된다. - 반복 요소가 많은 프로토타입을 빠르게 제작하고 수정할 수 있다. ## 사용자 피드백을 반영한 기능 확장 - 전환 기능은 Figma 2.0에서 프로토타이핑이 처음 공개된 이후 커뮤니티가 지속적으로 요청한 기능이었다. - Spectrum과 Twitter 등을 통한 사용자 피드백이 기능 개발에 반영되었다. - Figma는 앞으로도 소프트웨어 개발 과정에 참여하는 다양한 사람들의 요구를 충족하도록 프로토타이핑 기능을 확장하겠다고 밝혔다. 실무에서는 화면 연결만 구현하는 데 그치지 말고, 실제 제품의 전환 방향·속도·이징까지 함께 설정하는 것이 좋다. 특히 컴포넌트와 전환 효과를 조합하면 반복 작업을 줄이면서도 개발 전에 제품의 인터랙션을 더 정확하게 검증할 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma로부터 사랑을 담아:

Figma는 디자인 협업을 효율화하기 위해 파일 정렬 기능과 `@멘션` 기능을 추가했다. 파일을 최근 수정일뿐 아니라 생성일과 이름순으로 정렬할 수 있게 되었고, 댓글에서 특정 팀원을 멘션하면 이메일과 Figma 알림으로 즉시 전달된다. 이를 통해 필요한 파일과 피드백을 더 빠르게 찾고, 비동기 협업에서 담당자에게 정확히 의견을 전달할 수 있다. ## 파일 정렬로 작업 흐름 정리 - 기존 Figma의 파일 목록은 대부분 **최근 수정일(Last Modified)** 기준으로 자동 정렬됐다. - 최근 작업한 파일을 찾는 데는 유용하지만, 오래된 파일이나 특정 프로젝트의 파일을 찾을 때는 한계가 있었다. - 새로 다음 정렬 기준을 선택할 수 있게 되었다. - 파일 생성일 - 파일 이름 알파벳순 - 기존의 최근 수정일 기준 - 파일이 많아질수록 원하는 디자인 파일을 탐색하는 시간이 줄어들고, 작업 공간을 체계적으로 관리할 수 있다. ## `@멘션`을 통한 대상 지정형 협업 - 디자인 협업은 실시간으로만 이루어지지 않고, 댓글을 통한 비동기 방식으로도 자주 진행된다. - 다음과 같은 상황에서 특정 사람에게 직접 알림을 보낼 수 있다. - 디자이너가 PM에게 특정 화면의 피드백을 요청할 때 - 엔지니어가 프로토타입 구현 중 질문이 생겼을 때 - 카피 에디터가 문구 수정 완료 사실을 디자이너에게 알릴 때 - 사용자는 댓글에 `@`와 팀원의 이름을 입력해 해당 사용자를 멘션할 수 있다. - 멘션된 사용자는 다음 두 방식으로 알림을 받는다. - Figma 내부 알림 - 댓글 내용이 포함된 이메일 - 댓글을 찾으라고 문서 링크만 보내거나, 문서 안에서 직접 댓글을 찾아보라고 안내할 필요가 없어졌다. ## 댓글 알림과 이메일 답장 - 기존에는 특정 사용자를 위한 댓글을 작성해도 상대방에게 이를 원활하게 알릴 방법이 부족했다. - `@멘션`은 댓글의 수신 대상을 명확히 해 “어떤 댓글에 집중해야 하는지” 쉽게 알려준다. - 댓글 알림 이메일에 직접 답장하면, 답변이 Figma의 해당 댓글 스레드에 새 댓글로 추가된다. - 따라서 간단한 피드백이나 답변을 위해 Figma를 다시 열지 않아도 협업을 이어갈 수 있다. ## 사용자 요청을 반영한 기능 개선 - 두 기능 모두 Figma 사용자들이 오랫동안 요청해 온 기능이었다. - 작은 기능이지만 파일 탐색과 피드백 전달이라는 반복적인 작업을 줄여 디자인 업무 시간을 절약하는 데 목적이 있다. - Figma는 사용자들의 지속적인 피드백과 기능 요청이 제품 개선의 중요한 동력이라고 강조했다. 실무에서는 파일 수가 많은 프로젝트에 생성일·이름순 정렬을 활용하고, 특정 담당자의 확인이 필요한 댓글에는 항상 `@멘션`을 사용하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

웹 디자이너 없는 웹

Xfive는 전담 디자이너가 없는 웹 개발 회사였지만, Figma를 활용해 낡고 복잡해진 홈페이지를 직접 redesign했다. 브라우저 기반 협업과 실시간 댓글 기능으로 마케팅·영업·개발 등 여러 이해관계자의 피드백을 한곳에서 관리했으며, 개발자는 별도 도구 없이 디자인 사양과 코드를 확인할 수 있었다. 이 경험을 통해 Figma가 디자인 제작부터 검토, 프로토타이핑, 개발자 인계까지 연결하는 효과적인 협업 플랫폼임을 확인했다. ## 리디자인이 필요했던 배경 - Xfive는 2006년 설립된 웹 개발 회사로, 크라쿠프·멜버른·샌프란시스코에 사무실을 두고 있다. - 일반적으로 고객이 제공한 디자인을 구현하는 방식이어서 사내에 디자이너를 두지 않았다. - 리브랜딩과 신규 웹사이트 출시 이후 회사는 성장했지만, 홈페이지와 일부 주요 영역은 그대로 남아 있었다. - Customers와 Work 섹션이 outdated 상태였고, 다음과 같은 구조적 문제가 있었다. - 혼란스러운 전역 내비게이션 - 서로 경쟁하는 지나치게 많은 CTA - 탐색과 유지보수가 어려운 다수의 랜딩 페이지 ## 디자이너가 아닌 직원의 Figma 활용 - 콘텐츠 제작자인 Lubos Kmetko가 Figma를 시험적으로 사용한 뒤 홈페이지 리디자인을 맡았다. - 전문 디자이너는 아니었지만 Figma를 이용하면 직접 시안을 만들 수 있다고 판단했다. - 홈페이지, Customers 영역, Work 섹션을 새로 설계하면서 내비게이션과 CTA, 랜딩 페이지 구조를 단순화했다. - 중요한 조건은 다양한 부서가 디자인을 검토하고 의견을 제출할 수 있어야 한다는 점이었다. ## 브라우저 기반 프로토타이핑과 협업 - Lubos는 완성한 각 페이지의 목업을 링크로 공유했다. - 마케팅, 영업, 제작, 편집, 개발팀은 물론 COO까지 브라우저에서 디자인을 열고 댓글을 남길 수 있었다. - Figma의 Comments 기능을 통해 다음 작업을 한 공간에서 처리했다. - 디자인에 대한 의견 교환 - 사용자 인터랙션 설명 - 피드백을 반영한 실시간 수정 - 변경 내역과 최신 버전 동기화 - 별도의 파일 다운로드나 프로그램 설치 없이 참여할 수 있어 비디자이너도 구체적인 피드백을 제공하기 쉬웠다. - 모든 피드백이 디자인 파일과 함께 보존되어, 이메일이나 분산된 문서보다 검토 과정의 추적성이 높아졌다. ## 디자이너-개발자 인계 간소화 - 시안이 승인된 뒤에도 이메일이나 Box로 파일을 주고받지 않고 Figma 링크를 사용했다. - 개발자는 브라우저에서 디자인 파일을 열어 별도 도구 없이 사양을 확인했다. - Code Mode를 통해 다음 정보를 확인하거나 내보낼 수 있었다. - 요소의 크기 - 색상 - 패딩 등 간격 - CSS - iOS 및 Android 코드 - 이를 통해 버전 관리 문제와 구현 과정의 추측을 줄이고, 더 빠르고 정확하게 개발할 수 있었다. - Figma는 Photoshop의 디자인 기능과 Google Docs의 협업 방식을 결합하면서도 상대적으로 가볍고 단순한 도구로 평가됐다. ## 클라이언트 프로젝트로의 확장 - Xfive는 이번 리디자인을 Figma를 실제 고객 프로젝트에 적용하기 위한 시험대로 삼았다. - 향후에는 기능성 프로토타입을 팀원과 고객에게 공유하고 실시간으로 협업할 수 있다고 보았다. - PDF나 JPEG를 이메일에 첨부해 디자인 아이디어를 전달하던 기존 방식에서 벗어나: - 프로토타입 공유 - 구현 세부사항 논의 - 개발자 인계 를 하나의 플랫폼에서 처리하려 했다. 전담 디자이너가 없는 조직이라도 브라우저 기반 도구와 명확한 협업 프로세스를 갖추면 웹 리디자인을 진행할 수 있다. 특히 Figma는 디자인 검토부터 개발 사양 확인까지 연결하므로, 여러 부서와 외부 고객이 함께 참여하는 프로젝트에 유용한 선택지다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

피그마 팁 모

이 글은 Figma 커뮤니티에서 공유된 유용한 디자인 팁과 기능 활용법을 모은 **FigmaTip Roundup 6.0**이다. 머티리얼 디자인 시스템 활용, 그룹 내 선과 채우기 색상 조정, 스퀴클(squircle)을 이용한 부드러운 모서리 등 작업 속도와 정밀도를 높이는 기능을 소개한다. 공통적으로 Figma의 재사용 가능한 시스템과 세밀한 편집 기능을 활용하면 디자인 프로세스를 더 효율적으로 만들 수 있다는 점을 강조한다. ## 머티리얼 디자인 시스템으로 작업 속도 향상 - 사용자가 제작한 Figma용 **Material Design System**을 소개한다. - 버전 1.3에는 표를 빠르게 제작할 수 있는 **테이블 생성기(table constructor)**가 통합되어 있다. - 머티리얼 디자인 기반의 UI를 만들 때 구성 요소를 처음부터 제작하지 않고 시스템을 활용할 수 있다. - 반복적으로 사용되는 UI 요소와 패턴을 미리 갖춰두면 디자인 프로세스를 가속할 수 있다. ## 그룹 안에서 선과 채우기 색상 পৃথ পৃথ로 조정 - 선(stroke)과 채우기(fill)가 함께 포함된 그룹에서도 두 속성을 독립적으로 변경할 수 있다. - 그룹의 선 색상을 바꾸면 선이 있는 객체의 선 색상만 변경된다. - 채우기만 있고 선이 없는 객체의 색상은 영향을 받지 않는다. - 복잡한 아이콘이나 일러스트를 그룹 단위로 관리하면서도 특정 시각 속성만 정밀하게 수정할 수 있다. - 다른 디자인 도구에서는 그룹 전체의 색상이 함께 바뀔 수 있는 상황을 피할 수 있다는 점이 장점이다. ## 스퀴클로 더 부드러운 모서리 만들기 - Figma의 새로운 기능으로 **스퀴클(squircle)** 형태의 모서리를 소개한다. - 스퀴클은 일반적인 원형 모서리보다 곡선이 자연스럽게 이어지는 형태다. - 카드, 버튼, 앱 아이콘처럼 둥근 모서리가 중요한 UI 요소에 적용하면 더 부드럽고 세련된 인상을 줄 수 있다. - 기존의 단순한 코너 반경 조정과 달리, 모서리 곡률을 시각적으로 더 자연스럽게 표현하는 데 활용할 수 있다. 실무에서는 머티리얼 디자인 시스템을 라이브러리로 활용하고, 그룹 편집 시 선과 채우기를 구분해 수정하며, 제품의 시각적 스타일에 맞춰 스퀴클 모서리를 선택하면 작업 속도와 완성도를 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

피그마, 2

Figma는 2018년 2월 Kleiner Perkins가 주도한 2,500만 달러 규모의 Series B 투자를 유치했다. 이번 투자에는 Index, Greylock, LinkedIn의 Jeff Weiner 등 기존 투자자도 참여했으며, SaaS 기업 성장과 시장 진출 전문성을 가진 Mamoon Hamid가 Figma에 대한 첫 투자로 참여했다. Figma는 이 자금을 바탕으로 웹 기반의 접근 가능하고 협업적인 디자인 도구라는 비전을 더욱 확장하려 한다. ## 2,500만 달러 Series B 투자 유치 - 투자 규모는 **2,500만 달러**다. - 투자 라운드는 **Kleiner Perkins**가 주도했다. - Kleiner Perkins의 신규 파트너 **Mamoon Hamid**가 주도적으로 참여했으며, Figma는 그의 KPCB 첫 투자 대상이 되었다. - Hamid는 Slack, Box, Intercom 등 SaaS 기업에 초기 투자한 경력이 있다. - 그의 투자 관점은 데이터 기반의 기업 평가와 시장 진출 전략에 강점이 있는 것으로 소개된다. ## 기존 투자자들의 후속 참여 - 기존 투자자인 다음 인사들도 이번 라운드에 참여했다. - Index의 **Danny Rimer** - Greylock의 **John Lilly** - LinkedIn의 **Jeff Weiner** - 기존 투자자들의 재참여는 Figma의 성장 가능성과 초기 비전에 대한 지속적인 신뢰를 보여준다. ## Figma가 추구한 디자인 도구의 방향 - Figma는 창작 도구가 사용자를 제한하는 것이 아니라 **사용자의 역량을 강화해야 한다**는 믿음에서 출발했다. - 디자인 작업은 특정 소프트웨어나 조직 안에 고립되기보다 누구나 접근할 수 있고 협업 가능해야 한다고 주장한다. - 기존의 배타적이고 분리된 디자인 작업 방식을 넘어, 웹을 기반으로 여러 사용자가 함께 작업하는 환경을 지향했다. - 새로운 작업 방식을 도입하는 과정은 혼란스럽고 시간이 걸릴 수 있지만, 사용자·직원·투자자들의 초기 지원이 성장의 기반이 되었다. ## 창업 배경과 제품 철학 - 공동 창업자 **Dylan Field**와 **Evan Wallace**는 Brown University에서 컴퓨터 과학과 수학을 공부하며 웹 기반 디자인 도구를 실험했다. - 이후 Thiel Fellowship의 지원을 받아 Figma를 시작했다. - Figma는 창작과 협업을 웹에서 구현함으로써 디자인을 더 개방적이고 연결된 작업으로 바꾸려는 목표를 세웠다. - 글은 이번 투자를 단순한 자금 조달이 아니라, Figma가 처음부터 유지해 온 협업 중심의 비전을 확장할 기회로 설명한다. 이번 투자는 Figma가 웹 기반 협업 디자인 도구 시장에서 성장할 수 있는 재정적·전략적 기반을 마련했다는 의미가 있다. 특히 SaaS 성장 경험이 있는 투자자의 참여와 기존 투자자들의 후속 투자는 Figma의 제품 철학과 시장 확장 가능성에 대한 신뢰를 뒷받침한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마, 전 세계 6

Figma는 디자인 시스템 구축 과정에서 겪는 문제와 경험을 공유할 수 있도록 전 세계 6개 도시에서 커뮤니티 밋업을 개최한다고 발표했다. 원래 소규모 저녁 식사 모임으로 계획했지만, 예상보다 큰 관심으로 더 많은 디자이너가 참여할 수 있는 밋업 형식으로 전환했다. 첫 행사는 나이지리아 라고스에서 300명 이상이 참석하며 디자인 시스템에 대한 글로벌 커뮤니티의 높은 수요를 보여주었다. ## 전 세계 6개 도시에서 열리는 밋업 - 개최 도시는 다음과 같다. - 라고스, 나이지리아: 2018년 1월 27일 - 토론토, 캐나다: 2018년 2월 23일 - 방갈로르, 인도 - 암스테르담, 네덜란드 - 뉴욕, 미국 - 로스앤젤레스, 미국 - 각 지역의 디자이너들이 디자인 시스템 구축 경험과 시행착오를 발표한다. - 가능한 경우 Figma 관계자가 직접 참석해 발표하고 현지 디자이너들과 교류한다. - 행사는 도시별 커뮤니티의 특성에 맞게 다르게 구성된다. ## 커뮤니티 수요에 따른 행사 형식 전환 - Figma는 2017년 11월 DesignSystems.com을 시작하며 설문을 진행했다. - 설문에는 수천 건의 응답이 모였고, 호스트나 파트너로 참여하겠다는 지원도 이어졌다. - 처음에는 소규모 저녁 식사 형태를 계획했지만, 참석 희망자가 너무 많아 참여 기회를 제한할 우려가 생겼다. - 이에 따라 더 많은 디자이너가 참여할 수 있는 공개 밋업 형식으로 변경했다. - Figma는 행사의 성공이 회사 단독이 아니라 지역 커뮤니티의 자원봉사와 협력 덕분이라고 강조했다. ## 첫 개최지: 라고스 - 라고스는 나이지리아에서 Figma 사용자가 가장 많이 모여 있는 지역 중 하나이며, 성장하는 기술 산업을 보유하고 있다. - Andela와 hotels.ng 같은 기업이 아프리카 및 글로벌 시장에서 활동하며 지역 기술 생태계를 확장하고 있다. - Figma는 무료 요금제와 클라우드 기반 환경을 제공해 현지 디자이너들이 직장 컴퓨터뿐 아니라 인터넷 카페에서도 디자인 작업에 접근할 수 있게 했다. - 행사는 hotels.ng의 디자이너 Namnso Ukpanah가 주최했다. - hotels.ng, Andela, Paystack의 디자이너들과 Figma CEO Dylan Field가 발표자로 참여했다. - 첫 라고스 행사에는 300명 이상이 참석했다. ## 도시 밋업을 만드는 방법 - 특정 도시에서 행사를 개최하려면 해당 지역 디자이너들의 관심과 자원봉사 호스트가 필요하다. - DesignSystems.com을 통해 커뮤니티의 개최 의사를 알리거나 직접 호스트로 등록할 수 있다. - 이미 예정된 행사에 대한 자세한 내용은 Figma 마케팅팀에 “Design Systems”라는 제목으로 문의하도록 안내했다. ## DesignSystems.com의 확장 - Figma는 설문과 밋업에서 얻은 데이터를 종합해 DesignSystems.com을 더 포괄적인 플랫폼으로 개편할 계획이다. - 단순한 행사 안내를 넘어 디자인 시스템 관련 커뮤니티와 정보를 연결하는 공간으로 발전시키려는 방향을 제시했다. ## 실용적인 시사점 디자인 시스템은 도구나 문서만으로 완성되는 것이 아니라, 조직과 지역 커뮤니티가 경험과 문제를 공유할 때 더 빠르게 발전한다. 비슷한 문제를 겪는 팀이라면 공개 밋업, 사용자 그룹, 사내 발표 등을 통해 사례를 공유하고, 지역 디자이너를 행사 기획과 운영에 적극적으로 참여시키는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

퀄리티 위크 동안 Figma에서

Figma는 신규 기능 개발만큼 기존 제품의 품질 개선도 중요하다고 보고, 전 직원이 일주일 동안 버그 수정에 집중하는 ‘Quality Week’를 운영했다. 이 기간에는 사소하지만 반복적으로 사용자 경험을 해치는 버그와 완성도가 낮은 기능을 집중적으로 개선했으며, 제품을 더 빠르고 안정적이며 직관적으로 만드는 데 목적이 있었다. Quality Week는 사용자 만족뿐 아니라 구성원들이 평소 다루지 않던 코드 영역을 경험하고 팀 전체의 품질 의식을 높이는 기회가 되었다. ## 전사적인 품질 개선 주간 - 2017년 초 Figma는 첫 공식 Quality Week를 시작했다. - 엔지니어와 디자이너를 포함한 전 직원이 기존 프로젝트를 잠시 멈추고 제품의 “봄맞이 청소”에 참여했다. - 대상은 치명적인 장애뿐 아니라 다음과 같은 문제였다. - 기능은 동작하지만 사용하기 불편한 버그 - 전문적인 디자인 도구의 기준에 미치지 못하는 세부 동작 - 오랜 시간 반복 사용될 때 불편함이 누적되는 작은 결함 - 디자이너는 Figma를 장시간 사용하므로 작은 오류도 반복되면서 큰 불만으로 이어질 수 있다고 판단했다. - 기능 출시를 계속하는 대신 버그 수정에 집중함으로써 제품의 속도, 안정성, 직관성을 높이려 했다. ## Quality Week 2018의 주요 개선 사항 - 2018년부터 Quality Week를 정기적인 Figma의 전통으로 만들었다. - 두 엔지니어링 팀이 협력해 다양한 버그를 폭넓게 처리하고, 특히 전문 디자인 도구로서 문제가 되는 기능을 우선순위에 두었다. - 대표적인 개선 내용은 다음과 같다. - **Figma Mirror**: 모바일에서 디자인을 확인하는 미러링 앱의 안정성을 높이고 충돌을 줄였다. - **Sketch 가져오기**: Sketch 파일을 편집기 창으로 직접 드래그 앤 드롭할 수 있게 했으며, 텍스트 객체의 변환 정확도를 개선했다. - **Chromebook 지원**: 검색 키와 드래그를 조합해 객체를 복제할 수 있도록 해 학생 등 Chromebook 사용자의 편의성을 높였다. - **레이어 패널**: 레이어를 이동할 때 그룹과 프레임 안에 더 자연스럽게 중첩되도록 동작을 개선했다. - 모든 버그를 해결한 것은 아니며, Quality Week는 연중 진행되는 일반적인 버그 수정과 별도로 집중적인 개선 시간을 확보하는 방식이다. ## 오래된 버그를 해결하는 조직적 가치 - Quality Week의 효과는 사용자에게 제공되는 수정 사항에만 국한되지 않았다. - 개발자와 디자이너가 평소 담당하지 않던 코드베이스와 기능 영역을 살펴볼 수 있었다. - 이를 통해 구성원들이 제품 전체 구조를 더 폭넓게 이해하고 협업할 기회를 얻었다. - 2015년부터 Windows 사용자에게 영향을 주던 오래된 버그가 해결되었고, 이를 기념해 ‘가장 오래된 버그’ 상을 수여했다. - 버그 수정 과정을 행사와 시상식으로 즐겁게 만들어, 반복적이고 비 glamour한 작업에도 성취감을 부여했다. ## 사용자 피드백을 품질 개선에 활용 - 수정된 버그 중 상당수는 Figma 커뮤니티가 제보한 문제에서 비롯되었다. - 사용자는 제품 내부의 도움말 메뉴에서 **Contact Us**를 선택하거나 Twitter, 커뮤니티 포럼, 이메일을 통해 피드백을 보낼 수 있었다. - Figma는 지원팀만이 아니라 엔지니어, 경우에 따라 CEO까지 직접 사용자 지원에 참여하는 ‘전사적 지원’ 문화를 강조했다. - 이는 실제 사용 환경에서 발견되는 문제를 개발팀이 빠르게 이해하고 제품 개선에 반영하는 기반이 되었다. ## 실용적인 결론 신규 기능 출시와 기술 부채·버그 정리는 균형 있게 운영해야 한다. 정기적으로 전사 또는 팀 단위의 집중 품질 개선 기간을 마련하고, 오래된 버그와 반복적인 사용성 문제를 사용자 피드백에 따라 우선 처리하면 제품 완성도와 팀의 코드베이스 이해도를 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

#FigmaTip 라운

이 글은 Figma 디자인 커뮤니티에서 공유된 유용한 단축 동작과 작업 팁을 모은 #FigmaTip Roundup이다. 별도 기능을 의식하지 않아도 자연스럽게 사용할 수 있는 직관적인 상호작용부터, 이미지 가져오기·중첩 레이어 탐색·균등 간격 배치처럼 반복 작업을 줄여 주는 기능까지 소개한다. 핵심은 Figma의 숨은 조작법을 익히면 디자인 작업을 더 빠르고 정밀하게 할 수 있다는 점이다. ## 폴더를 드래그해 이미지 일괄 가져오기 - 데스크톱의 폴더를 Figma 작업 화면으로 직접 드래그하면 폴더 안의 이미지 세트를 한 번에 가져올 수 있다. - 이미지를 하나씩 업로드하는 대신 여러 이미지나 에셋을 빠르게 배치할 때 유용하다. - 이미지가 많은 시안, 갤러리, 카드 목록 등을 구성할 때 작업 시간을 줄일 수 있다. ## Ctrl + 우클릭으로 중첩 레이어 탐색 - 오브젝트 위에서 **Ctrl 키를 누른 채 우클릭**하면 해당 위치에 포함된 중첩 레이어 목록을 확인할 수 있다. - 팝업에 표시된 레이어를 선택해 부모 오브젝트 안쪽의 특정 요소로 바로 이동할 수 있다. - 복잡한 컴포넌트나 여러 프레임이 겹쳐 있는 화면에서 원하는 레이어를 반복 클릭하지 않고 정확하게 선택할 수 있다. ## 빨간 가이드라인으로 동일한 간격 맞추기 - 오브젝트를 이동할 때 나타나는 빨간색 가이드라인을 이용하면 주변 요소와의 간격을 빠르게 동일하게 맞출 수 있다. - 먼저 가이드라인에 맞춰 요소를 배치한 뒤, 여러 요소를 선택해 **Distribute** 기능을 사용하면 일정한 간격의 열(column) 그리드를 만들 수 있다. - 수작업으로 좌표와 간격을 계산하지 않아도 정렬과 반복 레이아웃을 정밀하게 구성할 수 있다. ## 실용적인 활용 - 이미지가 많은 화면은 폴더 단위로 가져온 뒤, 가이드라인과 Distribute 기능으로 정렬한다. - 레이어 구조가 복잡할수록 Ctrl + 우클릭 탐색을 활용하면 선택 오류를 줄일 수 있다. - Figma의 단축키와 자동 가이드를 적극적으로 사용하면 반복적인 배치·선택 작업을 크게 단순화할 수 있다.

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