figma2025년 12월 9일

Figma의 정밀한 (새 탭에서 열림)

Figma는 이미지 편집을 다른 도구로 옮기지 않고 캔버스 안에서 처리할 수 있도록 세 가지 AI 기능을 공개했다. **Erase object**, **Isolate object**, **Expand image**를 통해 특정 객체 제거·분리·수정과 이미지 비율 확장이 가능해져, 디자인 작업의 정밀도와 효율성이 높아진다. 기존의 배경 제거·자르기 기능도 새 이미지 편집 툴바에 통합해 이미지 작업 흐름을 단순화했다. ## 객체 지우기와 분리 편집 - 이미지에서 올가미로 원하는 객체를 선택할 수 있다. - **Erase object**는 선택한 객체를 이미지에서 완전히 제거한다. - **Isolate object**는 객체나 사람을 배경과 분리해 편집하거나 위치를 조정한다. - 분리한 객체에 다음과 같은 효과를 적용할 수 있다. - 조명 조정 - 색상 변경 및 보정 - 채도 조절 - 초점 및 흐림 효과 - 그림자 추가 - 제품 사진에서 주요 부품을 밝게 하거나, 방해 요소를 제거해 제품을 강조하는 용도로 활용할 수 있다. - 텍스트 프롬프트 기반의 기존 **Edit image** 기능과 함께 사용해 생성형 편집과 세밀한 수정을 결합할 수 있다. ## 왜곡 없이 이미지 확장 - **Expand image**는 이미지의 배경을 AI로 확장해 새로운 종횡비에 맞춘다. - 기존처럼 이미지를 단순히 잘라 구도를 바꾸지 않아도 된다. - 이미지의 주요 피사체와 맥락을 유지하면서 데스크톱·모바일·소셜 미디어 등 다양한 규격에 적용할 수 있다. - 예를 들어 정사각형 제품 이미지를 웹 배너로 확장해 텍스트를 배치할 공간을 만들 수 있다. - 이미지 자체를 늘려 왜곡하는 방식이 아니라, 주변 배경을 자연스럽게 생성하는 방식이다. ## 통합 이미지 편집 툴바 - 새 툴바에서 기존 기능과 신규 AI 기능을 한곳에서 사용할 수 있다. - Remove background - Crop - Erase object - Isolate object - Expand image - AI 이미지 생성·편집 - 자주 사용되는 **Remove background** 기능의 접근성을 높여 이미지 편집 흐름을 개선했다. - 서로 다른 출처와 형식의 로고·제품 이미지를 통일된 스타일로 정리할 수 있어 마케팅 자료와 UI 목업 제작에 유용하다. ## 지원 제품과 이용 조건 - 기능은 Figma Design과 Figma Draw에서 제공된다. - AI가 활성화된 Professional, Organization, Enterprise 요금제의 Full seat 사용자가 이용할 수 있다. - FigJam, Slides, Buzz(beta)에서도 접근 가능하며, 해당 제품에서는 Dev·Collab·View seat에도 제공된다. - AI 기능 사용에는 크레딧이 차감된다. - Figma는 향후 더 많은 제품으로 기능을 확대할 예정이다. 실무에서는 제품 사진의 불필요한 요소 제거, 채널별 이미지 비율 조정, 배경·색상 통일 작업에 특히 효과적이다. 다만 AI 이미지 편집은 크레딧을 사용하므로 반복 수정이 많은 작업에서는 결과를 먼저 확인한 뒤 필요한 영역에 선택적으로 적용하는 것이 좋다.

figma-drawfigmagen-aifigjam+3

figma2025년 8월 11일

피그마에서 브랜드 (새 탭에서 열림)

브랜드 템플릿은 완성된 디자인을 그대로 복제하는 것이 아니라, 마케터가 다양한 콘텐츠와 형식에 맞게 안전하게 수정할 수 있도록 설계해야 한다. Figma Buzz에서는 자동 레이아웃, 모듈화된 텍스트 레이어, 비율 고정, 명확한 레이어 이름 등을 활용해 브랜드 일관성을 지키면서도 유연한 셀프서비스 템플릿을 만들 수 있다. 이를 통해 브랜드 디자이너의 검수 부담을 줄이고 마케팅 팀의 제작 속도를 높일 수 있다. ## Figma Design에서 작업 시작 - 익숙한 **Figma Design**에서 먼저 프레임을 만든 뒤 Figma Buzz로 복사한다. - Figma Design의 컴포넌트 기능을 활용해 템플릿 구조를 설계할 수 있다. - Figma Draw의 브러시, 동적 스트로크, 프로그레시브 블러 등 표현 도구를 사용해 시각적 완성도를 높인 뒤 Buzz에서 템플릿으로 다듬는다. - 디자인 표현과 템플릿 편집 기능을 분리해, 디자이너는 창의적인 작업에 집중하고 마케터는 Buzz에서 콘텐츠를 수정할 수 있다. ## Auto Layout으로 레이아웃 유연성 확보 - Auto Layout은 반응형 템플릿의 기반이다. - 버튼, 텍스트 상자, 이미지 컨테이너 사이의 간격과 정렬을 자동으로 유지한다. - 긴 제목이나 본문이 입력되어도 주변 요소가 어긋나거나 겹치는 문제를 줄일 수 있다. - 콘텐츠 길이가 달라지는 템플릿일수록 고정 좌표보다 Auto Layout을 우선 적용하는 것이 좋다. ## 텍스트 레이어를 입력 단위별로 분리 - 서로 다른 입력값은 각각 별도의 텍스트 레이어로 만든다. - 글꼴, 크기, 스타일이 다른 내용을 하나의 레이어에 섞지 않아야 한다. - Figma Buzz의 **Bulk create** 기능은 CSV 또는 XLSX의 각 데이터 필드를 디자인 레이어에 매핑하므로, 텍스트 레이어가 모듈화되어 있어야 한다. - 여러 스타일이나 입력 필드를 하나의 레이어에 결합하면 대량 생성 시 서식이 깨지거나 수정이 어려워질 수 있다. ## 이미지와 벡터의 가로세로 비율 고정 - 이미지나 벡터를 선택한 뒤 레이아웃의 너비·높이 입력란 옆에 있는 정사각형 아이콘을 눌러 비율을 고정한다. - 정사각형 소셜 게시물을 세로형 스토리나 웹 배너로 확장할 때도 로고, 인물 사진, 일러스트가 찌그러지지 않는다. - 비율을 고정하지 않으면 이미지가 늘어나거나 눌리는 문제가 발생할 수 있다. - 다양한 출력 규격을 고려하는 템플릿에서는 이미지와 벡터의 비율 설정이 특히 중요하다. ## 레이어 이름을 명확하게 지정 - 기본적으로 텍스트 레이어 이름은 캔버스에 입력된 실제 문구로 지정된다. - Command + R 단축키나 레이어 직접 편집으로 이름을 바꿀 수 있다. - 레이어가 많다면 Figma AI를 활용해 이름을 일괄적으로 정리할 수 있다. - 템플릿 게시 후 팀원은 잠금 해제된 텍스트·이미지 레이어를 Edit Content 패널에서 폼처럼 수정하므로, 레이어 이름이 입력 목적을 명확히 설명해야 한다. - 예를 들어 `제목`, `작성자명`, `제품 이미지`, `CTA 문구`처럼 실제 입력 항목을 나타내는 이름이 적합하다. - 명확한 이름은 마케터의 편집 실수를 줄이고 템플릿 사용성을 높인다. ## 템플릿을 ‘편집 경험’ 중심으로 설계 - 일반 디자인과 템플릿 디자인의 차이는 사용자가 콘텐츠를 바꿀 것을 전제로 한다는 점이다. - 긴 문구, 다양한 이미지 비율, 여러 캠페인 데이터를 입력해도 레이아웃이 유지되어야 한다. - 디자이너가 모든 결과물을 사전 검수하기 어렵기 때문에, 템플릿 자체에 브랜드 가이드와 편집상의 안전장치를 반영해야 한다. - 잠금 설정, 자동 정렬, 명확한 레이어 구조를 조합하면 마케터가 빠르게 제작하면서도 브랜드 일관성을 유지할 수 있다. 실무에서는 먼저 Figma Design에서 구조를 만들고, Auto Layout과 레이어 분리를 적용한 뒤 Figma Buzz로 옮기는 방식이 효율적이다. 이후 실제로 긴 문구와 다른 이미지 비율을 입력해 테스트하면서 레이아웃이 깨지지 않는지 확인하는 것이 좋다.

figma-drawresponsive-designauto-layoutfigma-design+3

figma2025년 8월 6일

리듬을 타고: 음악이 Figma (새 탭에서 열림)

Figma는 Figma Draw에 점묘와 음영 표현에 적합한 산란 브러시(scatter brush) 10종을 추가했다. 이 브러시들은 반복되는 획의 패턴이 음악의 비트와 닮았다는 발상에서 출발해, Doo-wop·Vaporwave·Screamo 등 음악 장르의 분위기를 시각적 질감으로 구현했다. 디자이너 Rogie King은 99개의 시안을 제작한 뒤 팀 투표를 거쳐 가장 유연하고 표현력 있는 브러시를 선정했다. ## 음악을 브러시의 출발점으로 삼은 이유 - 산란 브러시는 작은 형태가 반복적으로 흩뿌려지는 방식으로 선을 만든다. - 획의 간격(gap), 흔들림(wiggle), 무작위성(jitter)을 조절할 수 있어 음악의 템포·질감·볼륨을 조정하는 과정과 비슷하다. - UX Writer Molly Rosen Marriner는 `Every Noise At Once`와 Figma 직원들의 추천을 참고해 시각적으로 연상하기 쉬운 장르를 수집했다. - Electroclash, Drone, Witch house처럼 전자음악의 반복적이고 깨진 듯한 분위기를 브러시 디자인에 적용하기 좋았고, Nu metal·Italo disco·Samba 등 다양한 장르도 후보에 포함됐다. ## 장르의 분위기를 시각적 질감으로 변환 - 먼저 점묘(stippling)처럼 사용자가 바로 활용할 만한 기본적인 산란 표현부터 설계했다. - 이후 특정 장르의 대표 음악을 듣고, 해당 장르의 패션·문화·시각적 특징을 조사하며 브러시의 성격을 구체화했다. - Screamo 브러시는 AFI의 곡과 2000년대 초반의 검은 후드티, 진한 아이라이너, 모시 핏에서 영감을 받아 거칠고 혼란스러운 느낌으로 제작됐다. - Shoegaze처럼 디자이너가 직접 이해하기 어려운 장르는 해당 음악을 잘 아는 가족이나 주변 사람에게 추천을 받아 시각적 방향을 잡았다. ## 99개 시안에서 10개 브러시로 - Rogie King은 다양한 장르를 탐색하며 총 99개의 산란 브러시 디자인을 만들었다. - 팀원들은 각 시안을 검토하고 캔버스에서의 활용도와 표현력을 기준으로 선호하는 디자인에 투표했다. - 최종 브러시는 다음 10개 장르의 이름을 갖게 됐다. - Bubblegum - Witch house - Shoegaze - Honky-tonk - Screamo - Drone - Doo-wop - Spoken word - Vaporwave - Oi! - 일부 디자인은 장르와 직관적으로 연결됐지만, 어떤 브러시는 결과물에 맞춰 새로운 장르 이름을 찾아야 할 정도로 해석의 여지가 컸다. ## 전문 지식 없이도 예술 표현을 확장 - 산란 브러시는 점묘와 음영뿐 아니라 안개, 얼룩, 반복되는 기호 등 다양한 감정과 스타일을 표현할 수 있다. - Figma Draw의 기존 스트레치 브러시가 캘리그래피나 목탄처럼 선의 형태를 강조했다면, 산란 브러시는 작업에 질감·깊이·움직임을 더한다. - 브러시 이름을 `플랫 브러시`, `과슈 브러시` 같은 전통적인 미술 용어 대신 음악 장르로 정한 것은 미술 교육을 받지 않은 사람도 부담 없이 접근하도록 하기 위한 선택이다. - 이름 자체가 브러시의 분위기를 상상하게 하며, 정식 미술 교육이나 물리적 도구 경험이 없어도 예술가처럼 창작할 수 있다는 메시지를 전달한다. Figma Draw의 새 산란 브러시는 단순한 장식 도구라기보다 반복·무작위성·질감을 조합해 작업의 분위기를 빠르게 바꾸는 표현 도구다. 점묘, 음영, 배경 질감, 감정적 효과가 필요한 작업에서 브러시 이름의 음악적 이미지를 참고해 다양한 스타일을 실험해볼 수 있다.

figma-drawfigmagraphic-designvector-editing+2

figma2025년 7월 2일

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

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

figma-drawfigmatypographymotion-design+3

figma2025년 5월 6일

Figma Draw로 자신을 (새 탭에서 열림)

Figma Draw는 Figma Design 안에서 벡터 편집과 일러스트레이션 작업을 더 빠르고 직관적으로 수행하도록 만든 기능이다. 브러시, 동적 스트로크, 점진적 블러, 텍스처·노이즈, 경로 위 텍스트 등 표현 도구를 한곳에 제공해 다른 툴이나 플러그인으로 이동하지 않고도 작업 흐름을 유지하게 한다. 정밀한 벡터 편집 기능과 창의적인 표현 도구를 결합해 아이콘, 로고, 웹 일러스트, 소셜 미디어 그래픽 제작과 반복 작업을 효율화하는 것이 핵심이다. ## 작업 흐름을 유지하는 전용 작업 공간 - Figma Draw는 시각적 표현에 초점을 맞춘 UI를 제공해, 정밀한 제품 디자인과 자유로운 일러스트 작업 사이를 쉽게 오갈 수 있다. - **Layers 패널** - 프레임, 그룹, 도형, 벡터, 이미지의 썸네일 미리보기를 제공한다. - 여러 벡터 요소를 탐색하고 수정하기 쉽게 구성했다. - **툴바** - 펜, 브러시, 연필 도구를 전면에 배치했다. - 특수 벡터 기능에 쉽게 접근할 수 있다. - 캔버스에 그리기 전 스트로크 스타일을 미리 설정할 수 있는 별도 툴바를 제공한다. - **Properties 패널** - 슬라이더와 큰 시각적 미리보기로 값을 조정할 수 있다. - 스트로크 관련 설정을 확장했다. - 채우기, 스트로크 스타일, 효과를 사전에 선택해 작업 후 반복 조정을 줄인다. ## 정밀하고 효율적인 벡터 편집 - 벡터 작업에서 자주 필요한 선택, 정렬, 간격 조정, 패스 닫기, 핸들 수정 등을 더 직관적으로 개선했다. - 불리언 연산과 외곽선 변환 엔진을 업그레이드해 도형 결합·차감 작업을 더 자연스럽게 처리한다. - 여러 노드를 동시에 편집할 수 있다. - 여러 벡터 노드를 선택한 뒤 Enter를 누르면 한 번에 편집할 수 있다. - Shift+클릭으로 노드를 선택 영역에 추가할 수 있다. - Command+클릭으로 다른 레이어의 노드 편집으로 바로 이동할 수 있다. - **Shape Builder** 도구로 도형을 결합하고 조작해 아이콘과 로고를 만들 수 있다. - **Lasso 선택**을 사용하면 불규칙하게 배치된 벡터 객체나 복잡한 캔버스 일부를 자유롭게 선택할 수 있다. ## 일러스트레이션과 창의적 표현 도구 - Figma Draw는 기존의 정밀한 벡터 편집을 넘어 다양한 시각적 표현을 지원한다. - 주요 도구로 다음을 제시한다. - 브러시 - 동적 스트로크 - 텍스처 및 노이즈 효과 - 점진적 블러 - 경로 위 텍스트 - 브러시를 활용해 손으로 그린 듯한 표현을 추가할 수 있다. - 텍스처를 적용해 결과물에 촉각적이고 물성 있는 느낌을 더할 수 있다. - 점진적 블러를 이용해 디자인에 깊이감을 줄 수 있다. - 이러한 기능을 별도의 애플리케이션이나 플러그인으로 옮기지 않고 Figma 캔버스 안에서 실험하고 반복할 수 있다. ## 다양한 디자인 역할을 위한 통합 도구 - 제품 디자이너가 고해상도 목업에 필요한 로고나 아이콘을 빠르게 제작할 수 있다. - 브랜드 디자이너는 별도 툴을 열지 않고 일러스트와 그래픽 요소를 만들 수 있다. - 웹용 스팟 일러스트, 소셜 미디어 그래픽 등 표현 중심의 작업에도 활용할 수 있다. - Figma Draw의 방향성은 픽셀 단위의 정밀함과 자유로운 시각 표현이 더 이상 분리된 작업이 아니라는 점에 있다. 실무에서는 아이콘·로고처럼 정밀한 벡터 작업과 텍스처·브러시 기반의 표현 작업을 함께 수행해야 할 때 Figma Draw를 활용하면 좋다. 특히 여러 도구 사이를 오가며 생기는 작업 중단을 줄이고, 캔버스 안에서 빠르게 시도하고 수정하는 워크플로를 구축하는 데 적합하다.

figma-drawgraphic-designfigma-designillustration+2