figma2026년 5월 20일

피그마 디자인 에이전트가 출시되었습니다 | 피그마 블로그 (새 탭에서 열림)

Figma는 캔버스 안에서 직접 작동하며 디자인 시스템과 팀의 작업 맥락을 이해하는 전용 디자인 에이전트를 공개했다. 이 에이전트는 AI 생성과 직접 조작 중 하나를 선택하게 하지 않고, 아이디어 탐색부터 반복 수정·대량 편집까지 디자이너의 작업을 보조한다. Figma는 이를 통해 속도와 정밀성, 자동화와 디자이너의 통제력을 함께 확보하려 한다. ## 캔버스에 통합된 Figma 디자인 에이전트 - 에이전트는 Figma 캔버스와 왼쪽 레일에서 바로 사용할 수 있다. - 특정 디자인 레이어에서 프롬프트를 시작할 수 있다. - 여러 프롬프트를 병렬로 실행해 다양한 아이디어를 동시에 비교할 수 있다. - 사용자가 직접 편집하는 동안 에이전트도 계속 반복 작업을 수행할 수 있다. - 별도의 도구 설정이나 컨텍스트 전환 없이 팀과 같은 파일 안에서 협업자처럼 작동한다. - 컴포넌트, 디자인 토큰, 변수, 표준, 모범 사례 등 Figma 내부의 디자인 시스템 맥락을 이해하도록 설계됐다. ## Figma 에이전트와 MCP 서버의 역할 분담 - **Figma 에이전트** - 캔버스 안에서 디자인을 생성하고 수정하는 데 적합하다. - 현재 파일과 디자인 시스템에 대한 추가 맥락을 활용한다. - Figma 파일을 직접 편집하며 결과물을 바로 조작할 수 있다. - **MCP 서버와 `use_figma`** - 코드를 캔버스로 가져오거나 디자인을 다시 코드로 보내는 작업에 사용한다. - 코드와 Figma 사이를 오가며 디자인 충실도를 유지할 수 있다. - 두 방식은 경쟁 관계가 아니라, 캔버스 작업과 코드-디자인 간 연결을 각각 담당한다. ## 다양한 디자인 방향 탐색 - 첫 번째 아이디어나 프롬프트에 머무르지 않고 여러 방향을 빠르게 실험할 수 있다. - 같은 문제에 대해 서로 다른 스타일의 시안을 여러 개 생성할 수 있다. - 예: 유기적 스타일, 현대적 스타일, 복고풍 스타일 - 서로 다른 비즈니스 목표에 맞춘 결제 흐름이나 정보 구조를 비교할 수 있다. - Figma Design에서 흐름, 상태, 문구, 구조를 구체화한 뒤 Figma Make로 보내 동작을 위한 코드 레이어를 생성할 수 있다. - 반대로 Figma Make에서 만든 프레임을 Figma Design으로 가져와 에이전트로 다듬은 뒤 다시 Make로 보낼 수도 있다. ## 디자인 시스템을 활용한 생성과 반복 - 에이전트는 자주 사용되거나 최근 사용된 컴포넌트를 우선 활용한다. - 특정 라이브러리를 선택하거나 토큰·변수·컴포넌트를 `@` 멘션해 결과를 세밀하게 통제할 수 있다. - 디자인 시스템에 맞는 화면을 생성하고 기존 디자인을 새로운 스타일로 리믹스할 수 있다. - 예시 작업: - 모바일 앱용 가로 스크롤 이미지 캐러셀 생성 - 이미지 위·아래에 제목을 배치한 여러 버전 비교 - 특정 디자인을 여러 시각적 스타일로 변환 - AI가 평균적인 결과물을 빠르게 만드는 데 그치지 않도록, 여러 대안을 비교한 뒤 최종 방향은 디자이너가 직접 선택하고 조작하도록 한다. ## 반복적인 대량 작업 자동화 - 에이전트는 맥락과 정밀성이 필요한 단순 반복 작업을 자동화한다. - 대표적인 활용 사례: - 파일 전체의 타이포그래피 업데이트 - 여러 화면의 동일 컴포넌트 일괄 교체 - 전체 플로우의 패딩 값 변경 - 변수 이름 일괄 변경 - 그리드 전체의 Lorem ipsum과 이미지를 실제에 가까운 콘텐츠로 교체 - 칩 컴포넌트를 모두 활성 상태로 변경 - 화면을 다크 모드로 변환 - 디자인 시스템 관리자는 라이브러리의 설명, 태그, 사용 사례, 컴포넌트 문서와 명명 규칙을 대량으로 정리할 수 있다. ## 코드와 디자인 사이의 연속적인 흐름 - 코드에서 시작한 결과물을 Figma의 코드-투-캔버스 기능으로 가져와 디자인 시스템을 적용하고 시각적으로 반복 수정할 수 있다. - 수정된 디자인은 MCP 서버를 통해 다시 코드로 전달할 수 있다. - 이 과정에서 Figma 에이전트가 캔버스 작업을 지원해 코드와 디자인 간 이동 중에도 작업 흐름과 맥락을 유지한다. - AI 지원과 직접 조작을 필요에 따라 오갈 수 있어, 모든 작업을 프롬프트로 해결하지 않아도 된다. 디자인 방향을 넓게 탐색할 때는 에이전트를 활용하고, 최종 선택과 세밀한 조정은 캔버스에서 직접 수행하는 방식이 가장 실용적이다. 특히 디자인 시스템을 사용하는 팀은 컴포넌트·토큰 기반의 대량 수정과 코드-디자인 동기화에 에이전트를 효과적으로 활용할 수 있다.

figma-designaidesign-systemsgen-ai+2

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로 변환하고, 불필요한 배경 제거와 색상 변수 적용을 거쳐 브랜드 자산으로 정리하는 방식이 유용하다.

figma-designfigmavector-graphicsai-image-editing+2

figma2026년 1월 22일

말하기보다 보여주기: 업무 (새 탭에서 열림)

Figma는 Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 직접 삽입할 수 있는 기능을 출시했다. 이를 통해 아이디어를 스크린샷이나 설명으로 전달하는 대신 실제로 작동하는 경험을 함께 확인하며 피드백과 의사결정을 진행할 수 있다. 또한 텍스트·요소 편집, 요소 삭제, 모델 작업 과정 검토 등 정교한 수정 기능이 추가되어 프로토타입을 더 빠르게 개선할 수 있다. ## 작업 공간 어디서나 프로토타입 공유 - Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 삽입할 수 있다. - 아이디어 탐색부터 디자인 리뷰, 이해관계자 프레젠테이션까지 동일한 인터랙티브 프로토타입을 활용한다. - 팀원들이 변화하는 아이디어를 하나의 실제 경험으로 확인하므로 피드백과 방향성 정렬이 쉬워진다. ## FigJam에서 초기 아이디어 정렬 - FigJam 보드에 Figma Make 프로토타입을 직접 삽입해 논의의 중심으로 사용할 수 있다. - 스크린샷이나 추상적인 설명 대신 실제 화면을 클릭하며 기능과 사용자 여정을 검토한다. - 대화 과정에서 우선순위를 현실적으로 정하고, 사용자 경험의 누락된 부분을 조기에 발견할 수 있다. ## Figma Design에서 인터랙션 리뷰 - 디자인 리뷰 단계에서 UI, 문구, 인터랙션이 실제로 어떻게 동작하는지 확인할 수 있다. - 여러 디자인 버전을 나란히 비교해 실사용 상황에서 더 나은 안을 판단할 수 있다. - 구체적인 피드백을 Figma Make로 바로 되돌려 보내고, 추측 없이 수정할 수 있다. ## Figma Slides에서 사용자 경험 기반 발표 - 프레젠테이션 안에 프로토타입을 삽입해 이해관계자가 사용자 관점에서 콘셉트를 경험하도록 한다. - Figma Slides의 투표 기능으로 참석자의 의견을 빠르게 수집할 수 있다. - 논의가 진행되는 동안 얻은 피드백을 Figma Make에 반영해 즉시 업데이트할 수 있다. ## 텍스트와 요소를 직접 수정 - 프로토타입 내부의 텍스트를 직접 편집해 다양한 콘텐츠와 문구를 빠르게 시험할 수 있다. - 이해관계자 피드백에 따라 카피를 즉시 다듬을 수 있다. - **Point and edit** 도구를 사용하면 프로토타입 안에서 색상, 간격, 텍스트 스타일을 세밀하게 조정할 수 있다. - 특정 노드를 삭제하면서 나머지 구조는 유지할 수 있다. - 삭제한 요소는 `Command+Z`로 되돌릴 수 있다. ## 모델의 작업 방식 검토와 수정 - 프로토타입이 복잡해질수록 모델이 어떻게 결과를 구성했는지 확인하는 것이 중요해진다. - Figma Make는 모델의 구축 과정을 파악하고 필요할 때 방향을 수정할 수 있도록 가시성을 제공한다. - 사용자는 모델의 결과를 그대로 받아들이기보다, 아이디어와 피드백에 맞게 생성 과정을 조정하며 프로토타입을 발전시킬 수 있다. ## 실용적인 활용 - 초기 아이디어는 FigJam에서 실제 프로토타입으로 검증한다. - 디자인 리뷰에서는 여러 버전을 비교하고 구체적인 UI·문구·인터랙션 피드백을 수집한다. - 발표 단계에서는 Figma Slides의 삽입 및 투표 기능으로 합의를 이끈다. - 반복적인 수정이 필요한 경우 직접 편집, Point and edit, 노드 삭제, 실행 취소 기능을 활용하면 Figma Make 작업 속도를 높일 수 있다.

figma-designfigjamfigma-makefigma-slides+2

figma2025년 10월 7일

Figma Make와 함께 디자인 (새 탭에서 열림)

Figma Make는 자연어 프롬프트와 기존 디자인을 바탕으로 작동하는 고충실도 프로토타입을 만들어, 아이디어를 빠르게 검증하고 공유하도록 돕는다. 글은 Maven Clinic, Pendo, ServiceNow, LinkedIn의 사례를 통해 디자인팀이 보류된 아이디어를 되살리고, 새로운 방향을 탐색하며, 협업하고, 디자인 시스템의 일관성을 유지하는 방법을 소개한다. 핵심은 디자이너가 반복적인 제작보다 문제 정의와 전략, 사용자 경험의 완성도에 더 집중하게 된다는 점이다. ## Figma Make가 디자인 탐색을 바꾸는 방식 - Figma Make는 프롬프트를 입력해 앱과 인터페이스를 생성하는 도구다. - 초기 아이디어를 단순한 목업이 아니라 직접 조작할 수 있는 프로토타입으로 발전시킨다. - 프로토타입을 통해 팀은 기능의 타당성, 사용자 흐름, 마이크로인터랙션을 더 빠르게 검토할 수 있다. - 디자인팀은 반복적인 레이아웃 제작과 프로토타이핑에 쓰는 시간을 줄이고, 취향·전략·비전에 집중할 수 있다. - Figma Make에서 만든 결과물을 Figma Design 캔버스로 복사해 세부 수정과 반복 작업을 이어갈 수 있다. ## 보류된 아이디어를 제품 로드맵으로 되돌리기 Maven Clinic은 난임 클리닉을 지도에서 찾는 기능을 출시 일정 때문에 보류했지만, Figma Make로 기능의 가능성을 설득할 수 있는 인터랙티브 프로토타입을 제작했다. - 초기 디자인을 Figma Make에 입력해 실제 제품처럼 보이고 작동하는 고충실도 프로토타입을 만들었다. - 완성도 높은 결과물이 Slack에서 널리 공유되고 CEO의 관심을 이끌어내면서, 우선순위에서 밀릴 수 있었던 기능을 다시 로드맵에 올렸다. - 다른 디자이너가 결과물을 수정한 뒤 Figma Make로 되돌리는 방식으로 디자인을 반복 개선했다. - 정적인 목업으로는 발견하기 어려운 마이크로인터랙션과 사용 흐름의 문제를 조기에 파악했다. - 팀은 “0에서 시작”하는 대신 어느 정도 구현된 상태에서 출발했고, 그 결과 클리닉 파인더 MVP를 4개 미만의 스프린트로 설계·개발·테스트·출시했다. - 2년 동안 백로그에 머물던 아이디어를 빠르게 검증 가능한 제품으로 전환한 사례다. ## 탐색과 협업을 위한 공통 활용 방향 글은 다음과 같은 네 가지 활용 방향을 제시한다. - **로드맵에 아이디어 되살리기**: 인터랙티브 프로토타입으로 이해관계자의 관심과 투자 결정을 이끌어낸다. - **미지의 영역을 탐색하기**: 여러 디자인 방향을 짧은 시간 안에 시도해 빈 캔버스에서 시작하는 부담을 줄인다. - **새로운 인터페이스를 함께 개선하기**: 디자이너와 제품·개발 등 다른 직군이 실제로 조작 가능한 결과물을 보며 구체적인 피드백을 주고받는다. - **초기 탐색에 디자인 시스템 반영하기**: 빠르게 만든 시안도 기존 제품의 시각 언어와 컴포넌트 체계를 유지해, 탐색과 일관성을 동시에 확보한다. ## 프로토타입이 PRD보다 먼저 올 수 있다 - Maven Clinic 사례에서는 프로토타입을 먼저 만든 뒤, 실제로 잘 작동한 부분과 부족한 부분을 바탕으로 제품 요구사항 문서(PRD)를 작성했다. - Figma Make 결과물은 추상적인 요구사항을 구체적인 사용자 흐름으로 바꿔준다. - 팀은 “무엇을 만들 것인가”뿐 아니라 “어떤 상호작용이 필요한가”, “어디서 사용성이 떨어지는가”를 초기에 논의할 수 있다. - 따라서 프로토타입이 요구사항을 검증하는 산출물을 넘어, 요구사항 자체를 구체화하는 출발점이 될 수 있다. ## 디자이너의 역할 변화 Figma Make는 디자이너의 역할을 실행 중심에서 판단과 방향 설정 중심으로 이동시킨다. - 반복적인 화면 제작보다 다양한 가능성을 빠르게 비교한다. - 팀의 논의를 시각적이고 조작 가능한 결과물로 전환한다. - 초기 단계에서 사용자 경험과 세부 상호작용을 검증한다. - 최종적으로는 생성된 결과물을 그대로 사용하는 것이 아니라, 디자이너의 취향과 전략적 판단으로 다듬는다. 실무에서는 Figma Make를 완성품 생성 도구로 보기보다, 아이디어를 빠르게 구체화하고 팀의 피드백을 모으는 탐색 도구로 활용하는 것이 효과적이다. 특히 장기간 보류된 기능이나 이해관계자의 동의를 얻기 어려운 아이디어를 실제로 경험 가능한 프로토타입으로 만들어 검증하는 데 유용하다.

figma-designdesign-systemsprototypinggen-ai+2

figma2025년 9월 24일

Figma Make를 캔버 (새 탭에서 열림)

Figma는 Figma Make에서 생성한 미리보기를 Figma Design 캔버스로 직접 복사하는 기능인 **Copy design**을 공개했다. 복사된 결과물은 스크린샷이 아니라 편집 가능한 디자인 레이어로 들어가므로, 팀이 아이디어를 수정·재구성하고 프로토타입에서 실제 제품 디자인으로 발전시킬 수 있다. Figma는 이를 Make와 Design 사이의 작업 단계를 줄이고, 프롬프트에서 제작까지 이어지는 흐름을 강화하는 첫 단계로 설명한다. ## Figma Make 결과물을 편집 가능한 레이어로 변환 - 이제 Figma Make 미리보기에서 디자인을 복사해 Figma Design 캔버스에 붙여넣을 수 있다. - 복사된 결과는 정적인 이미지나 스크린샷이 아니라 **구조화된 디자인 레이어**로 제공된다. - 캔버스에서 레이어를 직접 편집하고, 요소를 재배치하거나 다른 디자인과 결합할 수 있다. - 별도로 파일을 내보내거나 이름을 지정하거나 작업 모드를 전환할 필요 없이 Make와 Design을 연결한다. ## 스크린샷이 아닌 협업 가능한 레이어 - 프롬프트로 만든 아이디어가 단순한 결과물에 머무르지 않고 반복 작업을 위한 구성 요소가 된다. - PM은 자연어로 Make에서 디자인 시안을 다듬은 뒤, 특정 시점을 Figma Design으로 가져올 수 있다. - 디자이너와 개발자 등 팀 구성원은 캔버스에서 결과물을 함께 검토하고 수정할 수 있다. - 프롬프트 → 프로토타입 → 제품 디자인으로 이어지는 과정이 더 유연해진다. - 여러 사람이 아이디어를 변형하고 개선하는 멀티스레드 협업의 출발점으로 활용할 수 있다. ## 커뮤니티 도구에서 얻은 기술적 방향 - Figma Make 사용자들은 이미 `<div>RIOTS`의 **html.to.design** 플러그인을 사용해 HTML이나 라이브 프로토타입을 편집 가능한 Figma 프레임으로 가져오고 있었다. - 이 플러그인은 웹 콘텐츠를 Figma의 편집 가능한 디자인 구조로 변환해, 생성된 결과물을 캔버스에서 다시 작업할 수 있게 한다. - Figma는 해당 기술을 확보했으며, 이를 향후 Figma Make 기능 개발에 활용할 계획이다. - html.to.design은 약 3년간 개발되었고 약 200만 명이 사용하는 도구로 소개됐다. - `<div>RIOTS`는 Figma와의 협력 이후에도 플러그인과 도구를 독립적으로 계속 개발하고 유지보수한다. ## Make의 향후 방향 - Figma는 캔버스를 무엇이든 가져와 탐색하고 변환할 수 있는 공동 작업 공간으로 확장하려 한다. - Copy design은 이러한 방향을 실현하는 첫 단계다. - 궁극적으로는 어떤 프롬프트에서 시작한 아이디어든 Figma Design 안에서 발전시켜 실제 제품으로 연결하는 것이 목표다. - AI를 단순히 결과물을 생성하는 도구가 아니라, 기존 디자인 프로세스를 가속하는 도구로 활용하려는 전략이 드러난다. Figma Make를 아이디어 발상과 빠른 프로토타이핑에 사용하고, 결과물을 Copy design으로 Figma Design에 가져와 세부 편집과 팀 협업을 진행하는 방식이 가장 실용적이다. 특히 초기 시안의 반복 제작과 프로토타입 검토가 잦은 팀일수록 스크린샷 기반 작업보다 효율이 높을 것으로 보인다.

figma-designaiprototypingfigma-make+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-designresponsive-designauto-layoutfigma-ai+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-designgraphic-designillustrationfigma-draw+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의 파일을 분석하고 변형해보면 학습 내용을 실제 디자인 역량으로 발전시킬 수 있다.

figma-designfigmaprototypingui-design+1

figma2024년 6월 25일

프리랜서와 에이 (새 탭에서 열림)

Figma는 프리랜서와 소규모 에이전시가 여러 고객과 협업할 때 발생하는 라이선스·프로젝트 이전·좌석 과금 문제를 해결하기 위한 billing 및 아키텍처 개선을 추진한다. 핵심 방향은 고객사와의 연결된 워크스페이스 제공, 플랜 간 프로젝트 이전 간소화, 유료 좌석 관리와 과금 알림 강화다. 이를 통해 여러 플랜의 라이선스를 따로 구매하거나 관리자가 프로젝트 종료 후 좌석을 수동으로 정리해야 하는 부담을 줄이려 한다. ## 프리랜서와 에이전시가 겪던 문제 - 기존 Figma 요금제는 한 조직 내부에서 협업하는 팀을 중심으로 설계됐다. - 프리랜서와 에이전시는 고객사마다 다른 Figma 계정과 플랜을 사용해야 했다. - 그 결과 다음과 같은 운영 부담이 발생했다. - 여러 플랜에서 라이선스를 중복으로 확보 - 고객 목록과 사용자 권한을 지속적으로 관리 - 프로젝트 종료 후 사용하지 않는 유료 좌석을 직접 다운그레이드 - 고객과 파일을 공유하거나 작업을 인수인계할 때 협업 마찰 발생 ## 외부 협업을 위한 연결된 워크스페이스 - Figma 계정 간에 연결된 워크스페이스를 만들 수 있는 기능을 개발 중이다. - 프리랜서·에이전시와 고객이 각자의 기존 Figma 좌석을 사용하면서 같은 공간에서 파일을 생성하고 공동 편집할 수 있게 된다. - 고객사마다 별도의 라이선스를 추가로 구매해야 하는 문제를 줄이는 것이 목적이다. - 글 작성 시점에는 다음 해 초 출시를 목표로 하고 있었다. ## 플랜 간 프로젝트 이전 개선 - 기존에는 Organization 또는 Enterprise 플랜 고객에게만 프로젝트를 이전할 수 있었다. - 향후에는 Professional, Organization, Enterprise 등 서로 다른 플랜 간에도 작업을 이전할 수 있도록 개선한다. - 주요 개선 사항은 다음과 같다. - 원본 프로젝트를 유지한 채 복사본만 고객에게 이전 - 이전 과정에서 협업자를 제거해 의도하지 않은 유료 좌석 업그레이드 방지 - 고객의 플랜 유형과 관계없이 작업 이전 가능 - 이 기능 개선은 2024년 8월 20일 기준으로 적용되었다. ## 과금 알림과 좌석 관리 강화 Figma는 협업을 쉽게 만들기 위해 파일을 공유받은 사용자가 즉시 편집할 수 있도록 했지만, 이 방식은 프로젝트가 끝난 뒤 유료 좌석을 정리해야 하는 책임을 관리자에게 남겼다. - 기존에는 청구서 발행 며칠 전에 예정된 요금을 이메일로 안내했다. - 관리자는 추가로 일일·주간·월간 좌석 업그레이드 알림을 받을 수 있다. - 알림에는 다음 정보가 포함된다. - 어떤 사용자가 유료 좌석으로 업그레이드됐는지 - 어떤 작업으로 업그레이드가 발생했는지 - Figma Design 및 FigJam에서 발생한 좌석 변경 내역 - 신규 계정은 플랜에 따라 알림이 기본 활성화된다. - Professional: 주간 알림 - Organization·Enterprise: 월간 알림 - 기존 고객도 설정에서 알림을 직접 활성화할 수 있다. ## 관리자 승인 기반 좌석 업그레이드 - 계정에 새로 참여하는 사용자의 기본 역할을 `viewer-restricted`로 지정할 수 있다. - 이 설정을 사용하면 사용자가 자동으로 유료 좌석으로 승격되지 않는다. - 유료 좌석 업그레이드에는 관리자의 명시적인 승인이 필요하다. - 프로젝트성 협업이 많고 외부 사용자가 자주 추가되는 조직에서 예상치 못한 과금을 통제하는 데 유용하다. ## 향후 과금 아키텍처 개선 - Figma는 현재의 알림과 승인 기능 외에도 근본적인 billing 아키텍처를 개선하는 작업을 진행 중이다. - 단기적으로는 관리자에게 더 많은 가시성과 통제권을 제공하고, 장기적으로는 프리랜서와 에이전시의 협업 방식에 맞는 요금 구조를 마련하는 것이 목표다. - 이번 발표는 완성된 요금제 개편보다는 향후 로드맵과 임시 관리 기능을 제시한 성격이 강하다. 프리랜서와 에이전시는 당장 `viewer-restricted` 기본 좌석과 정기적인 좌석 업그레이드 알림을 활성화하는 것이 좋다. 프로젝트 이전 시에는 원본 보존과 협업자 제거 옵션을 활용해 불필요한 권한과 과금이 발생하지 않도록 관리해야 한다.

figma-designfigmafigjamcollaboration+1