figma2021년 8월 24일

Figma의 새로운 소 (새 탭에서 열림)

Figma는 2021년 8월 업데이트에서 FigJam의 확장성과 Figma 플러그인 개발 역량을 강화하고, 디자인 시스템 관리와 반복 작업을 간소화했다. 특히 FigJam 플러그인·위젯, 프로토타이핑 자동화를 위한 API, 라이브러리 관리 기능이 추가되어 협업과 디자인 운영의 효율성이 높아졌다. 또한 투명 객체의 그림자 처리와 직선 그리기처럼 일상적인 사용성도 개선했다. ## FigJam 플러그인과 위젯 도입 - FigJam에 Figma의 오픈 플랫폼을 확장해 팀별 협업 방식에 맞는 기능을 직접 만들 수 있게 했다. - **플러그인** - 개인 작업을 자동화하고 효율화하는 도구다. - 스타일 사용자 지정, 스티키 정리, 데이터 가져오기 등에 활용할 수 있다. - **위젯** - 여러 사용자가 캔버스에서 함께 조작하는 인터랙티브 객체다. - 투표, 설문, 메모장, 게임 등을 제공해 워크숍과 브레인스토밍 진행을 돕는다. - 기본 HTML·JavaScript 지식이 있으면 플러그인을, React 경험이 있으면 위젯을 개발할 수 있도록 진입 장벽을 낮췄다. - 플러그인은 모든 요금제 사용자가 개발할 수 있었고, 위젯은 당시 비공개 베타로 제공됐다. ## Figma 플러그인 API 확장 - **프로토타이핑 쓰기 기능** - 플러그인이 프로토타입을 자동 생성하거나 기존 인터랙션을 대량으로 수정할 수 있게 됐다. - 반복적인 프로토타입 제작과 상호작용 설정을 자동화할 수 있다. - **플러그인 파라미터** - 별도의 사용자 인터페이스를 만들지 않고도 Quick Actions를 통해 사용자 입력을 받을 수 있다. - 플러그인 개발 시간이 줄고, 간단한 입력 기반 도구를 더 빠르게 만들 수 있다. - 당시 오픈 베타로 제공됐다. ## 디자인 시스템 관리 개선 - **컴포넌트 이동** - 게시된 컴포넌트와 컴포넌트 세트를 파일 간에 이동할 수 있다. - 이동 후에도 기존 인스턴스와의 연결이 유지된다. - 대형 라이브러리를 여러 파일로 분리하거나 새 파일로 이전하기 쉬워졌다. - **라이브러리 교체** - 스타일과 컴포넌트를 하나씩 변경하지 않고, 전체 라이브러리 세트를 다른 라이브러리로 교체할 수 있다. - **컴포넌트 검색** - `Shift + I` 단축키로 필요한 컴포넌트를 빠르게 검색할 수 있다. - 규모가 큰 디자인 시스템에서 탐색 시간을 줄여준다. ## 일상적인 사용성 개선 - 투명 객체가 뒤에 있는 그림자를 기본적으로 가리도록 변경되어, 별도로 설정을 조정할 필요가 줄었다. - Figma와 FigJam에서 연필 도구 사용 시 `Shift`를 누르면 직선을 그릴 수 있다. - 그 밖의 버그 수정과 개선 사항은 Figma 릴리스 노트에서 확인할 수 있도록 안내했다. 실무에서는 컴포넌트 라이브러리를 기능별 파일로 분리하고, 라이브러리 교체 기능과 플러그인 자동화를 함께 활용하면 디자인 시스템 유지보수 비용을 줄일 수 있다. FigJam에서는 투표나 설문 위젯을 활용해 회의 진행과 의사결정을 구조화할 수 있다.

plugin-apifigmadesign-systemsfigjam+3

figma2021년 7월 27일

30가지 업데이트: Figma의 최 (새 탭에서 열림)

Figma는 2021년 7월, 디자이너의 작업 흐름을 개선하기 위한 30가지 기능 업데이트와 버그 수정을 공개했다. 벡터·텍스트·이미지 편집부터 키보드 단축키, 브라우저 호환성, 레이어 탐색까지 작은 사용성 개선을 폭넓게 적용해 아이디어와 디자인 사이의 불필요한 클릭과 중단을 줄이는 것이 핵심이다. 전체 변경 사항은 Figma Community 파일과 ‘What’s New’ 페이지에서 확인할 수 있다. ## 벡터와 드로잉 편집 개선 - 스트로크 패널을 재설계해 벡터 객체의 속성을 더 쉽게 조정할 수 있게 했다. - 선의 끝 모양(end cap)을 설정할 수 있어 화살표를 만들거나 FigJam에서 복사한 커넥터의 스트로크를 세밀하게 조정할 수 있다. - 펜 도구와 연필 도구가 이전에 사용한 스트로크 설정을 기억한다. - 연필 도구를 사용하기 전에 스트로크 속성을 지정할 수 있어 실제 펜으로 그리는 것처럼 작업할 수 있다. - 객체에 두 번째 Fill을 추가할 때 기본값이 그라디언트가 아닌 단색으로 적용된다. - 새 눈금자를 만들면 자동으로 선택되어 키보드로 이동하거나 즉시 삭제할 수 있다. ## 이미지와 내보내기 기능 - 브라우저에서도 ‘Copy as PNG’를 사용할 수 있게 됐다. - macOS: `⌘+Shift+C` - Windows: `Ctrl+Shift+C` - 이미지 크기를 조정할 때 `⌘` 또는 `Ctrl`을 누르면 현재 위치에서 즉시 크롭할 수 있다. - 이미지 조정 슬라이더는 별도로 클릭하지 않아도 바로 드래그할 수 있다. - 텍스트 내보내기에 바운딩 박스를 포함하는 옵션이 추가됐다. - Plugin API에는 이에 대응하는 `use_absolute_bounds` 설정이 추가됐다. - 기존 ‘Contents only’ 내보내기 옵션의 이름이 ‘Ignore overlapping layers’로 변경됐다. ## 텍스트와 글꼴 처리 - 누락된 글꼴이 포함된 텍스트를 복사·붙여넣기하면 전역 누락 글꼴 아이콘이 활성화된다. - 누락 글꼴 대화상자를 재설계해 영향을 받는 레이어를 클릭으로 바로 확인할 수 있다. - 서로 다른 스타일이 섞인 텍스트 노드에서 ‘+’ 옵션을 제거해 새 스타일이나 색상으로 쉽게 덮어쓸 수 있게 했다. - 파일 이름 변경 시 선택된 텍스트의 배경 영역 높이를 정상적으로 조정했다. - 텍스트 편집 중 이미지를 붙여넣으면 붙여넣기를 무시하지 않고 텍스트 편집을 종료한 뒤 이미지를 삽입한다. - 텍스트 편집 중에도 상단 정렬 등 위치 조정 버튼을 사용할 수 있다. ## 단축키와 편집 조작 - 혼합된 값이 있는 속성에 수학 연산을 입력해 크기나 위치 등을 조정할 수 있다. - 새 환경 설정이 열어 둔 모든 탭에 자동 동기화되어 새로고침할 필요가 없다. - 선택 단축키를 사용할 때 레이어 패널이 선택된 레이어를 자동으로 찾아 스크롤한다. - `Z`로 확대할 때 다른 공동 작업자에게 선택 영역 사각형이 표시되지 않는다. - 중간 마우스 버튼으로 선택한 링크를 열 수 있다. - 파일 이동 대화상자는 바깥 영역 클릭이나 `Esc` 키로 닫을 수 있다. ## FigJam 및 협업 개선 - FigJam의 스티키를 텍스트로 복사하면 FigJam에서 배치된 순서와 일치하도록 정렬된다. - 링크 위를 이동할 때 링크 팝업이 작업을 방해하지 않도록 동작을 조정했다. - 레이어 패널의 아이콘이 실제 객체 상태를 더 빠르게 반영한다. - 커서의 손 모양을 덜 방해되도록 개선했다. - 상단 메뉴 진입 영역을 넓혀 펼침 화살표를 더 쉽게 클릭할 수 있게 했다. ## 브라우저와 인터페이스 안정성 - Safari 브라우저에서도 `⌥` 키를 누른 채 마우스를 움직여 필드 값을 조정하는 스크러빙이 작동한다. - Safari에서 우클릭 메뉴가 너무 빨리 닫히지 않도록 수정했다. - 프레임 프리셋에 호버 상태를 추가해 클릭 가능한 항목임을 명확히 했다. - 그리드 속성 행의 드래그 핸들 표시 문제를 해결했다. - View Only 모드에서 툴바 드롭다운이 열리지 않던 문제를 수정했다. - 새로 만든 눈금자와 선택된 레이어를 더 쉽게 조작할 수 있도록 관련 탐색 동작을 개선했다. 이번 업데이트는 대규모 신규 기능보다 반복적인 작업에서 발생하는 작은 불편을 줄이는 데 초점을 맞췄다. Figma 사용자는 단축키, 브라우저 기능, 글꼴·레이어 탐색 개선을 적극 활용하고, 전체 변경 사항은 Figma Community의 업데이트 파일에서 확인하는 것이 좋다.

plugin-apifigmafigjamtypography+2

figma2020년 2월 5일

더 개방적으로 창작하고 협 (새 탭에서 열림)

Figma는 Config 2020에서 디자인 제작, 협업, 커뮤니티 공유를 강화하는 7가지 기능을 발표했다. 반복 작업을 줄이고 반응형 디자인과 고품질 프로토타이핑을 지원하는 한편, 제품팀 간 맥락 공유와 외부 커뮤니티의 학습·재사용을 확대하는 것이 핵심이다. 이러한 기능의 기반으로 안정적이고 성능이 뛰어난 플랫폼에 대한 지속적인 투자도 강조했다. ## 2020년 Figma의 세 가지 방향 - **제작(Creation):** 반복적인 디자인 작업을 자동화해 더 빠르고 효율적으로 제작하도록 지원한다. - **협업(Collaboration):** 디자이너뿐 아니라 제품 개발에 참여하는 모든 구성원이 함께 작업할 수 있도록 한다. - **커뮤니티(Community):** 디자인 파일을 공개하고 서로 공유·학습·재사용할 수 있는 생태계를 만든다. - 위 기능들을 뒷받침하기 위해 안정성과 성능을 지속적으로 개선한다. ## Auto Layout 강화 - 컨테이너 크기에 맞춰 늘어나는 반응형 컴포넌트를 만들 수 있다. - 텍스트 길이에 따라 자동으로 크기가 바뀌는 버튼을 제작할 수 있다. - 리스트 항목을 쉽게 재배치할 수 있다. - 여러 디바이스 유형에 대응하는 디자인을 만드는 데 유용하다. ## 더 효율적인 글꼴 및 색상 관리 - 새 **Font Picker**는 자주 사용하는 글꼴, 조직에서 공유한 글꼴, 즐겨찾기 글꼴을 우선 표시한다. - 수많은 글꼴 중 원하는 글꼴을 빠르게 검색할 수 있다. - 현재 파일에서 사용된 모든 글꼴을 확인해 디자인 전반의 일관성을 점검할 수 있다. - **Selection Colors**를 사용하면 여러 객체의 채우기, 선, 텍스트 색상을 한 번에 변경할 수 있다. - 색상 속성을 개별적으로 조정하거나 동일한 색상으로 일괄 통일할 수 있다. ## 키보드와 게임패드를 지원하는 프로토타이핑 - 키보드, 게임패드, 접근성 컨트롤러를 프로토타입 상호작용의 트리거로 사용할 수 있다. - `Cmd + F`와 같은 애플리케이션 단축키를 시뮬레이션할 수 있다. - 게임 메뉴의 방향키 조작처럼 게임패드 기반 인터랙션도 표현할 수 있다. - 다양한 입력 장치를 사용하는 고충실도 프로토타입 제작을 지원한다. ## 링크를 통한 협업 맥락 보존 - 텍스트에 웹페이지 링크를 삽입할 수 있다. - Figma 파일 내부의 특정 페이지나 에디터의 특정 프레임으로 연결할 수 있다. - 제품 요구사항 문서 등 외부 자료를 직접 연결할 수 있다. - 클릭 가능한 목차를 만들어 대규모 파일에서 협업자가 원하는 화면으로 빠르게 이동하도록 할 수 있다. ## Plugin Inspector API - 플러그인이 속성 패널에 주요 정보를 표시할 수 있도록 새로운 API를 제공한다. - Notepad 같은 플러그인의 작업 항목을 현재 디자인 요소와 함께 확인할 수 있다. - Mapsicle처럼 특정 플러그인으로 생성된 콘텐츠의 출처를 확인하고 쉽게 업데이트할 수 있다. - 디자인 과정에서 사용한 도구와 결과물 사이의 연결성을 높인다. ## 프로토타입만 공유하는 권한 - 디자인 원본 파일은 공개하지 않고 프로토타입만 공유할 수 있는 권한을 추가한다. - 구현 전 아이디어를 외부 이해관계자에게 보여주면서 실제 디자인 파일은 보호할 수 있다. - 해당 기능은 Figma Professional 및 Organization 요금제에 제공될 예정이라고 발표됐다. ## Figma Community를 통한 공개와 학습 - 팀이나 조직 내부를 넘어 전체 디자인 커뮤니티와 파일을 공유하는 방향을 제시했다. - 공개된 라이브 디자인 파일을 다른 사용자가 직접 살펴보고, 수정하고, 학습할 수 있다. - 커뮤니티 베타 출시 후 수개월 동안 400명 이상의 제작자가 1,000개 이상의 파일을 공개했다. - 공유된 자료에는 와이어프레임 템플릿, 아이콘 세트, 디자인 시스템 예시, 디바이스 프레임, 프레젠테이션 템플릿, 일러스트 등이 포함됐다. Figma의 발표는 단순히 디자인 편집 기능을 늘리는 데 그치지 않고, 반응형 제작 자동화, 팀 간 정보 연결, 선택적 공유, 공개 리소스 재사용을 하나의 작업 흐름으로 통합하려는 전략을 보여준다. 실무에서는 Auto Layout과 Selection Colors로 반복 작업을 줄이고, 내부 문서 링크와 프로토타입 전용 공유를 활용해 협업 효율과 보안을 함께 높이는 것이 유용하다.

plugin-apifigmadesign-systemsprototyping+3

figma2019년 8월 15일

유용한 플러그인으로 디자인 (새 탭에서 열림)

접근성을 디자인 초기부터 반영하지 않으면 시각·운동 능력 등에 제약이 있는 많은 사용자가 제품에서 배제될 수 있다. 이 글은 Figma에서 색상 대비와 키보드 포커스 순서를 점검할 수 있는 네 가지 플러그인을 소개하며, WCAG 기준을 디자인·개발 과정에 적용할 것을 권한다. 접근성 검사를 별도 단계가 아니라 디자인 워크플로의 일부로 만드는 것이 핵심이다. ## 색상 대비와 WCAG 기준 - 텍스트와 배경 사이의 충분한 대비는 다양한 시각 능력을 가진 사용자가 콘텐츠를 읽는 데 필수적이다. - WCAG는 색상 대비를 AA 또는 AAA 등급으로 평가하는 기준을 제공한다. - 소개된 플러그인들은 선택한 두 객체의 색상을 분석해 대비 비율과 기준 충족 여부를 확인한다. - 단순히 색상을 고르는 데 그치지 않고, 실제 텍스트 크기와 배경 조합을 고려해 가독성을 검증할 수 있다. ## Able: 대비 검사와 색각 이상 시뮬레이션 - 선택한 두 객체의 색상 대비를 분석한다. - 선택 영역이 바뀌면 결과도 자동으로 업데이트된다. - 텍스트와 배경 조합을 미리 볼 수 있는 프리뷰를 제공한다. - 다양한 색각 이상 유형에서 색상이 어떻게 보이는지 시뮬레이션할 수 있다. - 텍스트 색상과 배경 색상을 서로 바꿔 비교할 수 있다. - 각 색각 이상 유형별 영향을 받는 인구 비율도 확인할 수 있다. ## Contrast Checker: 대비 비율과 등급 확인 - 선택한 두 객체의 정확한 색상 대비 비율을 표시한다. - 선택된 레이어 중 텍스트 레이어가 있는지에 따라 상황에 맞는 미리보기를 제공한다. - AA/AA+와 AAA/AAA+ 등 여러 접근성 등급별 충족 여부를 보여준다. - 글꼴 크기가 18pt를 초과하는 경우에 적용되는 대비 기준도 별도로 확인할 수 있다. - Sketch 사용자에게 익숙한 Stark의 Figma용 대비 검사 도구다. ## Color Blind: 캔버스에서 보는 색각 이상 결과 - 선택한 디자인 요소가 여러 색각 이상 유형에서 어떻게 보이는지 확인한다. - 단순한 미리보기 대신, 선택한 요소를 복제해 캔버스에 직접 결과물을 생성한다. - 각 복제본은 해당 시각 유형을 나타내는 이름의 그룹으로 정리된다. - 완성된 화면 전체의 색상 체계와 정보 전달 방식이 색각 이상 사용자에게도 충분히 구분되는지 검토하는 데 유용하다. ## Focus Orderer: 키보드 탐색 순서 설계 - 브라우저가 키보드 포커스를 이동시킬 요소와 순서를 디자인에 표시한다. - 요소를 선택해 포커스 지점을 만들고, 캔버스에 순번을 표시할 수 있다. - 플러그인 UI에서 항목을 드래그하면 포커스 순서가 변경되고 캔버스의 번호도 자동으로 갱신된다. - 실제로 모든 요소를 탭 키로 순회하며 포커스 흐름을 테스트할 수 있다. - 디자인 단계에서 키보드 내비게이션을 고려하게 해, 구현 과정에서 접근성 요구사항이 누락되는 것을 줄인다. ## 접근성을 워크플로에 포함하기 - 색상 대비 검사는 시각적 가독성을, 포커스 순서 검사는 키보드 사용성을 다룬다. - 두 영역 모두 개발 완료 후 수정하기보다 디자인 단계에서 문제를 발견하는 편이 효율적이다. - WCAG 문서를 기준으로 플러그인 결과를 해석하고, 실제 사용자 환경에서의 사용성도 함께 검증해야 한다. - Figma 플러그인 API와 개발자 커뮤니티를 활용하면 팀에 맞는 접근성 검사 도구를 직접 만들 수도 있다. 이 플러그인들을 디자인 시스템과 리뷰 과정에 포함하면 접근성을 일회성 점검이 아니라 지속적인 품질 기준으로 운영할 수 있다. 특히 텍스트·배경 대비, 색각 이상 시뮬레이션, 키보드 포커스 순서를 모든 주요 화면에서 반복적으로 확인하는 것이 실용적인 접근이다.

plugin-apifigmaaccessibilityjavascript+3

figma2019년 8월 8일

워크플로우 속도를 높여주는 (새 탭에서 열림)

플러그인은 Figma에서 반복 작업을 자동화하고 디자인 데이터를 효율적으로 다루도록 돕는다. 이 글은 플러그인 생태계 출시 직후 주목할 만한 유틸리티 플러그인 5개를 소개하며, 화면 크기 조정부터 컴포넌트 복제·텍스트 편집·유사 레이어 선택까지 다양한 작업을 간소화하는 방법을 설명한다. 또한 단축키를 활용하면 플러그인을 더 빠르게 실행할 수 있다고 강조한다. ## Viewports: 기기 화면 크기 빠르게 확인 - 프레임을 스마트폰 등 일반적인 기기 화면 크기로 변경할 수 있다. - 디자인 요소에 먼저 Figma의 **Constraints**를 설정해야 화면 크기 변경에 따른 레이아웃 변화를 제대로 확인할 수 있다. - 각 뷰포트별로 해당 기기를 사용하는 사용자의 예상 글로벌 시장 점유율을 보여준다. - 이를 통해 어떤 화면 크기를 우선 고려할지 판단할 수 있다. - 플러그인은 별도의 수동 업데이트 없이 새 기능이 배포되면 사용할 수 있다. ## Component Cloner: 컴포넌트와 인스턴스 복제 - 선택한 마스터 컴포넌트만 복제하거나, 해당 컴포넌트의 인스턴스까지 함께 복제한다. - 색상 오버라이드가 적용된 아이콘을 별도로 실험하거나 아이콘 스프라이트를 제작할 때 유용하다. - 컴포넌트와 연결된 여러 인스턴스를 일일이 다시 만들 필요가 없어 반복 작업을 줄여준다. ## Nisa Text Splitter: 텍스트를 개별 객체로 분리 - 한 텍스트 박스에 입력된 여러 줄을 줄바꿈 기준으로 각각의 텍스트 박스로 분리한다. - 분리된 텍스트 객체를 알파벳순 또는 역순으로 정렬할 수 있다. - Figma의 **Smart Selections**와 함께 사용하면 여러 객체의 순서를 편리하게 재배치할 수 있다. - 반대로 여러 텍스트 박스를 하나의 텍스트 객체로 합치는 기능도 제공한다. - 목록, 메뉴 항목, 데이터 샘플처럼 줄 단위 편집이 필요한 작업에 적합하다. ## Find and Replace: 텍스트와 레이어 이름 일괄 변경 - 문서 전체에서 텍스트를 검색하고 다른 문자열로 치환한다. - 캔버스 위의 텍스트뿐 아니라 레이어 이름도 검색·변경할 수 있다. - 대소문자 구분 여부를 설정할 수 있다. - 검색 범위를 문자열의 어느 위치에 적용할지 선택할 수 있다. - 문자열 어디에서나 일치 - 문자열의 시작 부분 - 문자열의 끝 부분 - 전체 문자열이 정확히 일치 - 대규모 문서의 문구 수정이나 카피 변경 시 특히 유용하다. ## Similayer: 조건이 같은 레이어 일괄 선택 - 기준이 될 요소를 선택한 뒤, 원하는 속성을 지정해 동일한 조건의 레이어를 찾아 선택한다. - Figma의 “같은 속성을 가진 항목 모두 선택” 기능을 확장한 방식이다. - 다음과 같은 속성을 조합할 수 있다. - 테두리 반경 - 채우기 - 선 - 그림자 - 여러 속성을 동시에 조건으로 지정할 수 있어, 복잡한 디자인 요소도 빠르게 선별할 수 있다. - 유사한 레이어를 한꺼번에 수정해야 할 때 반복 클릭을 크게 줄여준다. ## 플러그인 실행 단축키 - Mac에서는 `⌘ + /`, Windows에서는 `Ctrl + /`로 메뉴 검색을 연다. - 검색창에 플러그인 이름을 입력한 뒤 키보드만으로 실행할 수 있다. - 직전에 실행한 플러그인은 다음 단축키로 다시 실행할 수 있다. - Mac: `⌘ + ⌥ + P` - Windows: `Ctrl + Alt + P` 반복적인 화면 검증, 컴포넌트 복제, 텍스트 정리, 일괄 수정이 자주 발생한다면 이 플러그인들을 작업 흐름에 맞게 조합해 사용하는 것이 좋다. 특히 플러그인 이름을 메뉴 검색으로 실행하는 습관을 들이면 마우스 조작까지 줄일 수 있다.

plugin-apifigmaux-designfigma-plugins+1

figma2019년 7월 21일

플러그인 뒷이야기: (새 탭에서 열림)

Figma 플러그인은 디자이너가 반복적이고 번거로운 작업을 자동화해 더 의미 있는 디자인 작업에 집중하도록 돕는다. Cloudflare의 UX Engineer Sam Mason de Caires는 번역, 데이터 교체, 테마 생성, 그래프, 색각 이상 대응 등 다양한 플러그인을 만들며 디자인과 개발의 결합 가능성을 보여준다. 그는 앞으로 디자인 도구가 데이터를 바탕으로 여러 디자인 변형을 생성하고, 디자이너가 그중 최선의 결과를 선택하는 방향으로 발전할 것이라고 전망한다. ## 플러그인 생태계의 출발 - Figma는 2019년 플러그인 베타를 시작했고, 첫 고객들이 다양한 도구를 제작했다. - 플러그인의 활용 사례로 데이터 시각화, 콘텐츠 가져오기, 접근성 도구 등이 소개된다. - Figma는 플러그인 제작자들의 동기와 작업물을 소개하는 5부작 인터뷰 시리즈를 진행했다. - Sam Mason de Caires는 Figma 커뮤니티를 위한 초기 플러그인 제작자 중 한 명이다. ## 디자인과 개발의 결합 - Sam은 무언가를 처음부터 만들어 사람들이 실제로 사용하는 모습을 보는 데 매력을 느껴 개발자가 되었다. - 동시에 디자인에도 관심이 있었으며, 디자인과 개발 사이에 큰 교차점이 있다고 보았다. - Cloudflare에서는 개발 역량을 활용해 디자인 프로젝트에 실질적으로 기여하고 있다. - 플러그인 API는 디자인 도구 내부의 코드와 데이터에 접근할 수 있게 해, 개발자가 디자이너를 위한 생산성 도구를 만들 수 있도록 한다. ## 제작 중인 Figma 플러그인 - 번역 플러그인: 디자인 콘텐츠를 여러 언어로 변환하는 작업을 지원한다. - 데이터 교체 플러그인: 화면에 들어간 데이터를 빠르게 다른 값으로 바꿀 수 있다. - 테마 UI 생성기: 테마에 맞는 사용자 인터페이스 요소를 자동으로 생성한다. - 그래프 플러그인: 데이터를 시각적인 그래프로 표현한다. - 색상 참고 플러그인: 색각 이상 사용자가 색상을 어떻게 인식하는지 확인해 접근성을 개선한다. - 이 도구들은 디자이너가 수작업으로 반복하던 작업을 줄이고, 더 빠르고 자신 있게 디자인하도록 돕는 것을 목표로 한다. ## 자동화가 디자이너에게 주는 가치 - 반복 작업을 자동화하면 디자이너가 실제 문제 해결과 시각적 의사결정에 더 많은 시간을 사용할 수 있다. - 플러그인은 단순한 편의 기능을 넘어 디자인 프로세스 자체를 확장하는 수단이 된다. - 개발자는 디자인 도구의 내부 구조와 API를 활용해 디자이너가 직접 만들기 어려운 기능을 제공할 수 있다. - Sam은 개발자의 기술이 커뮤니티에 직접 도움이 되지 않을 것이라고 생각했지만, 플러그인을 만들면서 디자인 생산성과 신뢰도를 높일 수 있음을 깨달았다. ## 생성형 디자인의 미래 - Sam은 향후 5년 동안 생성형 디자인이 크게 발전할 것으로 예상한다. - 디자이너가 가능한 모든 상태를 하나씩 만드는 대신, 원하는 결과를 설명하는 데이터와 조건을 입력하면 도구가 여러 변형을 자동으로 생성한다. - 디자이너의 역할은 모든 결과를 직접 제작하는 것에서 벗어나, 생성된 결과 중 적절한 요소를 선택하고 다듬는 방향으로 이동할 수 있다. - 이는 디자인 도구가 정적인 편집기를 넘어 데이터 기반의 결과 생성 시스템으로 발전할 가능성을 의미한다. ## 커뮤니티에 대한 장기적 기여 - Sam은 디자이너가 더 빠르고 정확하게 작업할 수 있도록 돕는 도구와 프로세스를 계속 만들고 싶다고 밝혔다. - 그는 디자인 커뮤니티의 발전에 개발자도 중요한 방식으로 기여할 수 있다고 본다. - 특히 자동화, 접근성, 콘텐츠 관리처럼 여러 프로젝트에서 반복되는 문제를 플러그인으로 해결할 수 있다. - Sam의 플러그인은 2019년 8월 1일부터 Figma 커뮤니티에 공개될 예정이었다. 플러그인을 활용하면 반복 작업을 줄이고 디자인 품질과 접근성을 함께 높일 수 있다. 디자이너와 개발자는 Figma API를 활용해 팀의 업무 방식에 맞는 자동화 도구를 직접 만들고, 생성된 여러 결과를 사람이 검토·선택하는 협업 방식을 실험해볼 만하다.

plugin-apifigmacloudflarefigma-plugins+2

figma2019년 6월 25일

Figma의 새로운 기능 요 (새 탭에서 열림)

Figma는 2019년 봄, 디자인 시스템 확장에 초점을 맞춰 Components를 개선하고 플러그인 API 공개 베타를 시작했다. 여러 컴포넌트를 한 번에 생성하거나 인스턴스와 마스터 간 이동·동기화를 쉽게 만드는 기능으로 반복 작업을 줄였으며, 플러그인을 통해 커뮤니티가 Figma 기능을 확장할 수 있는 기반을 마련했다. 또한 Smart Selection 등 일상적인 기능 개선과 버그 수정도 함께 진행했다. ## 디자인 시스템 확장을 위한 컴포넌트 개선 - 여러 객체를 선택한 뒤 한 번의 클릭으로 각각의 Component로 변환할 수 있다. - 인스턴스를 우클릭하면 Context Menu에서 관련 Component를 바로 확인할 수 있다. - 다른 인스턴스로 빠르게 교체할 때 유용하다. - **Return to Instance** 기능을 사용하면 현재 인스턴스의 Master Component로 이동해 참고하거나 수정한 뒤, 작업 중이던 인스턴스로 돌아올 수 있다. - 로컬 컴포넌트에서는 인스턴스에 적용한 변경 사항과 오버라이드를 Master Component에 반영할 수 있다. - 기존 컴포넌트를 실제 사용 사례에 맞게 조정하고 업데이트할 때 효율적이다. - 이러한 기능들은 재사용 가능한 UI 요소를 관리하고, 팀 단위 디자인 시스템을 확장하는 작업을 단순화한다. ## Figma 플러그인 API 공개 베타 - Figma는 오랫동안 준비한 플러그인 API의 공개 베타를 출시했다. - 플러그인을 통해 사용자가 Figma 내부 기능을 직접 확장하고 반복적인 디자인 작업을 자동화할 수 있게 됐다. - 초기 제작 사례로 다음과 같은 플러그인이 소개됐다. - 텍스트 요소를 방사형으로 반복 배치하는 생성형 디자인 플러그인 - 선택한 이미지에서 주요 색상 팔레트를 추출하는 플러그인 - 공개 직후부터 커뮤니티와 고객들이 다양한 실험적 도구를 만들며 생태계의 가능성을 보여줬다. ## 지속적인 사용성 개선과 품질 향상 - Components와 Smart Selection처럼 매일 사용하는 기능을 빠르게 개선했다. - 사용자가 요청해 온 기능을 추가하는 동시에, 반복 작업에 드는 시간을 줄이는 데 초점을 맞췄다. - 별도의 품질 개선 기간을 운영해 다수의 버그를 수정했다. - 이번 업데이트는 대규모 신기능뿐 아니라 기존 기능의 안정성과 작업 흐름 개선도 중요하게 다뤘다. ## 실용적인 활용 방향 - 반복되는 UI 요소는 Component로 만들고, 여러 객체를 한 번에 변환해 초기 구축 시간을 줄이는 것이 좋다. - 인스턴스에서 발견한 개선 사항은 로컬 컴포넌트의 Master에 반영해 디자인 시스템을 최신 상태로 유지할 수 있다. - 이미지 색상 추출이나 생성형 배치처럼 반복적이거나 계산이 필요한 작업은 플러그인으로 자동화할 수 있다.

plugin-apifigmadesign-systemsfigma-plugins+2