figma2026년 2월 3일

장인 정신을 담아: Figma (새 탭에서 열림)

Figma의 **Vectorize**는 래스터 이미지를 편집 가능한 벡터로 변환하는 AI 이미지 편집 도구다. 손그림, 사진으로 찍은 질감, 손글씨 등을 Figma 안에서 바로 벡터화해 크기·형태·색상·구성을 수정할 수 있어, 별도 도구로 재작업하거나 처음부터 다시 그리는 과정을 줄여준다. 이를 통해 원본의 개성을 유지하면서도 다양한 디자인에 재사용 가능한 자산으로 발전시킬 수 있다. ## 래스터 그림을 편집 가능한 벡터로 변환 - Figma Design 또는 Figma Draw에 이미지 파일을 드래그 앤 드롭한 뒤 **Vectorize**를 실행한다. - 연필 스케치나 손으로 그린 일러스트가 편집 가능한 벡터 일러스트로 변환된다. - 변환 후 크기, 형태, 배치, 전체 구성을 Figma 캔버스에서 직접 조정할 수 있다. - **Recolor** 슬라이더를 사용하면 색상과 도형을 단순화해 관리하기 쉬운 결과물을 만들 수 있다. - Figma의 **색상 변수(Color variables)**를 적용해 브랜드 색상이나 여러 디자인 테마에 맞게 팔레트를 일괄 변경할 수 있다. - 결과물은 일회성 이미지가 아니라, 여러 디자인에서 계속 수정하고 재사용할 수 있는 살아 있는 디자인 자산이 된다. ## 손글씨와 레터링을 로고로 발전시키기 - 종이에 쓴 글씨, 캘리그래피, 콜라주로 만든 문자를 사진이나 스캔 이미지로 Figma에 가져온다. - Vectorize를 실행하면 글자의 선과 곡선이 편집 가능한 벡터 형태로 변환된다. - 변환된 각 글자의 앵커 포인트를 조정해 획의 모양, 곡선, 글자 간격을 세밀하게 다듬을 수 있다. - **Remove background**로 불필요한 배경을 제거할 수 있다. - 바운딩 박스를 사용해 개별 글자를 이동하거나 크기를 조절하고, 색상을 변경해 로고나 타이포그래픽으로 발전시킬 수 있다. - 완성된 레터링은 커버 아트, 인터페이스, 브랜드 그래픽 등 다양한 맥락에 맞게 확대·변형해 사용할 수 있다. ## 기존 AI 이미지 편집 도구와의 연계 - Vectorize는 Figma의 기존 AI 이미지 편집 도구군에 추가된 기능이다. - 함께 소개된 기능으로는 **배경 제거(Remove background)**, **객체 지우기(Erase object)**, **이미지 확장(Expand image)**이 있다. - 이미지를 벡터화한 뒤 배경을 제거하거나 색상을 바꾸는 식으로 여러 편집 기능을 연속해서 적용할 수 있다. - 별도의 그래픽 편집 프로그램으로 파일을 옮기지 않고 Figma 안에서 작업을 이어갈 수 있다는 점이 핵심이다. ## 창작 과정의 개성을 유지하는 작업 방식 - 초기 아이디어가 노트의 스케치나 휴대폰으로 찍은 이미지처럼 비정형적인 형태로 시작해도 그대로 디지털 작업에 활용할 수 있다. - 기존 방식처럼 이미지를 다시 그리거나 여러 도구 사이를 오갈 필요가 줄어든다. - 원본의 손맛과 표현을 유지하면서도 벡터의 확장성, 편집성, 재사용성을 확보할 수 있다. - 한 번 변환한 결과물을 브랜드 시스템이나 여러 화면 디자인에 맞게 지속적으로 발전시킬 수 있다. 실무에서는 손그림이나 손글씨를 먼저 자연스럽게 만든 뒤 Vectorize로 변환하고, 불필요한 배경 제거와 색상 변수 적용을 거쳐 브랜드 자산으로 정리하는 방식이 유용하다.

vector-graphicsfigmafigma-designai-image-editing+2

figma2025년 7월 24일

제품 아이콘의 제작 과정 (새 탭에서 열림)

Figma의 제품 아이콘은 단순한 장식이 아니라 각 제품의 정체성과 기능을 작은 공간에 압축한 상징이다. 디자이너 Tim Van Damme는 일관된 제작 규칙을 바탕으로 제품의 본질을 탐구하고, 수십~수백 개의 시안을 반복 실험해 최종 아이콘을 완성한다. 정해진 공식은 창의성을 제한하는 것이 아니라, 다양한 아이디어를 하나의 제품군으로 묶는 기반이 된다. ## 일관성을 만드는 아이콘 제작 가이드라인 - Figma에 공식적인 아이콘 시스템이 없던 상황에서 Tim이 직접 제작 원칙을 수립했다. - 주요 규칙은 다음과 같다. - 선 두께는 1픽셀로 통일한다. - 내부 컷아웃도 1픽셀 두께를 유지한다. - 선의 끝부분은 둥글게 처리한다. - 아이콘이 주어진 공간을 최대한 균형 있게 채우도록 구성한다. - 다양한 사용 환경을 고려해 세 가지 크기로 제작한다. - 아이콘은 툴바뿐 아니라 대형 광고판과 마케팅 자료에도 사용되므로, 확대·축소했을 때도 형태가 명확해야 한다. - 축소했을 때 선이 뭉개지거나 요소 간 구분이 어려우면 초기 단계에서 해당 시안을 폐기한다. ## 제품의 본질에서 출발하기 - 아이콘은 브랜드 전체의 규칙뿐 아니라 개별 제품의 시각적 정체성도 표현해야 한다. - 작은 공간에 많은 의미를 담기 위해 디자인·제품 팀이 제품과 관련된 핵심 개념과 단어를 먼저 브레인스토밍한다. - Figma Community의 경우 다음과 같은 개념에서 출발했다. - 커뮤니티를 통한 연결 - 동료 간 지식 교환 - 함께 배우는 경험 - 이러한 키워드에서 사람, 나무, 책 같은 상징을 도출하고 다양한 형태로 발전시켰다. - Figma Buzz는 마법, 창작, AI 이미지 생성 같은 주제를 바탕으로 유리 구슬, 별, 마법을 연상시키는 형태를 탐색했다. ## 수십~수백 개의 시안으로 아이디어 발전시키기 - 초기 개념을 정한 뒤에는 하나의 아이디어를 빠르게 확정하지 않고, 아이콘 가족 전체를 반복적으로 변형한다. - 나무가 얼굴이 되고, 얼굴이 만다라가 되며, 추상적인 형태가 회전하고 얽히는 식으로 자유롭게 시각적 연상을 확장한다. - Tim은 창의적 감각을 유지하기 위해 의도적인 “창의적 방황”을 즐긴다고 설명한다. - Figma Make 아이콘을 만들 때는 움직임과 변형을 표현하기 위해 바퀴, 나비, 나침반, 피젯 스피너 등을 실험했다. - Figma Buzz에서는 날개 모양, 선, 더듬이 길이가 다른 벌 아이콘을 하루 동안 수백 개 제작했다. - 반복 작업은 Figma의 가변 폭 선(variable width stroke)과 여러 벡터 레이어 동시 편집 기능을 활용해 효율화했다. ## 규칙과 실험의 균형 - 아이콘 제작에는 선 두께, 크기, 균형 같은 명확한 제약이 있지만, 그 안에서 상징과 형태를 자유롭게 탐험한다. - 따라서 일관된 시스템은 결과를 획일적으로 만드는 공식이 아니라, 창의적인 실험이 브랜드 전체와 조화를 이루도록 돕는 틀이다. - 기존 제품 아이콘을 재설계하고 신규 제품 아이콘을 추가하면서도 전체 제품군이 하나의 시각적 체계로 보이도록 조정했다. 제품 아이콘을 설계할 때는 먼저 일관된 시각 규칙을 정하고, 제품의 핵심 가치를 키워드로 구체화한 뒤, 충분한 수의 변형을 실험하는 접근이 효과적이다. 최종 결과보다 탐색 과정에서 많은 가능성을 비교하고, 실제 사용 크기에서 명확성과 균형을 검증하는 것이 중요하다.

vector-graphicsfigmadesign-systemsai-image-generation+1

figma2018년 12월 4일

피그마의 PDF 내보 (새 탭에서 열림)

Figma는 디자인을 정확하게 보존하는 고품질 PDF 익스포터를 만들기 위해 기존 라이브러리 대신 자체 PDF 라이브러리를 처음부터 개발했다. PDF의 벡터 특성을 활용해 확대해도 선명한 결과를 제공하는 동시에, 그림자·블러·복잡한 그라디언트처럼 PDF에서 표현하기 어려운 요소도 가능한 한 래스터화하지 않고 구현했다. 다양한 PDF 뷰어의 호환성 문제까지 고려해 정밀도와 실용성을 모두 확보하는 것이 이 프로젝트의 결론이다. ## Figma에서 PDF 내보내기 - 레이어를 선택한 뒤 속성 패널 하단에서 PDF 형식으로 내보낼 수 있다. - 아무것도 선택하지 않으면 페이지 전체를 내보낸다. - 파일 메뉴의 **“Export Frames to PDF”**를 사용하면 한 페이지의 모든 프레임을 하나의 다중 페이지 PDF로 만들 수 있다. - 프레임은 Figma 캔버스의 위치에 따라 왼쪽 위에서 오른쪽 아래 순서로 PDF 페이지에 배치된다. - PDF는 iOS 개발, 인쇄, 정밀한 색상 처리 등 다양한 용도로 활용되므로 Figma 사용자들의 요구가 특히 컸던 기능이다. ## 자체 PDF 라이브러리를 개발한 이유 - Figma 팀은 PDF 관련 문서 1,300쪽을 검토하고 기존 라이브러리를 조사했다. - 기존 도구들은 복잡한 디자인 요소를 처리할 때 품질과 제어력 측면에서 타협이 필요했다. - PDF는 PNG처럼 단순한 이미지가 아니라 텍스트와 도형을 설명하는 벡터 형식이다. - 따라서 확대해도 텍스트와 선이 선명하게 유지된다. - 동시에 벡터 도형, 임베디드 이미지, 색상·셰이딩 정보를 함께 다뤄야 하므로 구조가 훨씬 복잡하다. - 구현이 어려운 효과를 이미지로 래스터화하면 개발은 쉬워지지만, 큰 인쇄물이나 다양한 크기의 디지털 에셋에서 픽셀이 드러날 수 있다. - 자체 라이브러리를 만들면서 어떤 요소를 벡터로 표현하고 언제 래스터화를 허용할지 직접 통제할 수 있게 됐다. ## 그림자와 블러의 정밀한 처리 - PDF에는 그래픽 셰이더처럼 그림자와 블러를 직접 계산할 수 있는 수준의 제어 기능이 부족하다. - Figma는 그림자와 블러 효과를 코드로 합성해 결과를 만들어냈다. - 흐릿한 영역만 고해상도로 래스터화하고 이를 소프트 마스크로 사용한다. - 그림자 뒤에 있는 다른 도형은 계속 선명하게 유지된다. - 전체 디자인을 이미지로 바꾸는 것보다 래스터화 범위를 크게 줄일 수 있다. - 블러가 부모 경로의 경계를 넘지 않도록 벡터 방식으로 클리핑한다. - 그 결과 블러 효과와 부모 경로 사이에 부자연스러운 틈이나 균열이 생기는 문제를 방지한다. ## 단순한 그라디언트와 복잡한 그라디언트 - 선형 및 타원형 그라디언트는 PDF가 제공하는 셰이딩 기능으로 비교적 쉽게 표현할 수 있다. - 반면 각도형 그라디언트와 Figma의 다이아몬드 그라디언트는 구현이 어렵다. - PDF에서는 복잡한 그라디언트를 여러 개의 단순한 색상 영역으로 쪼개 이어 붙이는 방식으로 표현해야 한다. - 이 방식은 단순 래스터화보다 품질이 좋지만 다음 문제가 발생한다. - 영역을 어떻게 근사할지에 대한 수학적 계산이 필요하다. - 근사 과정에서 수치 오차가 누적될 수 있다. - 색상 경계가 눈에 띄지 않도록 세밀한 조정이 필요하다. ## PDF 뷰어 간 호환성 문제 - PDF 표준은 매우 광범위하지만 모든 뷰어가 모든 기능을 완전히 지원하지는 않는다. - 특히 고급 셰이딩 기능은 뷰어마다 지원 방식이나 버그가 다르다. - 각도형 그라디언트는 PDF에서 여러 가지 우아한 구현 방법이 가능하지만, 주요 뷰어와 macOS 미리보기에서 모두 안정적으로 동작하는 방법은 제한적이었다. - 따라서 표준에 맞는 것만으로는 충분하지 않고, 실제 사용자가 이용하는 주요 뷰어에서 동일하게 보이는 구현을 선택해야 했다. ## 래스터화와의 싸움 - Figma는 복잡한 효과를 무조건 이미지로 변환하는 대신 가능한 한 벡터 표현을 유지하는 방향을 택했다. - 이는 다음 환경에서 특히 중요하다. - 대형 인쇄물처럼 출력 크기가 큰 경우 - 동일한 디자인을 여러 해상도와 크기로 재사용하는 경우 - 클라이언트나 이해관계자에게 정밀한 결과물을 전달해야 하는 경우 - 다만 모든 효과를 완전히 벡터화하는 작업은 끝난 것이 아니며, 향후에도 래스터화 감소와 고급 내보내기 옵션을 계속 개선할 계획이라고 밝혔다. 실무적으로는 인쇄나 확대 사용이 예정된 디자인일수록 Figma의 PDF 내보내기를 우선 고려할 만하다. 다만 복잡한 효과가 포함된 결과물은 사용 대상인 PDF 뷰어와 실제 출력 환경에서 반드시 검수하는 것이 좋다.

vector-graphicsfigmasvgpdf+3

figma2018년 9월 4일

피그마 기능 하이라이트 (새 탭에서 열림)

Figma의 Sketch Import 기능은 Sketch 사용자가 기존 작업물을 잃지 않고 Figma로 전환하도록 돕는 기능이다. Sketch 파일의 페이지, 크기 조정 제약, 벡터, 심볼 등을 높은 정확도로 보존하며, 여러 운영체제와 협업 환경을 연결한다. 글은 이 기능이 단순한 마이그레이션 도구를 넘어 Sketch와 Figma를 오가며 협업할 수 있게 하는 핵심 기능이라고 강조한다. ## Sketch Import이 필요한 이유 - **Figma로의 초기 전환 지원** - Sketch에서 Figma로 옮기는 사용자가 기존 디자인을 처음부터 다시 만들 필요가 없다. - 과거 Photoshop에서 Sketch로 전환할 때와 같은 큰 작업 부담을 줄여준다. - 기존 파일을 안정적으로 가져올 수 있어 새로운 도구를 시험하기 쉽다. - **운영체제가 다른 팀의 협업** - Sketch는 Mac 전용이지만 Figma는 다양한 운영체제에서 사용할 수 있다. - Windows나 Linux를 사용하는 개발자도 Sketch 파일을 Figma로 가져와 디자인 사양을 확인할 수 있다. - 서로 다른 디자인 도구를 사용하는 팀원들이 동일한 작업물을 기준으로 협업할 수 있다. - **Sketch와 Figma를 병행하는 작업 방식** - 디자이너가 Sketch에서 작업한 뒤 Figma로 파일을 옮겨 디자인 리뷰나 원격 협업을 진행할 수 있다. - Figma의 댓글 기능을 활용해 팀원 및 외부 이해관계자와 의견을 주고받을 수 있다. - 한 가지 도구만 강제하지 않고 작업 목적에 따라 도구를 선택할 수 있다. ## 높은 변환 정확도 - Sketch Import은 Sketch 파일의 구조와 시각적 요소를 최대한 보존하도록 설계되었다. - 다음과 같은 요소를 가져올 수 있다. - 페이지 구조 - 크기 조정 제약 조건 - 벡터 데이터 - Sketch의 심볼 - Sketch의 심볼은 Figma에서 **컴포넌트**로 변환된다. - 따라서 디자인 시스템을 구축하거나 유지하는 조직도 기존 컴포넌트 구조를 활용할 수 있다. - 글에서는 실제 사용자가 Angle 파일을 가져온 사례를 통해 벡터와 컴포넌트가 거의 완벽하게 유지된다고 소개한다. - 변환 과정에서 문제가 발생하면 Figma 앱 내부의 지원 위젯을 통해 문의할 수 있다. ## Sketch 파일을 가져오는 방법 - Figma 파일 공간에 Sketch 파일을 **드래그 앤 드롭**한다. - Figma 툴바의 가져오기 기능을 사용한다. - 단축키를 사용한다. - macOS: `Command + Shift + K` - Windows: `Control + Shift + K` - 가져오기가 완료되면 가져온 이미지와 디자인 요소가 포함된 새로운 Figma 파일이 자동으로 생성된다. ## 커뮤니티 중심의 기능 소개 - Figma는 새 기능 출시 소식이나 릴리스 노트가 쉽게 묻힐 수 있다는 점을 언급하며, 이미 출시된 유용한 기능을 다시 소개한다. - Sketch Import은 2015년 6월에 출시됐지만 이후에도 사용자들이 계속 새롭게 발견하는 기능으로 소개된다. - 다음에 어떤 기능을 다룰지는 Figma 커뮤니티의 의견을 바탕으로 결정하려 했다. Sketch Import은 기존 Sketch 자산을 Figma로 옮겨야 하는 개인과 팀에게 유용한 마이그레이션 수단이다. 특히 디자인 시스템, 운영체제가 다른 협업 환경, 원격 리뷰가 필요한 프로젝트라면 파일을 가져온 뒤 페이지와 컴포넌트가 제대로 변환되는지 확인하고 적극적으로 활용하는 것이 좋다.

vector-graphicsfigmadesign-systemsui-ux+2

figma2018년 8월 21일

#FigmaTip 라운드업 (새 탭에서 열림)

Figma의 10번째 팁 모음은 디자이너 Charli Marie의 리뷰에서 소개된, 작업 속도와 파일 정리 효율을 높이는 기능들을 정리한 글이다. 핵심은 레이어 단축키, 빈 그룹 자동 삭제, 속성별 복사, 이미지 fill 설정, 벡터 네트워크 등을 활용하면 Sketch나 Illustrator를 열지 않고도 더 빠르고 깔끔하게 작업할 수 있다는 것이다. ## 레이어 순서 조정 단축키 - `Command + [` 및 `Command + ]`로 선택한 레이어를 앞뒤로 이동할 수 있다. - 레이어 패널에서 직접 드래그하지 않아도 되므로 디자인 중 요소의 순서를 빠르게 바꿀 수 있다. - 메뉴에 단축키가 표시되어 있어 잊어버렸을 때 확인하기 쉽다. - Photoshop과 유사한 방식이라 기존 사용자도 쉽게 익힐 수 있다. ## 빈 그룹 자동 삭제 - 그룹 안의 모든 요소를 삭제하면 해당 그룹도 자동으로 사라진다. - 내용이 없는 그룹을 수동으로 찾아 삭제할 필요가 없다. - 요소를 다른 곳으로 옮긴 뒤 빈 그룹이 남아 파일이 지저분해지는 문제를 줄여준다. - 결과적으로 레이어 패널을 더 깔끔하게 유지할 수 있다. ## 개별 속성만 복사하기 - 한 도형의 속성을 다른 도형에 복사할 때 전체 속성 또는 일부 속성만 선택할 수 있다. - 복사 가능한 예시는 다음과 같다. - Fill - Font - Stroke - 기존 디자인에서 잘 설정된 특정 속성만 다른 요소에 적용할 수 있다. - 전체 스타일을 덮어쓰지 않고 필요한 부분만 재사용할 수 있어 반복 작업이 빨라진다. ## 마스크 대신 이미지 Fill 활용 - Figma에 이미지를 삽입하면 이미지가 독립적인 이미지 객체가 아니라, 이미지가 Fill로 적용된 사각형 형태로 생성된다. - Fill 설정에서 이미지를 조정할 수 있다. - Crop - Tile - 이미지 표시 방식과 위치 - 이미지 크롭을 위해 여러 마스크를 만들 필요가 줄어든다. - 처음에는 기존 그래픽 도구와 달라 혼란스러울 수 있지만, 이미지 배치와 편집을 단순화하는 방식이다. ## 벡터 네트워크로 복잡한 도형 만들기 - Figma의 벡터 네트워크에서는 하나의 점이 두 개 이상의 선과 연결될 수 있다. - 일반적인 벡터 편집 도구의 경로 구조보다 자유로운 형태의 도형을 만들 수 있다. - 복잡한 벡터를 제작할 때 Illustrator로 파일을 옮겨야 하는 상황을 줄여준다. - 기존 벡터 편집 방식과 달라 적응이 필요하지만, 익숙해지면 Figma 안에서 대부분의 작업을 처리할 수 있다. ## 실용적인 활용 Figma 작업 속도를 높이려면 레이어 이동 단축키를 우선 익히고, 반복되는 스타일은 필요한 속성만 복사하는 것이 좋다. 이미지 작업에서는 마스크를 무조건 사용하는 대신 Fill 설정을 확인하고, 복잡한 아이콘이나 도형은 벡터 네트워크를 활용하면 파일 구조를 단순하게 유지하면서 효율적으로 제작할 수 있다.

vector-graphicsfigmaui-ux-designsketch+2

figma2018년 8월 14일

피그마의 새로운 SVG 내 (새 탭에서 열림)

Figma는 SVG에 정보를 최대한 많이 담는 방식보다, 단순하고 작은 마크업이 다양한 도구와 더 잘 호환된다는 결론에 도달했다. 새 SVG Exporter는 불필요한 구조와 중복을 제거하고, 기본 도형과 간결한 경로를 사용해 파일 크기와 가독성, 호환성을 개선했다. 특히 Android Studio처럼 SVG 일부 기능만 지원하는 도구에서도 더 안정적으로 가져올 수 있도록 설계했다. ## SVG가 도구마다 다르게 렌더링되는 이유 - SVG는 JPG·PNG와 달리 픽셀 이미지가 아니라 화면에 이미지를 그리는 명령어로 구성된 벡터 형식이다. - 확대해도 선명하기 때문에 로고, 아이콘, 반응형 웹 자산에 적합하다. - 하지만 SVG 마크업을 픽셀로 변환하는 표준 렌더링 방식은 없다. - 각 디자인 도구와 개발 도구가 자체 SVG 파서와 렌더러를 사용하며, SVG 사양 전체가 복잡해 많은 도구가 일부 기능만 지원한다. - 예를 들어 `defs`에 정의한 요소를 `use`로 재사용하는 기능은 Android Studio에서 대부분 제대로 지원되지 않는다. - Figma의 기존 SVG는 복잡한 그룹, 마스크, 클리핑 패스, 중복 참조 때문에 파일이 크고 사람이 읽기 어려웠다. - 사용자들은 SVGO, svgito 같은 후처리 도구를 사용하거나 SVG를 직접 정리해야 했다. ## “모든 정보를 보존하자”는 기존 접근의 한계 - Figma는 디자인 도구 간 SVG 교환이 보편적인 데이터 형식이 되기를 기대했다. - 그래서 다른 도구가 디자인을 정확하게 가져갈 수 있도록 SVG에 가능한 한 많은 구조적 정보를 포함했다. - 그러나 실제 생태계에서는 도구마다 지원 범위와 구현 품질이 달랐다. - 결과적으로 더 많은 정보가 정확성을 보장하기보다, 일부 도구에서는 import 실패와 파일 비대화의 원인이 됐다. - 새 Exporter는 이상적인 상호 운용성보다 실제 사용 환경에서의 호환성과 단순성을 우선한다. ## 기본 도형을 SVG 프리미티브로 표현 - 단순한 사각형과 원을 복잡한 `path` 명령어로 표현하지 않고 SVG의 기본 도형 요소를 사용한다. - 기존 방식: ```xml <path d="M0 100V0H100V100H0Z"/> ``` - 변경된 방식: ```xml <rect width="100" height="100"/> ``` - `rect`, `circle` 같은 요소는 의미가 명확해 사람이 읽고 수정하기 쉽다. - 마크업 길이도 줄어들어 파일 크기와 처리 부담을 낮춘다. ## 내부선과 외부선 처리 방식 개선 - SVG의 기본 stroke는 도형 경계의 중앙에만 그려진다. - 디자인 도구에서 지원하는 내부선(inside stroke)이나 외부선(outside stroke)을 표현하려면 별도 우회가 필요하다. - 기존 Figma 방식은 stroke 폭을 두 배로 늘린 뒤 `mask`로 불필요한 절반을 숨겼다. - 이 방식은 `mask`, 중복 경로, 추가 참조를 만들어 SVG를 복잡하게 만들었다. - 새 방식은 도형의 좌표 자체를 조정한다. - 내부선은 도형의 경계를 안쪽으로 이동한 뒤 원래 stroke 폭을 사용한다. - 외부선도 시각적 결과에 맞도록 경로 위치를 조정한다. - 따라서 마스크 없이도 유사한 시각적 결과를 얻고 마크업을 크게 줄일 수 있다. ## 불필요한 마크업 제거 - 렌더링에 직접 영향을 주지 않는 요소와 속성을 제거한다. - `title` - `desc` - 불필요한 `g` - `id` - `version` - 클리핑도 항상 출력하지 않고 실제로 필요할 때만 생성한다. - 기존에는 클리핑 여부와 관계없이 프레임에 `clipPath`를 넣었지만, 새 방식은 효과가 없는 마크업을 생략한다. - `defs`에 요소를 정의하고 `use`로 참조하던 구조도 가능한 경우 인라인 요소로 바꾼다. - 중복 제거 효과는 일부 포기하지만, 여러 SVG importer가 더 안정적으로 처리할 수 있고 구조가 훨씬 단순해진다. ## 최종 결과 - 작은 검은색 사각형과 회색 내부선을 표현하는 기존 SVG는 여러 단계의 그룹, 클리핑 패스, 마스크, `use` 참조로 구성됐다. - 새 SVG는 다음처럼 단일 `rect` 요소와 속성만으로 표현된다. ```xml <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="15" y="15" width="70" height="70" fill="black" stroke="#CCCCCC" stroke-width="10"/> </svg> ``` - 결과적으로 SVG가 더 작고, 읽기 쉽고, 직접 수정하기 쉬워졌다. - Android Studio 같은 제한적인 SVG 지원 환경과의 호환성도 개선됐다. Figma의 사례는 SVG를 생성할 때 정보와 추상화를 무조건 많이 보존하기보다, 실제 소비 도구가 안정적으로 이해할 수 있는 최소한의 마크업을 사용하는 것이 실용적임을 보여준다. SVG를 배포할 때는 기본 도형, 단순한 경로, 필요한 경우에만 사용하는 마스크·클리핑을 우선하고, SVGO 같은 최적화 도구로 후처리하는 것도 유용하다.

vector-graphicsfigmasvgandroid-studio+2

figma2018년 5월 21일

미처 생각지 못한 (새 탭에서 열림)

Figma는 단순한 UI 디자인 도구가 아니라, 실시간 협업 기능을 활용해 정보 정리·의사결정·반복 작업·창작·놀이까지 수행할 수 있는 다목적 협업 공간이다. 여러 사람이 같은 파일에서 동시에 작업하면 아이디어를 빠르게 구조화하고, 선호도를 확인하며, 대규모 작업을 분담할 수 있다. 글은 Figma의 멀티플레이어 기능을 활용하는 다섯 가지 방법을 소개한다. ## 흩어진 아이디어를 친화도 다이어그램으로 정리 - 리서치 결과나 브레인스토밍 아이디어를 디지털 스티키 노트처럼 Figma에 모을 수 있다. - 팀원들이 동시에 아이디어를 추가한 뒤, 서로 비슷한 개념을 묶어 주제별 그룹을 만든다. - 아이디어를 수집하고 분류하는 두 단계 과정을 통해: - 복잡한 정보를 구조화하고 - 중요한 주제를 우선순위화하며 - 대규모 프로젝트의 초기 방향을 정할 수 있다. - 원격으로도 화이트보드 기반 워크숍과 유사한 협업이 가능하다. ## 실시간 투표로 디자인 방향 결정 - 여러 디자인 시안을 한 파일에 배치하고, 팀원들이 선호하는 시안 옆에 원이나 점을 표시한다. - 디자인 스프린트에서 인쇄물에 스티커를 붙이는 방식과 비슷하지만, 별도의 출력 과정이 필요 없다. - 모든 팀원이 동시에 파일을 살펴보고 투표할 수 있어 개인별 선호도와 공통된 의견을 빠르게 확인할 수 있다. - 투표 결과는 디자인 선택 과정에서 논의를 구체화하고 의사결정을 돕는다. ## 디자인 조립 라인으로 반복 작업 분담 - 단순하고 반복적인 작업을 여러 사람에게 나누어 동시에 처리한다. - 각 팀원이 동일한 유형의 작업을 맡으면 전체 결과물을 더 빠르게 완성할 수 있다. - ClassPass 팀은 Figma를 사용해 여러 도시의 헬스장과 스튜디오 위치를 표시하는 30개 이상의 맞춤형 지도를 함께 제작했다. - 한 사람이 모든 작업을 순차적으로 수행하는 대신, 협업을 통해 대규모 작업을 병렬화한 사례다. ## 친구들과 함께 만화 제작 - 여러 사람이 같은 파일에서 실시간으로 그림을 그리고 아이디어를 주고받을 수 있다. - Figma의 벡터 네트워크를 활용하면 자유로운 형태의 일러스트를 유연하게 수정할 수 있다. - USC 학생 Louis Harboe와 Parker Malachowsky는 AI와 헬스케어에 관한 수업 발표를 더 쉽게 전달하기 위해 만화로 제작했다. - 긴 만화 작업을 효율적으로 관리하기 위해 다음 요소를 컴포넌트로 만들었다. - 말풍선 - 캡션 상자 - 이미지 패널 - 협업 기능은 교육 자료나 복잡한 주제를 대중적으로 설명하는 콘텐츠 제작에도 활용될 수 있다. ## 게임으로 분위기 전환 - Figma는 업무뿐 아니라 가벼운 놀이와 팀 친목 활동에도 사용할 수 있다. - 팀원들이 디자인 도구 안에서 간단한 게임을 만들고 함께 플레이하며 창의성을 발휘할 수 있다. - 실시간 커서 공유와 공동 편집 기능은 게임 제작 과정 자체를 협력적인 놀이로 바꾼다. - 생산성 지표나 업무 목표와 무관하게, 팀의 긴장을 풀고 즐거운 분위기를 만드는 용도로 활용할 수 있다. Figma를 디자인 결과물을 만드는 도구로만 한정하지 말고, 아이디어를 모으고 정리하며 함께 결정하는 협업 공간으로 활용하는 것이 좋다. 특히 원격 회의, 반복 작업, 워크숍, 교육 콘텐츠 제작에서는 실시간 공동 편집과 컴포넌트 기능을 적극적으로 사용하면 효율과 참여도를 높일 수 있다.

vector-graphicsfigmareal-time-collaborationdesign-sprints+1

figma2018년 4월 2일

스쿼클을 간절히 찾 (새 탭에서 열림)

피그마 엔지니어가 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 곡선을 조합해 스퀴클 모서리를 구성하는 가설이 제시되며 다음 단계로 이어진다. 정확한 그래픽 구현에서는 시각적으로 비슷한 근사식과 실제 디자인을 충실히 재현하는 모델을 구분해야 한다. 특히 곡률 연속성처럼 작은 수학적 차이가 최종 형태의 인상과 품질을 좌우할 수 있으므로, 공식의 단순성보다 실제 데이터와의 검증이 중요하다.

vector-graphicsfigmaiosbezier-curves+2

figma2018년 2월 6일

피그마 팁 모 (새 탭에서 열림)

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

vector-graphicsfigmadesign-systemsui-design+1

figma2016년 11월 16일

벡터 네트워크의 삭제 및 복구 | (새 탭에서 열림)

Figma의 “삭제 후 복구(Delete and Heal)”는 정점을 단순히 제거하는 기능이 아니라, 주변 선과 곡률을 최대한 보존하며 벡터 구조를 재구성하는 작업이다. 단순한 경로에서는 인접 정점을 연결하면 되지만, 곡선과 벡터 네트워크에서는 베지어 곡선 근사와 그래프 구조를 함께 고려해야 한다. Figma는 이 기능을 통해 복잡한 벡터 네트워크에서도 자연스러운 편집 결과를 제공한다. ## 삭제와 삭제 후 복구의 차이 - 일반적인 정점 삭제는 해당 정점에 연결된 모든 선분과 그 선분에 닿는 채우기 영역을 함께 제거한다. - “삭제 후 복구”는 삭제된 정점 양쪽의 구조를 새 선으로 연결해 기존 형태를 유지하려는 기능이다. - 한쪽에만 선이 연결된 정점은 연결할 대상이 없으므로 선을 제거한다. - 삼각형처럼 정점 수가 줄어드는 경우에도 결과가 항상 같지는 않다. - 어떤 경우에는 두 정점 사이의 단일 선으로 축소된다. - 다른 경우에는 두 개의 선이 유지될 수 있다. - Figma는 정점과 선의 연결 관계에 따라 결과를 다르게 처리한다. ## 곡선의 형태를 보존하는 복구 - 곡선 위의 정점을 삭제하면 단순히 양 끝점을 직선으로 연결할 경우 기존 곡률이 사라진다. - 다른 도구는 인접 정점의 곡률 핸들 위치를 그대로 유지하는 경우가 많다. - Figma는 원래 곡선을 최대한 근사하도록 인접 정점의 제어 핸들을 조정한다. - 각 곡선 선분은 cubic Bézier curve로 표현된다. - 복구 문제는 다음 두 개의 cubic Bézier 곡선을 하나의 곡선으로 근사하는 문제로 바뀐다. - 첫 번째 곡선: `(P0, P1, P2, P3)` - 두 번째 곡선: `(P3, P4, P5, P6)` - 새 곡선: `(P’0, P’1, P’2, P’3)` - 벡터 네트워크의 나머지 부분을 변경하지 않기 위해 새 곡선의 양 끝점은 고정한다. - `P’0 = P0` - `P’3 = P6` - 따라서 계산해야 하는 것은 새 곡선의 제어점 `P’1`, `P’2`다. ## 베지어 곡선 근사 알고리즘 - 먼저 두 기존 곡선을 따라 여러 샘플 점을 생성한다. - cubic Bézier의 매개변수 `t`에 값을 대입해 곡선 위의 점을 계산한다. - 두 곡선이 공유하는 끝점은 중복해서 세지 않는다. - 예를 들어 각 구간에 여러 `t` 값을 적용하면 전체 연결 곡선 위의 샘플 점 목록을 얻을 수 있다. - 생성된 점들을 하나의 cubic Bézier 곡선으로 피팅한다. - Figma는 Philip J. Schneider의 “An Algorithm for Automatically Fitting Digitized Curves” 알고리즘과 관련 구현을 활용한다. - 결과적으로 삭제 전의 곡률을 완벽히 복원하지는 않지만, 시각적으로 자연스러운 단일 곡선을 얻는다. ## 벡터 네트워크와 그래프 기반 삭제 - Figma의 벡터 객체는 일반적인 순차 경로가 아니라 무방향 그래프로 표현된다. - 더 정확히는 각 선 자체의 식별성을 가진 무방향 멀티그래프다. - 따라서 하나의 정점에 최대 두 개의 선만 연결된다는 경로 기반 도구의 가정을 사용할 수 없다. - 삭제 대상 정점에 세 개 이상의 선이 연결될 수 있으며, 이 경우 어떤 선끼리 연결할지 결정해야 한다. - 연결된 선의 개수가 홀수라면 모든 인접 선을 제거한다. - 남는 선을 자연스럽게 짝지을 방법이 없기 때문이다. - 연결된 선의 개수가 짝수라면 선들을 쌍으로 묶어 새 선을 만든다. - 이때 “서로 반대편에 있는 선”을 정의하기 위해 정점에서 뻗어나가는 선을 각도 기준으로 정렬한다. - 정렬된 방향을 바탕으로 서로 마주 보는 선끼리 연결해 네트워크 구조를 복구한다. ## 실용적인 결론 벡터 편집기의 삭제 기능은 단순한 데이터 제거가 아니라, 그래프 연결성·곡선 근사·사용자 기대를 함께 처리하는 기하학적 재구성 문제다. 특히 벡터 네트워크를 지원하려면 정점 차수가 2를 넘는 상황과 곡선 제어점까지 고려해야 하며, Bézier 샘플링과 곡선 피팅을 결합하는 방식이 실용적인 해결책이 된다.

vector-graphicsbezier-curvescomputational-geometrygraph-theory+2

figma2016년 2월 8일

벡터 네트워크 소개 | 피그 (새 탭에서 열림)

Figma는 기존의 단일 경로(path) 모델을 확장한 **벡터 네트워크(vector networks)** 를 소개한다. 벡터 네트워크는 점과 선을 자유롭게 연결·분리할 수 있어 복잡한 도형을 더 직관적으로 편집하게 해주며, 기존 벡터 데이터와의 호환성도 유지한다. 직접 곡선을 구부리고 영역을 클릭해 채우거나 뚫을 수 있어, 기존 벡터 편집기의 불편한 동작을 크게 줄이는 것이 결론이다. ## 기존 경로 모델의 한계 - 기존 path는 두 끝점을 가진 선과 곡선이 하나의 연속된 체인을 이루는 구조다. - 펜 플로터가 선을 따라 이동하듯, 점과 곡선을 정해진 순서로 연결해야 한다. - 세 개 이상의 선이 한 점에 연결되는 구조를 표현하기 어렵다. - 일부를 삭제하거나 도형을 분리·재결합할 때 사용자가 연결 관계를 직접 관리해야 해 조작이 부자연스럽다. - 선을 연결하거나 해제하는 동작도 상황에 따라 다르게 작동해 직관성이 떨어진다. ## 자유로운 연결을 지원하는 벡터 네트워크 - 벡터 네트워크에서는 임의의 두 점 사이에 선이나 곡선을 연결할 수 있다. - 모든 선이 하나의 단일 체인을 이룰 필요가 없으므로, 여러 선이 한 점에서 만나는 구조를 자연스럽게 표현한다. - 도형의 일부를 어디서든 삭제하고, 필요한 요소를 다시 연결할 수 있다. - 선의 cap과 join 스타일이 분기점에서도 자연스럽게 동작한다. - 기존 path와 동일한 곡선 데이터를 사용하므로 기존 벡터 데이터와의 하위 호환성을 유지한다. - 사용자 테스트에서는 많은 사용자가 구조적 차이를 의식하지 않아도 원하는 방식으로 편집할 수 있었다. ## 곡선을 직접 조작하는 벤드 도구 - 기존 벡터 그래픽은 cubic Bézier 곡선과 곡선 바깥에 위치한 control handle로 형태를 조정한다. - 따라서 사용자는 곡선 자체가 아니라 멀리 떨어진 핸들을 움직여야 했다. - Figma의 bend tool은 곡선 위를 직접 드래그할 수 있게 한다. - 사용자가 곡선을 원하는 위치로 움직이면 편집기가 적절한 control handle의 위치를 자동으로 계산한다. - 새로운 곡선 형식을 도입하는 대신 기존 Bézier 기반 구조를 유지해 호환성과 직접 조작성을 함께 확보했다. ## 직관적인 영역 채우기 - 기존 벡터 엔진은 winding number를 사용해 영역의 안팎을 판단한다. - 이 방식은 곡선을 시계 방향 또는 반시계 방향으로 그렸는지에 따라 채우기 결과가 달라진다. - 사용자는 곡선의 방향을 직접 볼 수 없기 때문에 구멍과 채우기 동작을 예측하기 어렵다. - Figma는 기본적으로 곡선이 둘러싼 모든 영역을 자동으로 채운다. - 구멍이 필요하면 곡선 방향을 조정하는 대신 paint bucket 도구로 해당 영역을 직접 토글해 채우기를 제거한다. - 이 방식은 음의 공간을 별도로 구성해야 했던 기존 접근보다 도형 내부와 구멍을 이해하기 쉽다. ## 개발 과정과 설계 방향 - 경로 모델처럼 기본적인 벡터 구조를 다시 설계하는 과정은 여러 시행착오를 거쳤다. - 초기에는 더 강력한 곡선 형식도 실험했지만, 기존 벡터 데이터와의 호환성을 위해 Bézier 곡선을 유지했다. - 영역 채우기는 특히 어려운 문제였으며, 사용자가 구멍을 직접 정의해야 하는 접근은 복잡하다는 결론을 내렸다. - 최종적으로 자유로운 연결, 직접 곡선 조작, 영역 토글 방식을 결합해 기존 편집기의 동작을 더 자연스럽게 만들었다. 벡터 네트워크의 핵심 가치는 새로운 그래픽 형식을 도입하는 데 있지 않고, 기존 벡터 구조를 유지하면서도 편집 방식을 사용자의 직관에 맞게 바꾼 데 있다. 벡터 편집기를 설계할 때는 내부 데이터 모델의 제약보다 사용자가 점·선·영역을 어떻게 직접 조작하고 싶어 하는지를 우선하는 것이 실용적인 방향이다.

vector-graphicsfigmabezier-curvesvector-networks+2

figma2016년 1월 20일

가구에서 스크린까지 (새 탭에서 열림)

가구는 완성 후 실수를 고치기 어렵지만, 디지털 제품은 매일 개선할 수 있다는 차이에서 출발한다. Figma는 가구처럼 사용자의 작업을 돕되 스스로는 눈에 띄지 않는 도구를 지향하며, 가구 디자인의 원칙을 도구·조작감·색상 설계에 적용했다. 궁극적으로 좋은 디자인 도구는 사용자가 도구 자체가 아니라 자신의 아이디어에 집중하게 해야 한다. ## 사용자의 삶을 돕고 사라지는 제품 - 가구의 목적은 빈 공간을 채우는 것이 아니라 그 안에서 이루어지는 생활을 지원하는 데 있다. - Figma 역시 제품 자체가 주인공이 아니라, 사용자가 다른 제품과 아이디어를 만들어내도록 돕는 기반이 되어야 한다. - 따라서 인터페이스는 기능을 제공하면서도 사용자의 창작 활동을 방해하지 않고 배경으로 물러나야 한다. ## 최소한이지만 강력한 도구 - 기본 도구 수를 줄이되, 단순한 작업부터 복잡한 작업까지 대응할 수 있도록 설계했다. - 망치 하나로 작은 수납장부터 집 전체를 만들 수 있듯이, 핵심 도구는 다양한 결과물을 만들어낼 만큼 유연해야 한다. - Figma의 펜 도구는 물리적인 펜처럼 느껴지도록 재구성했다. - 벡터 객체를 전통적인 경로가 아니라 점들의 네트워크로 구성해, 임의의 점을 서로 연결할 수 있게 했다. - 이 방식은 정해진 절차를 따라가는 대신 결과물을 자연스럽게 만들어가는 데 집중하게 한다. - 편집기는 필요한 도구가 잘 정리된 작업대처럼 느껴져야 하며, 도구의 배치와 접근성은 작업의 기본 조건이다. ## 손에 잡히는 조작감과 사용자 제어 - 물리적 도구를 사용할 때의 촉각적 익숙함은 디지털 도구에서도 통제감을 높인다. - 키보드 단축키는 사용자가 작업을 빠르고 직접적으로 제어하게 만드는 대표적인 수단이다. - Figma의 `Command` 키와 드래그 조합은 중첩된 요소를 선택할 때의 불편을 해결한다. - `Command`를 누른 채 드래그하면 컨테이너와 내부 요소를 구분하는 휴리스틱이 작동해, 컨테이너 자체가 아니라 포함된 요소만 선택한다. - 예를 들어 툴바 배경은 제외하고 그 안의 아이콘만 한 번에 박스 선택할 수 있다. - 사용자는 레이어 계층 구조를 일일이 생각하지 않고 화면 속 요소를 직접 조작할 수 있다. ## 눈에 띄지 않되 의미를 전달하는 색상 - 초기 Figma는 거의 단색에 가까운 ‘무스킨’ 스타일을 사용해 UI가 디자인을 방해하지 않도록 했다. - 그러나 기능이 늘어나면서 단색 UI만으로는 서로 다른 구성 요소를 명확히 구분하기 어려워졌다. - 해결책은 UI를 완전히 사라지게 하는 것이 아니라, 사용자가 의식하지 않아도 의미를 파악할 수 있도록 만드는 것이었다. - 현재의 색상 체계는 색을 시각적 장식이 아니라 의미의 추가 계층으로 활용한다. - 초록색: 실행이나 행동 - 파란색: 선택 상태 - 이러한 색상 그룹은 화면을 한눈에 이해하게 하고, 사용자가 “어떻게 도구를 쓰는가”보다 “무엇을 그리고 있는가”에 집중하도록 돕는다. ## 분야를 넘나드는 디자인 원칙 - 디자인 도구를 발전시키려면 현재 업계의 관습과 기준을 계속 재검토해야 한다. - 유용한 해결책은 과거의 디자인뿐 아니라 다른 분야에서도 발견될 수 있다. - 가구 디자인처럼 분야를 초월하는 원칙—기능 지원, 사용성, 절제, 재료와 도구의 이해—을 디지털 제품에 적용할 수 있다. - 디자이너는 자신의 전문 영역에만 머무르지 않고 역사와 타 분야를 폭넓게 참고해야 혁신적인 도구를 만들 수 있다. Figma를 설계할 때는 기능을 늘리는 것보다 사용자의 작업을 얼마나 자연스럽게 지원하는지에 초점을 두는 것이 중요하다. 최소한의 유연한 도구, 직관적인 조작, 의미를 전달하는 시각 체계를 갖추면 제품은 사용자의 창작을 돕면서도 전면에 나서지 않을 수 있다.

vector-graphicsfigmadesign-systemsui-design+2