figma·2018년 11월 14일·2분 읽기큐레이션 요약

2018 Unsplash

Figma는 Unsplash의 2018년 연례 사진 어워즈 개최 소식을 알리며 사진 제출을 독려한다. Unsplash는 무료로 사진을 공유하는 창작자들의 기여를 기념하기 위해 다양한 분야의 우수 사진을 선정하며, 2018년 12월 7일까지 작품을 접수한다. 수상작은 11~12월 동안 소개된 사진 중 심사위원들이 카테고리별로 선정한다. ## Unsplash가 사진 창작자를 기리는 이유 - Unsplash는 2013년 시작해 기존 스톡 사진의 진부하고 상업적인 이미지와 차별화했다. - 편집자들이 매일 아름다운 사진을 선별해 높은 품질 기준을 유지했다. - 플랫폼은 사진을 무료로 공유하는 창작자들의 관대함과 전문성에 기반한다. - 어워즈는 이러한 창작자들의 기여를 인정하고 감사하기 위한 행사다. ## 2018 Unsplash Awards 운영 방식 - 2018년이 두 번째 연례 Unsplash Awards다. - 11월과 12월 동안 여러 주제별 사진을 집중적으로 소개한다. - 각 카테고리에서 소개된 작품을 심사위원들이 평가해 최고의 사진을 선정한다. - 카테고리별 세부 기준, 심사위원 명단, 평가 방식은 Unsplash Awards 공식 페이지에서 확인할 수 있다. ## 사진 출품 카테고리 - 항공 사진 - 동물 및 야생동물 - 천체 사진 - 흑백 사진 - 음식 및 음료 - 인테리어 및 건축 - 모바일 사진 - 자연 및 풍경 - 인물 및 초상 - 스포츠 - 거리 사진 - 기술 및 비즈니스 - Unsplash 커뮤니티 ## 출품 일정과 대상 - 사진 제출 마감일은 2018년 12월 7일이다. - Unsplash에 사진을 공유하는 사진가라면 출품할 수 있다. - Figma는 자사 디자이너들 중 사진 취미 활동을 하거나 Unsplash를 사용하는 사람이 많다는 점에서 이번 행사를 소개했다. - 출품은 Unsplash Awards 웹사이트에서 진행된다. 관심 있는 사진가는 자신의 작품이 가장 잘 맞는 카테고리와 세부 평가 기준을 확인한 뒤, 마감일 전에 공식 출품 페이지를 통해 제출하면 된다.

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

Figmadesignphotographyunsplash

figma·2018년 11월 13일·3분 읽기큐레이션 요약

Figma에서 페이지를

Figma의 Pages는 하나의 파일 안에서 작업을 목적별로 나누어 정리하는 유연한 구조다. 글은 플랫폼, 기능, 디자인 단계, 원자적 디자인 방법론에 따라 Pages를 구성하는 네 가지 방식을 소개하며, 팀 규모와 프로젝트 특성에 맞는 체계를 선택하라고 제안한다. 적절히 나누면 협업, 프로토타이핑, 검색, 개발자 전달이 쉬워진다. ## Pages를 활용한 파일 구조화 - Figma 파일의 왼쪽 탭에 여러 Pages를 만들어 디자인을 분류할 수 있다. - 조직 방식에는 정답이 없으며 회사, 팀, 개인의 작업 방식에 따라 달라진다. - 디자인 파일을 무작정 한 곳에 쌓기보다 작업 목적에 맞게 구분하면 정리보다 디자인 자체에 집중할 수 있다. ## 플랫폼 또는 화면 크기별 구성 - Android, iOS, 데스크톱처럼 여러 플랫폼을 지원하는 제품에 적합하다. - 플랫폼별로 Page를 나누면 각 환경의 프레임 프리셋과 제약 조건을 적용하기 쉽다. - 각 Page에 독립적인 프로토타입을 구성할 수 있어 플랫폼별 사용자 테스트가 간편하다. - 반응형 디자인을 플랫폼별로 비교하고 관리하기에도 유리하다. ## 앱 기능별 구성 - 여러 디자이너가 다양한 기능을 동시에 개발하는 대규모 앱에 적합하다. - 프로필, 홈 화면 등 제품의 주요 기능을 각각 별도의 Page로 분리한다. - 담당 디자이너는 특정 기능에 집중하면서도 다른 Page를 참고해 전체 제품과의 일관성을 유지할 수 있다. - 기능별로 별도의 프로토타입을 만들어 특정 사용자 흐름만 독립적으로 테스트할 수 있다. ## 디자인 프로세스 단계별 구성 - 아이디어부터 최종 결과물까지 작업 진행 상태를 명확히 보여줄 수 있다. - 예를 들어 다음과 같이 Page를 구성할 수 있다. - 썸네일 → 와이어프레임 → 디자인 → 아카이브 - 문서·리서치 → 작업 중인 시안 → 리뷰 준비 - 사이트맵 → 와이어프레임 → 목업 → QA → 마케팅용 스크린샷 - `Done` Page에 완료된 디자인을 모으면 개발자는 실제로 구현해야 할 결과물을 쉽게 확인할 수 있다. - 초기 아이디어와 브레인스토밍을 별도 Page에 두면 완성도 높은 화면이 작업 중인 시안에 묻히지 않는다. - 팀이 복잡한 체계를 원하지 않는다면 단순히 “진행 중”과 “완료” 정도로 나누는 방식도 가능하다. ## Atomic Design 방법론에 따른 구성 - 디자인 시스템을 원자적 디자인 방식으로 운영할 때 적합하다. - 구성 요소의 계층에 따라 Page를 분리한다. - Atoms: 타이포그래피, 아이콘 등 기본 요소 - Molecules: 버튼 등 조합된 컴포넌트 - Organisms: 전체 페이지처럼 복잡한 구성 - Team Library에서 Page 이름을 기준으로 컴포넌트를 찾기 쉬워진다. - 레이어 이름에 컴포넌트 유형을 반복해서 넣지 않아도 된다. - 예: `button-selected`, `button-hovered` 대신 `selected`, `hovered`처럼 상태만 이름에 표시 - 결과적으로 레이어 패널이 단순해지고 컴포넌트 검색과 관리가 쉬워진다. 프로젝트의 핵심 기준을 먼저 정한 뒤 Pages를 구성하는 것이 좋다. 여러 플랫폼을 지원하면 플랫폼별로, 협업 규모가 크면 기능별로, 개발 전달이 중요하면 프로세스 단계별로 나누고, 디자인 시스템 중심이라면 Atomic Design 구조를 적용하면 된다.

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

Figma디자인 시스템프로토타이핑사용자 인터페이스+2

figma·2018년 11월 7일·3분 읽기큐레이션 요약

Figma에서 제약 조건과 매

LittleBits 팀은 여러 플랫폼과 화면 크기에 대응하기 위해 Figma의 제약 조건과 8px 기반의 ‘매직 넘버’ 시스템을 결합했다. 주요 크기와 여백을 일정한 배수로 통일하고, 화면 비율별 스케일링 규칙을 React 코드에도 적용해 하나의 템플릿으로 모바일·태블릿 레이아웃을 관리했다. 그 결과 작은 팀으로도 다양한 기기에서 일관된 디자인을 유지하면서 추가적인 화면별 조정을 줄일 수 있었다. ## 8px 기반의 매직 넘버 시스템 - 텍스트, 버튼, 그래픽, 여백, 패딩 등의 크기가 공통 숫자 배수를 따르도록 설계했다. - 기존 시안을 분석한 결과 대부분의 값이 8의 배수에 가까웠기 때문에 8px을 기준 단위로 채택했다. - 버튼과 입력 요소의 높이는 32, 48, 56, 64, 96px로 구성했다. - 주요 텍스트 크기는 16, 24, 32, 48px을 사용했다. - 패딩과 거터는 16, 24, 32px을 중심으로 정의했으며, 큰 카드 높이는 240px로 설정했다. - 공통 단위를 사용하면 컴포넌트 간 간격과 크기를 조정하기 쉽고 전체 디자인의 조화도 높아진다. ## Figma 제약 조건과 화면 크기 대응 - Figma의 constraints를 활용해 요소를 화면이나 그리드의 가장자리에 고정하고, 프레임 크기 변화에 따라 레이아웃이 반응하도록 만들었다. - 하나의 레이아웃이 일반적인 스마트폰, 작은 화면의 iPhone SE, 태블릿에서 모두 자연스럽게 보이도록 화면 간 비율을 분석했다. - 화면 크기 사이의 비율을 계산한 뒤 소수 값을 반올림해 실용적인 정수 기반 스케일링 규칙으로 정리했다. - 이 규칙을 React 코드의 크기 계산 로직에 적용해 디자인과 실제 구현이 같은 방식으로 동작하도록 했다. - Figma에서는 scale 도구와 프레임 크기 조절을 함께 사용해 하나의 템플릿으로 다양한 기기 화면을 미리 확인했다. - 템플릿이 처음부터 스케일링 규칙을 고려해 설계되었기 때문에 태블릿과 작은 스마트폰에서도 별도의 대규모 수정 없이 안정적으로 표시됐다. ## 다양한 화면 비율을 위한 콘텐츠 설계 - 앱에는 많은 영상과 애니메이션이 포함되어 있어 화면별로 콘텐츠 파일을 여러 버전 제작하는 방식은 피하고자 했다. - 모든 영상과 애니메이션을 4:3 비율을 기준으로 제작했다. - 16:9 화면에서 일부가 잘리더라도 핵심 내용이 유지되도록 안전 영역(safe area)을 설정했다. - 이 방식으로 콘텐츠 파일은 하나만 유지하면서 다양한 화면 비율에 대응할 수 있었다. ## 텍스트 크기와 다국어 지원 - 8px 규칙이 모든 텍스트에 적합한 것은 아니므로 작은 글자에는 4px 단위의 예외를 허용했다. - 예를 들어 12px과 20px 같은 크기를 사용해 가독성과 시각적 균형을 맞췄다. - 앱을 6개 언어로 번역하면서 독일어처럼 단어가 긴 언어가 정해진 영역을 넘는 문제가 발생했다. - 이를 해결하기 위해 텍스트가 영역에 맞지 않으면 코드가 다음으로 작은 제목 크기를 자동 선택하도록 구현했다. - 그 결과 실제 사용 가능한 제목 크기는 기본 디자인보다 많아졌지만, H1부터 H6까지 단계적으로 자연스럽게 작아지는 체계를 유지했다. ## 단순한 레이아웃에 맞춘 체계적인 접근 - 대부분의 화면은 중앙 정렬 요소나 2~3열 콘텐츠처럼 비교적 단순한 구조였다. - 복잡한 반응형 패턴을 많이 사용하지 않고, 기본 제약 조건과 스케일링 시스템만으로 요구사항을 충족했다. - 디자인 시스템을 Figma와 React 양쪽에 동일하게 적용한 것이 다양한 화면 크기를 효율적으로 관리한 핵심이었다. 실무에서는 먼저 기존 디자인에서 반복되는 크기와 간격을 찾아 기준 단위를 정하고, Figma constraints와 코드의 반응형 규칙을 함께 설계하는 것이 좋다. 다만 텍스트와 다국어처럼 예외가 잦은 영역에는 고정 규칙을 강제하기보다 단계적 축소나 안전 영역 같은 유연한 예외 처리를 마련해야 한다.

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

Figma디자인 시스템React반응형 디자인+2

figma·2018년 11월 7일·3분 읽기큐레이션 요약

Figma에서 아토믹 디자인 시스템

littleBits 팀은 약 6개월 안에 iOS·Android용 모바일·태블릿 앱 네 개를 출시해야 했고, 이를 위해 Figma에서 Atomic Design 기반의 디자인 시스템을 구축했다. 핵심은 재사용 빈도와 실제 개발 구조를 기준으로 원자·컴포넌트를 정의하고, 의미론적 색상과 텍스트 스타일을 조합해 유연성을 확보하는 것이었다. 결과적으로 Figma의 컴포넌트 구조가 React Native 컴포넌트와 자연스럽게 대응했고, 이후 반응형 레이아웃 템플릿으로 확장할 수 있는 기반이 마련됐다. ## 원자 수준의 디자인 토큰 - 텍스트 스타일과 색상은 Figma Styles로 정의했다. - 아이콘은 외부 아이콘 세트를 가져온 뒤 Figma 컴포넌트로 변환했다. - 색상 이름은 Bootstrap의 명명 방식을 참고하되, 테마 변경을 고려해 의미론적으로 지정했다. - 예: `bg-light`는 배경용 색상 - 예: `ui-dark`는 기본 전경 요소용 색상 - 기본 UI·그레이스케일 색상 외에 브랜드 색상, 배경, 오버레이, 외곽선용 색상 팔레트를 추가했다. - 색상값 자체보다 사용 목적을 이름에 반영하면 전체 디자인에서 색상을 일괄 수정하기 쉽고, 변경으로 인한 오류도 줄일 수 있다. ## 복잡한 계층 대신 ‘컴포넌트’로 단순화 - Atomic Design의 ‘분자’와 ‘유기체’가 여러 템플릿에서 반복 사용되는 경우가 많지 않다는 점을 발견했다. - 따라서 해당 계층을 세분화하지 않고 모두 `Components`로 통합했다. - 이 구조는 다음과 같은 React Native 컴포넌트 구조와도 잘 맞았다. - 카드 - 툴팁 - 버튼 - 기타 반복 UI 요소 - 이론적인 Atomic Design 분류보다 실제 재사용 패턴과 개발 구조에 맞춘 단순한 분류를 선택한 것이다. ## 스타일 조합으로 불필요한 컴포넌트 줄이기 - 텍스트 스타일과 색상 스와치를 자유롭게 조합할 수 있으므로, 색상·텍스트 스타일 조합마다 별도의 컴포넌트를 만들지 않았다. - 대신 스타일 가이드를 제공하고, 실제 템플릿에서 필요한 조합을 직접 적용했다. - 하나의 텍스트 상자 안에서도 여러 텍스트 스타일을 섞을 수 있게 해 가변적인 문구 길이에 대응했다. - Figma Styles 도입으로 컴포넌트 내부의 레이어 구조가 단순해졌고, 문서 사용성과 성능도 개선됐다. ## 버튼은 중첩 컴포넌트로 관리 - 버튼은 디자인에서 반복적으로 사용되고, 외곽선 등 중앙 관리가 어려운 속성을 포함하므로 별도의 중첩 컴포넌트로 만들었다. - 주요 버튼 유형을 다음과 같이 분리했다. - Primary - Secondary - Tertiary - 반복 사용될 가능성이 높은 특수 버튼도 별도 컴포넌트로 정의했다. - 모든 요소를 무조건 조합형 스타일로 처리하지 않고, 반복성과 관리 필요성이 높은 UI만 컴포넌트화한 것이 특징이다. ## 디자인 시스템과 개발 시스템의 연결 - Figma에서 정의한 컴포넌트 체계가 React Native에서 구현할 컴포넌트와 직접 대응하도록 설계됐다. - 디자인과 코드 사이의 구조적 차이를 줄여 협업과 구현을 쉽게 만들었다. - 완성된 컴포넌트 기반은 이후 모바일·태블릿 화면을 위한 반응형 레이아웃 템플릿 구축의 출발점이 됐다. 실무에서는 Atomic Design의 계층을 그대로 적용하기보다, 실제 재사용 빈도와 개발 컴포넌트 구조를 기준으로 단순화하는 것이 효과적이다. 색상과 텍스트는 의미론적 스타일로 관리하고, 반복성과 변경 가능성이 높은 요소만 컴포넌트로 만들면 유지보수성과 확장성을 함께 확보할 수 있다.

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

Figma디자인 시스템React Nativeatomic-design+2

figma·2018년 11월 5일·3분 읽기큐레이션 요약

피그마 2018

Figma의 2018년은 단순한 디자인 도구를 넘어 플랫폼과 커뮤니티로 확장한 해였다. 웹 기반 API를 공개해 외부 서비스와 자동화 도구가 Figma에 연결될 수 있도록 했고, 실제 사업과 통합 사례도 등장했다. 동시에 전 세계 사용자 커뮤니티를 조직하고 디자인 시스템 관련 지식 공유를 확대했으며, Series B 투자로 제품·사업 확장을 뒷받침했다. ## 플랫폼과 웹 API의 공개 - Figma는 초기부터 데스크톱 소프트웨어가 아닌 웹 기반 디자인 도구를 지향했다. - 2018년에는 디자인 도구 최초의 웹 API를 공개하며 Figma Platform을 출시했다. - API를 통해 다음과 같은 확장이 가능해졌다. - 다른 디자인·개발 도구와의 연동 - 반복 작업 자동화 - 스크립트와 웹 애플리케이션을 활용한 맞춤형 워크플로 구축 - Uber와 GitHub는 공개 전부터 API를 활용해 자체 업무 프로세스를 맞춤화했다. - 클라우드 기반 구조 덕분에 기존의 폐쇄적인 데스크톱 소프트웨어로는 구현하기 어려웠던 온라인 통합이 가능해졌다. ## API를 기반으로 한 생태계와 사업 - 플랫폼 출시 7개월 만에 Figma 위에서 유료 사업을 운영하는 기업이 등장했다. - 커뮤니티와 기업이 만든 주요 통합 사례는 다음과 같다. - PDF 내보내기 - 스타일 가이드 자동 생성 - 텍스트와 레이어 이름 검색·일괄 변경 - JavaScript용 Figma API 라이브러리 - 외부 서비스와의 연동도 확대됐다. - Avocode와 Zeplin: 개발자 핸드오프 지원 - Principle: Figma 디자인에 고급 애니메이션 추가 - Relay for Figma: 디자인을 코드베이스로 직접 전달 - Pagedraw: Figma 디자인을 React 코드로 변환 - Overflow: 사용자 플로우 다이어그램 제작 - Haiku: 디자인을 프로덕션용 컴포넌트로 전환 - Figma는 파트너십과 통합 생태계를 향후 성장의 핵심 축으로 보고, 2019년에도 플랫폼 확장을 이어가겠다고 밝혔다. ## 글로벌 커뮤니티 구축 - 2018년 Figma의 관심사는 제품 자체뿐 아니라 사용자 커뮤니티로 확대됐다. - 디자인 시스템을 주제로 한 밋업을 세계 여러 도시에서 개최했다. - 초기에는 8개 도시에서 시작 - 이후 17개 국가로 활동 범위를 확장 - Bengaluru, Toronto 등지에서 디자이너들이 실제 디자인 시스템 운영 경험을 공유 - 커뮤니티의 관심이 커지자 DesignSystems.com을 개설했다. - Airbnb, GitHub, Braintree, Segment 등의 구성원이 디자인 시스템 운영 사례와 실무 조언을 공유했다. - Figma는 온라인 제품뿐 아니라 오프라인 만남과 지식 공유를 통해 사용자 간 연결을 강화하려 했다. ## 기업 확장과 투자 - Microsoft Dynamics 365 for Talent 디자인팀은 Figma API를 활용해 개발자 핸드오프를 자동화했다. - 대규모 조직이 여러 부서와 팀에서 Figma를 채택하기 시작했다. - 2018년 초 2,500만 달러 규모의 Series B 투자를 유치했다. - 투자금은 제품 개발과 사업 확장, 플랫폼 및 커뮤니티 성장에 활용됐다. ## 실용적인 시사점 Figma의 사례는 협업 도구가 자체 기능만으로 성장하는 것이 아니라 API, 외부 통합, 사용자 커뮤니티를 통해 플랫폼으로 발전할 수 있음을 보여준다. 특히 반복적인 디자인·개발 업무를 자동화하려는 팀이라면 API 기반 연동과 기존 도구와의 연결 가능성을 우선 검토할 만하다.

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

Figma디자인 시스템ReactJavaScript+3

figma·2018년 10월 29일·3분 읽기큐레이션 요약

디자이너들이 피

Uber는 다양한 국가와 사용자층을 고려한 현지화된 경험 설계를 통해 교통 서비스를 확장했다. 특히 현금 결제가 필요한 신흥 시장을 공략하는 과정에서, Figma의 실시간 협업과 중앙 집중식 파일 관리가 디자인·리서치·엔지니어링 간 소통을 크게 개선했다. 결과적으로 팀은 최신 디자인을 공유하고 빠르게 피드백을 반영하며, 지역과 조직 규모에 관계없이 더 빠르게 제품을 발전시킬 수 있었다. ## 전 세계 사용자를 위한 디자인 - Uber는 65개국에서 7,500만 명의 승객이 연간 40억 회 이용하는 글로벌 물류 플랫폼으로 성장했다. - 국가별 사용자 경험을 설계할 때 다음 요소를 고려한다. - 언어 - 문해력 - 사용하는 기기 - 문화 - 지역적 특성 - 승객·운전자 등 사용자의 역할 - 제품팀은 설계 전에 현지 시장과 사용자에 대한 심층 조사를 수행한다. - 디자이너가 여러 국가에서 운전자와 직접 탑승하며 실제 환경에서 새로운 사용자 경험을 테스트하기도 한다. ## 신흥 시장의 현금 결제 설계 - 은행 계좌나 신용카드를 사용하기 어려운 사용자를 위해 Uber는 일부 시장에 현금 결제를 도입했다. - 현금 결제 기능은 제품 관리자, 디자이너, 운영 담당자, 데이터 과학자, 엔지니어가 함께 개발했다. - 기존 디자인 도구에서는 다음과 같은 비효율이 발생했다. - 디자인·프로토타이핑·공유·피드백 수집에 여러 도구를 사용 - 파일을 반복적으로 가져오고 내보내야 함 - 진행 상황을 별도 커뮤니케이션 채널에서 공유 - 한 번에 한 사람만 파일을 수정할 수 있음 - 현지 운전자와 프로토타입을 테스트하면서 실시간으로 수정하려 했지만, 협업 편집이 불가능해 즉각적인 반복 작업이 어려웠다. ## Figma를 통한 실시간 협업 - 디자이너 Femke van Schoonhoven은 다른 Uber 팀이 사용하던 웹 기반 협업 도구 Figma를 도입했다. - 기존 디자인 파일을 Figma로 드래그 앤 드롭해 쉽게 이전할 수 있었다. - 현지 언어와 실제 사용 맥락을 반영한 디자인을 만들면서 팀원들과 동시에 작업할 수 있었다. - 팀원들이 지역과 시간대에 관계없이 같은 디자인 파일에서 실시간으로 협업했다. - 파일 구조와 정리 방식도 직관적이어서 필요한 자료를 쉽게 찾을 수 있었다. - Figma는 여러 디자인 파일과 버전을 한곳에서 관리하는 중앙 저장소 역할을 했다. ## 단일 디자인 소스와 커뮤니케이션 효율화 - 이전에는 최신 디자인 버전을 알리기 위해 이해관계자에게 이메일을 반복해서 보내야 했다. - Figma에서는 팀원들이 폴더에서 언제든 최신 디자인을 확인할 수 있었다. - 디자인 파일 안에서 직접 댓글을 남길 수 있어 별도 이메일이나 메신저로 맥락을 설명할 필요가 줄었다. - van Schoonhoven은 커뮤니케이션 오버헤드가 최소 75% 감소했다고 설명했다. - 엔지니어를 디자인 파일에 초대해 최신 변경 사항과 맥락이 포함된 댓글을 함께 확인하도록 했다. - 엔지니어가 초기 단계부터 디자인 과정에 참여하면서 핸드오프가 더 빠르고 간단해졌다. ## 분산된 팀을 하나로 연결 - 여러 지역에 흩어진 팀원들이 동일한 파일과 목표를 공유할 수 있었다. - 과거에는 업무가 팀별로 분리되어 있었지만, Figma 도입 후 공동 작업 기반이 마련됐다. - 웹 기반 도구이므로 이해관계자가 파일을 쉽게 공유하고 상위 승인도 빠르게 받을 수 있었다. - 결과적으로 디자인 검토와 의사결정 속도가 빨라졌고, 팀 전체의 작업 효율이 향상됐다. Figma의 사례는 글로벌 제품에서 현지화 자체만큼이나 협업 방식이 중요하다는 점을 보여준다. 여러 국가의 사용자와 분산된 팀을 상대한다면, 최신 디자인을 한곳에서 관리하고 디자인·개발·피드백을 실시간으로 연결하는 협업 환경을 구축하는 것이 효과적이다.

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

Figma프로토타이핑프로덕트 디자인collaborative-design+4

figma·2018년 10월 22일·3분 읽기큐레이션 요약

새로운 Principle 연동 기능

Figma가 프로토타이핑 도구 Principle과 연동되어, Figma에서 만든 정적 디자인에 고급 애니메이션과 인터랙션을 추가할 수 있게 되었다. 사용자는 코딩 없이 스크롤, 스와이프, 버튼 상태 변화, 스프링·이징·선형 전환 등을 구현해 실제 모바일 앱과 유사한 프로토타입을 만들 수 있다. 또한 Figma에서 디자인을 수정하면 Principle이 변경 사항을 감지해 기존 애니메이션을 유지한 채 동기화한다. ## Figma와 Principle의 통합 - Principle에서 Figma를 가져오기 소스로 인증하면 Figma 디자인을 Principle로 불러올 수 있다. - Figma의 화면과 객체를 기반으로 Principle에서 인터랙션과 모션을 설정한다. - 정적인 UI 시안을 실제 앱처럼 동작하는 프로토타입으로 발전시킬 수 있다. - 이 통합은 Figma의 웹 기반 API를 활용해 구축되었다. ## 구현할 수 있는 인터랙션과 애니메이션 - 페이지에 스크롤 동작 추가 - 이미지 카드 사이의 스와이프 전환 구현 - 사용자의 상호작용에 따른 버튼 상태 변화 설정 - 객체 간 전환 애니메이션 적용 - 스프링(spring) - ease in - ease out - 선형(linear) 전환 - 별도의 코딩 없이 모바일 앱에 가까운 동작과 화면 전환 표현 ## 코딩 없이 사용하는 시각적 프로토타이핑 - Principle은 인터페이스 디자이너에게 익숙한 시각적 UI를 제공한다. - 디자인과 엔지니어링 작업을 오가는 대신, 디자이너가 시각적·창의적 사고에 집중할 수 있도록 설계되었다. - 초보자도 비교적 쉽게 사용할 수 있으며, 복잡한 프로토타입을 만들면서도 코드를 배울 필요가 없다. - 단순한 사용성과 강력한 애니메이션 기능의 균형이 Principle의 장점으로 소개된다. ## Figma 수정 사항의 동기화 - 이미 Principle로 가져온 디자인을 Figma에서 수정해도 두 도구 사이의 동기화가 가능하다. - Principle은 Figma의 변경 사항을 자동으로 인식하고 기존 작업에 병합한다. - 예를 들어 Figma에서 버튼 크기를 변경하면 Principle에서도 버튼 크기가 자동으로 조정된다. - 이때 Principle에서 설정한 기존 애니메이션은 유지된다. - 따라서 디자인 수정 때마다 프로토타입의 인터랙션을 처음부터 다시 설정할 필요가 없다. ## 개발자를 위한 Figma API 활용 - Principle 제작자는 Figma의 API 문서와 도구를 활용해 연동 기능을 개발했다. - Figma의 API Explorer에서는 특정 Figma 파일 ID를 입력해 API 호출 결과를 확인할 수 있다. - 개발자는 API의 기본 구성 요소와 파일 데이터 구조를 직접 테스트하며 연동 방식을 이해할 수 있다. - 이는 디자인 도구를 외부 서비스와 연결하려는 개발자에게 실용적인 검증 환경을 제공한다. ## 활용과 의의 - Figma는 화면 설계에, Principle은 모션과 인터랙션 구현에 특화된 역할을 맡는다. - 두 도구를 함께 사용하면 디자인 단계에서 사용자 경험을 더 현실적으로 검증할 수 있다. - 디자이너는 개발에 넘기기 전에 전환 효과와 인터랙션의 완성도를 확인할 수 있다. - 통합 기능은 Figma 사용자들의 지속적인 요청에 대한 대응으로 제공되었다. 실무에서는 Figma에서 레이아웃과 시각 디자인을 관리하고, Principle에서 핵심 사용자 흐름과 애니메이션을 빠르게 검증하는 방식이 효과적이다. 특히 디자인 변경 후에도 애니메이션이 유지되므로, 반복적인 프로토타입 수정 작업을 줄일 수 있다.

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

Figma사용자 경험프로토타이핑motion-design+2

figma·2018년 10월 10일·2분 읽기큐레이션 요약

스마트 셀렉션 소개

Figma의 Smart Selection은 여러 객체의 간격, 위치, 크기를 한 번에 조정해 반복적인 디자인 작업을 줄이는 기능이다. 세 개 이상의 객체가 일정한 간격으로 선택되면 캔버스 위에서 직접 조작할 수 있으며, Tidy Up을 사용하면 흐트러진 객체도 균일하게 정렬된다. 이를 통해 디자이너는 수작업보다 탐색과 창의적인 결정에 더 집중할 수 있다. ## 반복적인 디자인 작업의 자동화 - 리스트나 아이콘 그룹의 간격을 바꾸려면 기존에는 각 객체를 개별적으로 이동하고 크기를 조정해야 했다. - 예를 들어 리스트 항목의 높이를 변경할 때 여러 번의 크기 조정과 이동 작업이 필요했다. - Smart Selection은 컴퓨터의 반복·재사용 능력을 디자인 작업에 적용해 이런 “잡일”을 줄이는 것을 목표로 한다. ## 캔버스에서 작동하는 Smart Selection - 세 개 이상의 객체 또는 그룹을 선택하고, 객체 사이의 간격이 일정하면 자동으로 활성화된다. - 별도의 도구나 새로운 객체 유형을 배울 필요 없이 기존 캔버스 조작 방식 안에서 사용할 수 있다. - 선택한 객체 전체의 다음 속성을 한 번에 조정할 수 있다. - 객체 사이의 간격 - 객체의 위치와 배열 - 선택한 객체의 크기 ## 핸들을 이용한 직접 조작 - 객체 사이에 표시되는 분홍색 핸들을 드래그하면 전체 객체의 간격을 동시에 조정할 수 있다. - 분홍색 링을 드래그하면 객체의 순서와 배치를 빠르게 재배열할 수 있다. - 하나 이상의 객체에 있는 분홍색 링을 클릭하면 해당 객체를 대상으로 지정할 수 있다. - 지정한 객체의 가장자리를 드래그하면 여러 객체의 크기를 함께 변경할 수 있다. ## Tidy Up으로 균일하게 정렬하기 - Tidy Up은 정렬되지 않은 객체들을 서로 가깝게 배치하면서 간격을 동일하게 맞춰준다. - 기존의 단순한 “분배” 기능보다 객체 간 간격을 항상 균일하게 유지하는 점이 특징이다. - 표, 툴바, 화면 플로우처럼 여러 요소를 일정한 간격으로 배치해야 하는 작업에 유용하다. - 예를 들어 20개의 화면을 직접 정렬하면 19개의 간격을 일일이 확인해야 하지만, Tidy Up을 사용하면 한 번의 실행으로 정리할 수 있다. - 단축키: - macOS: `⌥⌘T` - 기타 플랫폼: `Ctrl+Alt+T` ## 향후 확장 - Figma는 Smart Selection에 2차원 그리드 지원을 추가할 계획이라고 밝혔다. - 사용자의 실제 활용 사례와 피드백을 바탕으로 기능을 발전시키려 했다. Smart Selection은 여러 객체를 반복적으로 맞추고 이동해야 하는 디자인 작업에서 특히 효과적이다. 먼저 객체를 대략 배치한 뒤 Tidy Up으로 간격을 정리하고, Smart Selection 핸들로 세부 조정을 진행하면 작업 시간을 줄일 수 있다.

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

Figma사용자 인터페이스design-toolsinteraction-design+2

figma·2018년 10월 9일·3분 읽기큐레이션 요약

Figma의 새로운 핑거

Figma는 키보드 단축키를 익히는 일이 마우스 조작보다 어렵지만, 숙련되면 손의 운동기억을 통해 작업 속도와 몰입을 크게 높일 수 있다고 설명합니다. Douglas Engelbart의 마우스·키셋 시연에서 영감을 받아, 사용자의 작업 흐름에 맞는 단축키를 쉽게 발견하고 연습하도록 새로운 키보드 단축키 패널을 도입했습니다. 이 패널은 작업 유형별 단축키를 보여주고, 사용자가 누른 단축키를 강조해 학습을 돕습니다. ## 엥겔바트의 시연과 양손 입력 - 1968년 Douglas Engelbart는 문서 작성, 그래픽 추가, 문서 간 링크, 원격 협업과 채팅을 한 자리에서 보여주는 획기적인 컴퓨터 시연을 진행했습니다. - 오른손에는 마우스, 왼손에는 키셋을 사용했습니다. - 마우스로 단어를 가리키는 동시에 왼손으로 `DW(Delete Word)`를 입력해 단어를 삭제하는 방식이 핵심 장면으로 소개됩니다. - 마우스가 “무엇을 선택할지” 지정한다면, 키셋은 “선택한 대상에 무엇을 할지” 명령하는 역할을 했습니다. - 반복적인 손동작이 운동기억에 저장되면 피아노 연주나 춤처럼 의식적으로 동작을 계산하지 않고도 작업할 수 있습니다. ## Figma 작업과 키보드 단축키 - 숙련된 Figma 사용자는 캔버스를 이동하고, 객체 스타일을 바꾸고, 디자인을 생성하는 과정을 손을 보지 않고 빠르게 수행합니다. - 이는 Engelbart의 방식처럼 한 손은 마우스에, 다른 손은 키보드에 두는 입력 방식과 유사합니다. - 마우스는 초보자도 쉽게 익힐 수 있지만, 키보드 단축키는 탐색과 반복 연습을 통해 운동기억에 정착시켜야 합니다. - 단축키가 익숙해지면 도구 자체보다 해결하려는 디자인 문제에 집중하는 ‘몰입 상태’에 가까워질 수 있습니다. ## 기존 단축키 패널의 문제 - 기존 패널은 정보를 한눈에 파악하기 어려웠습니다. - 화면 전체를 차지해 단축키를 실제로 사용하면서 학습하기도 불편했습니다. - 단축키가 어떤 작업과 연관되는지 쉽게 탐색하기 어려웠습니다. ## 작업 중심의 새로운 단축키 패널 - 새 패널은 캔버스 아래쪽에 표시되어 작업 화면을 과도하게 가리지 않습니다. - 화면 오른쪽 아래의 물음표 메뉴에서 **Keyboard Shortcuts**를 선택하거나 `Ctrl+Shift+?`로 열 수 있습니다. - 작업 유형별 카테고리를 제공해 현재 작업에 필요한 단축키를 바로 찾아볼 수 있습니다. - 벡터 작업: 도형 편집, 구부리기 등 - 타이포그래피 작업: 글꼴 관련 단축키 - 양손 사용이 필요한 유용한 조합을 별도 탭에서 소개합니다. - 예: `Alt`를 누른 채 마우스를 움직이면 객체 간 거리나 크기를 쉽게 측정할 수 있습니다. - 초보자를 위한 기본 단축키 탭도 제공합니다. - 예: `⌘+\`를 사용하면 화면의 부가 UI를 숨기고 작업에 집중할 수 있습니다. - 작성자는 `Shift+2`가 선택 항목을 화면에 맞게 보여주는 기능을 제공한다는 점도 새롭게 발견했다고 설명합니다. ## 사용 행동을 반영하는 학습 방식 - 패널은 사용자가 실제로 누른 단축키를 감지하고 해당 항목을 강조합니다. - 사용자가 어떤 단축키를 사용했는지 기억해 이후 학습에 활용할 수 있도록 설계되었습니다. - 단축키 목록을 단순히 읽는 대신, 자신의 작업 패턴을 돌아보고 사용하지 않던 관련 단축키를 발견하도록 돕는 것이 목적입니다. Figma의 접근 방식은 단축키를 별도의 암기 과제가 아니라 실제 작업 흐름 속에서 익히도록 만드는 데 초점이 있습니다. 자주 수행하는 작업의 카테고리부터 선택해 단축키를 반복 사용하고, 마우스와 키보드의 조합을 운동기억으로 정착시키는 것이 가장 실용적인 활용법입니다.

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

Figmauser-interface-designkeyboard-shortcutsinput-devices+2

figma·2018년 10월 2일·2분 읽기큐레이션 요약

API 챌린지 과정에서의

Figma는 Sketch 내보내기 API 챌린지가 디자이너에게 무보수 작업을 요구하는 ‘스펙 워크’로 받아들여질 수 있음을 인정하고 사과했다. 개방적인 디자인 생태계를 만들고자 했던 취지는 타당했지만, 창작 노동의 가치를 충분히 고려하지 못한 것이 문제였다. Figma는 챌린지를 중단하고 대안을 검토했으며, 2018년 11월에는 해당 챌린지를 어떤 형태로도 진행하지 않기로 결정했다. ## API 챌린지의 목적 - Figma는 **Figma 파일을 Sketch 형식으로 내보내는 기능**을 만들기 위한 API 챌린지를 시작했다. - 목표는 다음과 같았다. - Figma를 중심으로 한 개방적인 디자인 도구 생태계 조성 - Figma 데이터를 외부로 가져갈 수 있는 다양한 방법 지원 - 관련 기능이나 도구 개발에 필요한 자금 지원 - 회사는 기술 생태계를 확장하려는 의도에서 이 프로그램을 기획했다. ## ‘스펙 워크’로 비친 문제 - 디자이너 커뮤니티는 챌린지가 실제 결과물을 요구하면서도 참가자가 보상을 받지 못할 수 있다는 점을 지적했다. - 이러한 구조는 기업이 업무에 활용할 수 있는 창작물을 여러 참가자에게 무상으로 제작하게 하는 **스펙 워크(spec work)**로 해석될 수 있었다. - Figma는 창작자가 정당한 대가를 받아야 한다고 믿어왔지만, 개방형 생태계에 대한 열정 때문에 이 원칙을 이번 기획에 충분히 적용하지 못했다고 인정했다. - 특히 숙련된 창작 노동자가 착취되어 온 업계의 역사와 커뮤니티의 우려를 간과한 점이 핵심적인 실수였다. ## Figma의 대응과 사과 - Figma는 커뮤니티의 비판을 접한 뒤 해당 챌린지를 즉시 중단했다. - 기존 방식으로는 진행하지 않고, 참가자에게 무보수 작업을 요구하지 않는 새로운 구조를 검토하겠다고 밝혔다. - 당시에는 1~2주 안에 챌린지를 재설계해 다시 시작할 가능성을 언급했다. - 커뮤니티의 건설적인 피드백에 감사를 표하고, 디자인 생태계를 더 개방적이고 공정하게 만들겠다고 약속했다. ## 최종 결정 - 2018년 11월 19일 업데이트에서 Figma는 커뮤니티의 우려를 고려해 **이 챌린지를 어떤 형태로도 당분간 진행하지 않기로 결정**했다. - 따라서 단순히 운영 방식을 수정하는 수준을 넘어, 해당 프로젝트 자체를 보류하는 결론에 도달했다. ## 실용적인 시사점 - 오픈 생태계나 커뮤니티 프로그램을 설계할 때도 참여자의 노동이 기업 가치로 전환되는지 먼저 검토해야 한다. - 결과물을 요구하는 공모전이나 API 챌린지는 보상, 사용권, 선정 기준을 명확히 제시해야 한다. - 좋은 기술적 목표라도 창작자의 권리와 보상 구조를 고려하지 않으면 커뮤니티의 신뢰를 잃을 수 있다.

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

FigmaAPIdesign-toolssketch+2

figma·2018년 9월 26일·3분 읽기큐레이션 요약

멀티플레이어, 현실 세계에서

Figma는 온라인 협업을 넘어 지역 기반의 오프라인 커뮤니티를 구축해 사용자들이 직접 교류하고 배우도록 하겠다고 발표했다. 디자인 시스템 밋업에서 얻은 호응을 바탕으로 20개 이상의 도시에서 Figma Local Communities를 시작했으며, 지역별 Designer Advocate가 커뮤니티 활동을 지원한다. 핵심은 제품 사용법뿐 아니라 디자인 조직 운영, 비평, 채용 등 실무 경험까지 공유하는 지속적인 네트워크를 만드는 것이다. ## 오프라인 밋업에서 확인한 커뮤니티 수요 - Figma는 4개 대륙, 8개 도시에서 Design System Meetup을 개최했다. - 참가자들은 단순한 기능 팁을 넘어 다음과 같은 주제를 논의했다. - 효과적인 디자인 크리틱 운영 방식 - 오픈 디자인 문화의 장단점 - 디자인 조직 간 협업과 파트너십 - 이러한 만남을 통해 사용자들이 온라인 협업뿐 아니라 직접 만나 경험과 문제를 공유하려는 수요가 크다는 점을 확인했다. ## Figma Local Communities 출범 - Figma는 전 세계 20개 이상의 도시에서 지역 커뮤니티를 시작했다. - 초기 대상 도시에는 아크라, 암스테르담, 베를린, 보스턴, 코펜하겐, 라고스, 런던, 뉴욕, 샌프란시스코, 시애틀, 텔아비브 등이 포함됐다. - 도시 선정에는 다음 요소를 함께 고려했다. - 이미 Figma 관련 밋업을 주도하는 지역 활동가의 존재 - 해당 지역의 Figma 사용자 집중도 - 다양한 지역과 국가를 아우르는 지리적 분포 - 커뮤니티는 Figma 사용법과 워크플로뿐 아니라 디자이너들이 실제로 겪는 성공과 어려움까지 공유하는 지원 공간을 목표로 한다. ## 지역 커뮤니티의 운영 방식 - 사용자는 다음 활동에 참여하거나 직접 제안할 수 있다. - 자신의 도시에 Figma 그룹 개설 - 지역 커뮤니티에서 다루고 싶은 주제 제안 - 워크숍, 밋업, 네트워킹 등 구체적인 행사 기획 - Figma는 각 지역의 요구를 본사가 일방적으로 정하기보다, 현지 사용자들이 무엇이 필요한지 직접 결정하도록 하려 한다. - 예시로는 다양한 배경의 디자인 팀을 채용하는 방법에 대한 워크숍, 프리랜서와 조직을 연결하는 스피드 네트워킹 등이 제시됐다. ## 지역별 Designer Advocate 팀 Figma는 커뮤니티의 의견을 수집하고 활동을 지원하기 위해 서로 다른 지역과 시간대에서 활동하는 Designer Advocate를 배치했다. - **Tom Lowry — 북미** - OpenText의 시니어 UX 디자이너 출신 - Figma 입문, 컴포넌트 구조화, 유연한 컴포넌트 설계 관련 교육 콘텐츠 제작 - Figma Material Design 리소스 키트와 디자인 포트폴리오 강의에도 참여 - **Zach Grosser — 유럽** - Square의 커뮤니케이션 디자이너 출신 - 2013년부터 Square 디자인 팀에 Figma를 도입한 초기 사용자 - 제품 기능 테스트와 디자인 교육에 적극적으로 참여 - 암스테르담으로 이주한 뒤 Figma에 합류 - **Namnso Ukpanah — 아프리카** - 라고스에서 Figma 디자인 시스템 밋업을 제안하고 300명 이상의 참가자를 이끌었다. - 11개 도시, 7개 국가에서 21명의 Figma 앰배서더를 온보딩했다. - 지역 디자이너와 개발자를 연결하는 현장 중심의 역할을 맡는다. ## 사용자 참여를 중심으로 한 확장 전략 - Designer Advocate는 지역 커뮤니티의 “현장 담당자” 역할을 하지만, 활동의 방향은 사용자 피드백에 따라 정해진다. - Figma는 각 도시의 구성원이 지역 상황에 맞는 행사와 주제를 제안하기를 기대한다. - 따라서 커뮤니티는 Figma가 일방적으로 제공하는 교육 채널이라기보다, 사용자들이 직접 운영하고 Figma가 지원하는 공동체에 가깝다. 실용적으로는 Figma를 배우는 데 그치지 않고, 지역 커뮤니티에 참여해 디자인 리뷰, 채용, 조직 운영 같은 실무 주제를 교류하는 것이 가장 큰 가치다. 거주 지역에 커뮤니티가 없다면 직접 그룹이나 행사를 제안하는 방식으로 네트워크를 확장할 수 있다.

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

Figma디자인 시스템사용자 경험material-design+1

figma·2018년 9월 20일·3분 읽기큐레이션 요약

월풀을 담당하는 에이전

Aisle Rocket Studios(ARS)는 여러 사무실과 원격 인력으로 구성된 환경에서 분산된 디자인 파일과 협업 단절 문제를 Figma로 해결했다. Whirlpool 계정 팀은 Figma를 단일 작업 공간이자 협업의 기준점으로 삼아 기획·카피·디자인·개발·고객 검토를 브라우저 안에서 진행했고, 결과적으로 더 빠르고 창의적인 프로세스를 구축했다. 이 방식은 이후 ARS 전체의 표준 협업 방식으로 확산됐다. ## 분산된 팀의 파일 관리 문제 - ARS는 Whirlpool, Maytag, Sears 등 25개 이상의 브랜드를 담당하며 4개 사무실과 원격 인력으로 운영됐다. - Whirlpool 프로젝트에 긴급 투입된 크리에이티브 디렉터 Matt Carson은 Sketch, Photoshop 등 서로 다른 형식의 파일을 전달받았다. - 파일이 여러 도구와 장소에 흩어져 있어 중앙화된 작업 방식이나 일관된 프로세스가 없었다. - ARS는 디자이너와 개발자를 분리된 역할이 아니라, 서로 다른 기술을 가진 하나의 크리에이티브 팀으로 보려 했다. ## Figma를 단일 협업 공간으로 도입 - Whirlpool 계정 팀은 Figma를 새로운 ‘단일 정보 출처(source of truth)’로 정하고 기존 작업 도구와 워크플로를 빠르게 통합했다. - 실시간 멀티플레이어 기능을 이용해 서로 다른 시간대와 지역의 구성원이 같은 파일에서 동시에 작업했다. - 팀 내부 회의, 아이디어 구상, 피드백 수집, 프로토타입 공유까지 하나의 파일 안에서 진행했다. - 고객도 별도 로그인이나 개발 작업 없이 작동이 시뮬레이션된 디지털 콘셉트를 확인하고 공유할 수 있었다. - 에이전시와 고객이 실시간으로 수정 사항을 확인하면서 검토와 승인 과정이 짧아졌다. ## 협업이 창의성을 높이는 방식 - 작가, 디자이너, 개발자가 서로 다른 프로그램과 공간에서 작업하지 않고 동일한 환경에서 의견을 주고받게 됐다. - 아이디어를 함께 브레인스토밍하고 즉시 수정할 수 있어 반복 작업의 속도와 창의성이 향상됐다. - Figma는 단순한 디자인 제작 도구가 아니라 기획부터 검토까지 연결하는 협업 플랫폼으로 활용됐다. - ARS는 크리에이티브 프로세스의 80%를 브라우저에서 수행한다는 원칙을 실현할 수 있었다. ## 카피라이터와 개발자를 포함한 포용적 디자인 - 카피라이터는 완성된 디자인에 문구를 나중에 삽입하는 대신, 초기 디자인 단계부터 직접 카피를 수정하고 논의했다. - 카피가 디자인의 부수적인 요소가 아니라 독립적인 디자인 요소로 다뤄졌다. - 개발자는 정적인 디자인 파일을 전달받은 뒤 뒤늦게 문제를 발견하는 대신, 초기 단계부터 파일을 열람할 수 있었다. - 개발 가능성을 초기에 검토할 수 있어 디자인과 코드 사이의 반복적인 수정과 커뮤니케이션이 줄었다. - 역할별 참여 장벽이 낮아지면서 디자인 프로세스가 더 민주적이고 포괄적으로 바뀌었다. ## 소규모 팀에서 전사 표준으로 확산 - Whirlpool 팀은 도구를 통합하고 복잡한 업무 흐름과 파일을 중앙화하면서 더 빠르고 효율적으로 일했다. - 고객 측에서도 협업으로 시간과 비용을 절감하면서 창의성을 유지할 수 있었다. - 성과를 본 다른 ARS 구성원들이 이 방식을 도입하기 시작했고, Figma는 조직 전체의 표준으로 자리 잡았다. - ARS는 개방적인 협업 디자인을 기본 방식으로 삼고 전 디자인팀의 Figma 전환을 추진했다. ## 디자인 시스템으로의 확장 - Whirlpool 팀은 디지털 브랜드 전반의 일관성을 높이기 위해 디자인 시스템 구축을 다음 과제로 삼았다. - 원자적 디자인(Atomic Design) 원칙에 따라 기본 구성 요소를 Figma에서 규격화할 계획이다. - 완성된 요소는 팀 라이브러리에 저장해 브랜드 디자인의 단일 기준으로 활용하려 했다. - 이를 통해 프로젝트마다 디자인 요소를 새로 만들지 않고 재사용성과 일관성을 높일 수 있다. 분산된 팀이라면 파일 형식과 도구를 먼저 통합하고, 기획자·카피라이터·디자이너·개발자가 초기 단계부터 같은 작업 공간에서 협업하도록 구성하는 것이 효과적이다. 이후 반복적으로 사용하는 UI 요소를 디자인 시스템과 공유 라이브러리로 관리하면 협업 속도와 결과물의 일관성을 함께 높일 수 있다.

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

Figma디자인 시스템프로토타이핑sketch+3

figma·2018년 9월 19일·2분 읽기큐레이션 요약

피그마 기능 하이라이트

Figma의 컴포넌트 오버라이드는 디자인 시스템의 일관성을 유지하면서도 각 인스턴스를 상황에 맞게 수정할 수 있게 해준다. 인스턴스를 분리하지 않고 색상, 텍스트, 스타일 등을 변경할 수 있으며, 원본 컴포넌트가 업데이트되면 수정되지 않은 속성은 계속 상속된다. 따라서 반복되는 UI를 효율적으로 관리하면서도 다양한 상태와 콘텐츠를 표현할 수 있다. ## 디자인 시스템에서 유연성과 일관성의 균형 - 리스트, 아바타, 상태 표시줄처럼 여러 곳에서 반복되는 기본 컴포넌트는 일관된 디자인을 유지해야 한다. - 동시에 리스트의 텍스트, 상태 표시줄의 색상처럼 사용 맥락에 따라 달라지는 부분도 필요하다. - 모든 변형을 처음부터 새로 만들면 작업량이 늘고 디자인 시스템과의 연결도 끊어진다. - 오버라이드는 원본 컴포넌트의 구조는 유지하면서 인스턴스별 차이만 적용하는 방식이다. ## 컴포넌트 오버라이드의 작동 방식 - 인스턴스를 원본 컴포넌트에서 분리하지 않고 속성을 재정의할 수 있다. - 원본 컴포넌트를 수정하면 각 인스턴스는 오버라이드되지 않은 변경 사항을 계속 상속한다. - 인스턴스별로 변경 가능한 속성에는 다음이 포함된다. - 색상과 채우기 - 텍스트와 텍스트 정렬 - 글꼴 및 스타일 - 선의 추가, 삭제, 수정 - 불투명도와 블렌드 모드 - 그림자와 블러 같은 효과 - 요소의 표시·숨김 상태 ## 실제 활용 사례 - **정보 목록 만들기** - 하나의 셀 컴포넌트를 만든 뒤 각 인스턴스의 텍스트를 오버라이드한다. - 할 일 목록이나 대시보드 테이블처럼 서로 다른 데이터를 일관된 형태로 표현할 수 있다. - **버튼 상태 표현하기** - 하나의 버튼 컴포넌트를 기반으로 기본, 호버, 클릭, 비활성 상태를 만든다. - 배경색, 텍스트 불투명도, 그림자 등을 상태별로 변경할 수 있다. - **주소록 아바타 구성하기** - 원형 컴포넌트의 채우기를 각 인물의 사진으로 교체한다. - 아바타의 공통 형태는 유지하면서 이미지 콘텐츠만 다르게 적용할 수 있다. ## 오버라이드를 활용한 케일리도스코프 - 하나의 일러스트를 프레임에 그리고 컴포넌트로 변환한다. - 인스턴스를 복제해 오른쪽에 배치한 뒤 수평 반전한다. - 다시 복제해 아래쪽에 배치하고 수직 반전한다. - 남은 공간에 인스턴스를 하나 더 배치해 2×2 형태를 만든다. - 왼쪽 위의 원본 컴포넌트 안에서 그림을 수정하면 연결된 인스턴스들이 함께 바뀌며 대칭 패턴이 만들어진다. 컴포넌트 오버라이드는 공통 구조와 스타일은 원본에 맡기고, 콘텐츠와 상태처럼 달라져야 하는 부분만 인스턴스에서 수정하는 데 적합하다. 반복 UI를 컴포넌트로 만든 뒤 필요한 속성만 오버라이드하면, 유지보수성과 디자인의 다양성을 함께 확보할 수 있다.

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

Figma디자인 시스템프로토타이핑사용자 인터페이스+1

figma·2018년 9월 4일·3분 읽기큐레이션 요약

피그마 기능 하이라이트

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로 옮겨야 하는 개인과 팀에게 유용한 마이그레이션 수단이다. 특히 디자인 시스템, 운영체제가 다른 협업 환경, 원격 리뷰가 필요한 프로젝트라면 파일을 가져온 뒤 페이지와 컴포넌트가 제대로 변환되는지 확인하고 적극적으로 활용하는 것이 좋다.

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

Figma디자인 시스템사용자 경험sketch+2

figma·2018년 8월 28일·4분 읽기큐레이션 요약

런던 예술 대학교의 디자인 시스템

UAL은 6개 단과대학의 독립적인 정체성 때문에 디지털 경험이 일관되지 않았지만, 웹사이트 개편 과정에서 협업 도구를 Figma로 전환하며 자연스럽게 디자인 시스템을 구축했다. 실시간 공동 편집과 중앙화된 라이브러리는 디자인·개발·외부 에이전시 간의 소통을 개선했고, 결과적으로 웹사이트를 더 빠르고 일관되게 제작할 수 있게 했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 여러 채널과 대학 조직을 연결하는 공통 언어로 발전했다. ## 조직 구조가 만든 디자인 일관성 문제 - UAL은 2004년 공식 연합체가 되었으며, 현재 6개 대학으로 구성되어 있다. - 각 대학은 오랜 역사와 고유한 브랜드 정체성을 가지고 있어, 웹사이트마다 서로 다른 스타일을 적용하려는 경향이 있었다. - 그 결과 UAL의 디지털 경험은 채널과 대학별로 분리되고 일관성이 부족했다. - 2017년부터 UX 팀은 디지털 트랜스포메이션 프로그램의 일환으로 사용자 중심의 핵심 디지털 경험을 재설계했다. ## Sketch 협업의 한계와 Figma 전환 - 기존 Sketch 기반 작업에서는 여러 사람이 같은 파일에서 원활하게 협업하기 어려웠다. - 14개 캠퍼스에 흩어진 내부 구성원과 외부 에이전시가 함께 일하면서 다음 문제가 발생했다. - 파일 버전 관리 혼란 - 파일 동기화에 소요되는 시간 - 반복적인 커뮤니케이션과 확인 절차 - 디자인 팀과 개발 팀 사이의 단절 - Figma는 브라우저만 있으면 어디서든 접근할 수 있고, 실시간 공동 편집을 지원했다. - Sketch 파일을 간단히 가져올 수 있어 웹사이트 프로젝트 중간에도 도구를 전환할 수 있었다. - 모든 이해관계자가 하나의 중앙 파일을 기준으로 작업하면서 투명성이 높아지고, 디자인과 개발 간 협업이 개선되었다. ## 웹사이트 개편에서 디자인 시스템으로 확장 - 팀은 웹사이트를 처음부터 구축해야 했기 때문에, 반복 작업을 줄이기 위해 디자인 시스템을 우선적으로 만들기로 했다. - Figma의 컴포넌트와 협업 기능 덕분에 디자인 시스템 구축이 별도의 대형 프로젝트가 아니라 웹사이트 제작 과정에서 자연스럽게 진행되었다. - 디자인 시스템은 웹사이트용 컴포넌트뿐 아니라 여러 채널에 동일한 스타일과 기능을 적용하기 위한 기반으로 정의되었다. - 목표는 대학별로 달랐던 컴포넌트를 조화시키고 제작 프로세스를 표준화하는 것이었다. ## 워크숍을 통한 요구사항과 불일치 파악 - UX 팀은 학생과 비즈니스 파트너를 대상으로 워크숍을 진행했다. - 워크숍의 목적은 다음과 같았다. - 디자인 시스템에 필요한 핵심 기능 파악 - 사용 중인 모든 UI 컴포넌트 목록화 - 대학과 채널별 디자인 차이 및 불일치 발견 - 기존 스타일 가이드를 실제 디지털 자산과 재사용 가능한 컴포넌트로 변환했다. ## 유연한 브랜드 시스템 구축 - UAL의 복잡한 브랜드 구조 때문에 디자인 시스템은 하나의 고정된 스타일만 강제할 수 없었다. - 서로 다른 색상, 타이포그래피, 브랜드 개성을 수용할 수 있도록 유연하게 설계했다. - Figma 팀 라이브러리를 활용해 모든 구성원이 기기나 위치에 관계없이 최신 브랜드 가이드와 자산을 사용할 수 있게 했다. - Figma Styles를 사용하면 색상, 텍스트, 효과 스타일을 분리해 관리할 수 있어 브랜드 변형을 더 유연하게 적용할 수 있었다. - 결과적으로 디자인 시스템은 정적인 문서가 아니라 지속적으로 업데이트되는 ‘살아 있는’ 브랜드 가이드가 되었다. ## 컴포넌트 기반의 빠른 개발 - 디자인 시스템의 컴포넌트를 조합해 기본 페이지를 템플릿으로 만들었다. - 개발 팀은 이 템플릿을 활용해 새로운 페이지를 빠르게 생성할 수 있었다. - Figma에서 디자인과 컴포넌트 구조를 함께 확인할 수 있어, 개발자는 디자인이 코드로 어떻게 구현될지 즉시 파악할 수 있었다. - 디자이너와 개발자가 동일한 시스템을 기준으로 작업하면서 구현 속도와 협업 효율이 높아졌다. ## 실용적인 시사점 - 디자인 시스템은 처음부터 별도의 거대한 프로젝트로 계획하지 않아도, 반복되는 문제를 해결하는 과정에서 자연스럽게 시작할 수 있다. - 여러 조직이나 브랜드가 공존하는 환경에서는 일관성만 강제하기보다 공통 기반과 개별 표현의 유연성을 함께 설계해야 한다. - 최신 컴포넌트와 스타일을 중앙 라이브러리로 관리하고 디자인·개발·이해관계자가 함께 사용하면, 제작 속도와 결과물의 일관성을 동시에 높일 수 있다.

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

Figma디자인 시스템사용자 경험웹 개발+2