material-design

7 개의 포스트

figma

디자인 시스템 도입을 가로 (새 탭에서 열림)

디자인 시스템은 대기업만을 위한 복잡한 도구가 아니라, 팀 규모와 관계없이 효율성·일관성·협업을 높이는 실용적인 체계다. 최신 유행이나 Material Design을 그대로 따르기보다 조직의 목표, 브랜드, 사용자에 맞춰 설계해야 한다. 또한 처음부터 모든 것을 직접 만들 필요 없이 공개된 리소스를 활용해 현실적인 범위에서 시작할 수 있다. ## 디자인 시스템은 대기업만을 위한 것이 아니다 - 규모가 작은 팀도 디자인 시스템을 통해 반복 작업을 줄이고 결과물의 일관성을 높일 수 있다. - 디자인 시스템의 형태는 조직마다 다를 수 있지만, 핵심 목적은 공통적이다. - 업무 효율 향상 - 제품 경험의 일관성 확보 - 디자이너와 개발자 간 협업 촉진 - 사례로 소개된 Mixpanel은 디자인 시스템을 개편해 비용을 절감하고, 일관성을 개선하며, 전사적으로 데이터 분석 접근성을 높였다. ## 최신 디자인 기법을 모두 적용해야 한다는 오해 - 디자인 트렌드는 계속 변하며, 모든 조직에 통하는 유일한 정답은 없다. - 다른 팀의 사례와 업계 동향은 참고할 수 있지만 그대로 복제할 필요는 없다. - “완벽하고 최신인 시스템”을 만드는 데 집중하면 실제 해결하려던 문제와 목표를 놓칠 수 있다. - 디자인 시스템은 유행을 보여주는 전시물이 아니라 다음을 지원해야 한다. - 조직의 구체적인 목표 - 실제 사용자 요구 - 팀의 업무 방식 - 지속 가능한 운영 ## Material Design이 모든 조직에 맞는 것은 아니다 - Google의 Material Design은 널리 알려진 표준이지만, 모든 제품에 그대로 적용할 수 있는 만능 해법은 아니다. - 조직의 디자인 시스템은 다음 요소를 반영해야 한다. - 브랜드의 고유한 정체성 - 제품 사용자의 needs - 조직의 비즈니스 목표 - 현재 조직이 처한 상황과 우선순위 - 업계 표준을 참고하되, 조직에 가장 적합한 방식과 균형을 찾아야 한다. - 글에서는 Uber Base, Google Material 3, Spotify Backstage, Pipedrive, Microsoft Teams, Salesforce Lightning 등의 디자인 시스템과 UI 키트를 비교 사례로 제시한다. ## 디자인 시스템을 처음부터 직접 만들어야 한다는 오해 - 글은 디자인 시스템을 반드시 처음부터 자체 제작해야 한다는 생각에 의문을 제기한다. - 공개된 오픈소스 디자인 시스템과 UI 리소스를 활용하면 초기 구축 비용과 시간을 줄일 수 있다. - 이미 검증된 리소스를 기반으로 시작한 뒤, 조직의 브랜드와 제품 요구에 맞게 수정하는 방식이 현실적이다. - 제공된 본문은 이 신화에 대한 설명 중간에서 끝나므로, 이후 네 번째부터 여섯 번째 신화의 전체 내용은 확인할 수 없다. 작게 시작하되 팀의 반복 문제와 실제 사용자 요구를 우선 해결하는 것이 좋다. 기존 오픈소스와 업계 사례는 출발점으로 활용하고, 최종 디자인 시스템은 조직의 브랜드·제품·업무 방식에 맞게 점진적으로 발전시키는 것이 바람직하다.

figma

디자인 시스템의 미래는 복잡 (새 탭에서 열림)

디자인 시스템은 제품과 사용자 요구가 복잡해질수록 단순한 시각 규칙 모음이 아니라, 여러 팀과 시스템을 조율하는 운영 구조가 되어야 한다. 브랜치·머지, 로컬 시스템, 오픈소스 같은 코드의 방식을 활용하면 확장성과 협업을 높일 수 있지만, 지나친 규제는 창의성과 실험을 막는다. 따라서 미래의 디자인 시스템은 구조와 유연성 사이의 균형을 지속적으로 조정해야 한다. ## 디지털 제품의 복잡성과 디자인 시스템의 변화 - 초기 디자인 시스템은 사용자가 디지털 인터페이스를 이해하도록 돕는 시각적 은유에 크게 의존했다. - Google Material Design은 종이를 쌓은 듯한 표면, 가장자리, 그림자를 사용해 조작 가능한 요소를 설명했다. - 당시에는 완전한 스큐어모피즘 없이도 사용자가 인터페이스를 직관적으로 이해하도록 만드는 것이 주요 과제였다. - 그러나 다양한 디바이스와 폼팩터가 등장하면서 단일 은유만으로는 충분하지 않게 됐다. - 접근성 기준 - 새로운 입력 방식과 상호작용 - 성능 요구사항 - 여러 화면과 플랫폼에 대응하는 반응형 경험 - Instagram처럼 하나의 핵심 기능만 제공하던 앱도 검색, 광고, 파트너십, 쇼핑 등으로 확장됐다. - 이에 따라 디자인 시스템은 더 많은 기능과 사용자 유형, 서로 연결된 제품 경험을 지원해야 한다. ## 구조로 혼란 다루기 - 디자인팀은 소프트웨어 개발에서 사용하던 프로세스와 프레임워크를 디자인 시스템에 적용하고 있다. - 대표적인 방식이 브랜치와 머지다. - 기여자가 별도의 브랜치에서 새로운 컴포넌트나 수정안을 작업한다. - 기존의 메인 시스템에 영향을 주지 않고 실험할 수 있다. - 디자인 시스템 관리자가 변경 사항을 검토한 뒤 공식 시스템에 반영한다. - 이 방식은 디자인 시스템을 중앙 팀만 관리하는 자산이 아니라, 커뮤니티와 함께 발전시키는 구조로 만든다. - Spotify의 Encore는 하위 팀이 시스템을 포크해 각자의 “로컬 시스템”을 만들도록 허용했다. - 광고 팀의 비디오 플레이어처럼 특정 도메인에 특화된 컴포넌트가 발전했다. - 이러한 결과물이 다시 전체 디자인 시스템의 방향과 적용 범위를 넓혔다. - 오픈 디자인 시스템은 외부 기여와 피드백을 받을 수 있다는 장점이 있다. - 다양한 사용자의 요구를 파악할 수 있다. - 제품과 조직의 작업 방식을 공개해 신뢰와 인지도를 높인다. - 디자인 지식을 업계와 공유할 수 있다. ## 지나치게 엄격한 시스템의 문제 - 구조를 규모 있게 적용하면 일관성은 높아지지만, 시스템이 지나치게 제한적으로 변할 수 있다. - 디자이너는 다음과 같은 문제를 경험할 수 있다. - 새로운 아이디어를 실험하기 어려움 - 제품 특성에 맞는 예외를 만들기 어려움 - 기존 컴포넌트에 억지로 맞추느라 디자인 품질이 떨어짐 - 디자인 시스템의 목적은 창의적 표현의 진입장벽을 낮추는 것이지, 창작 자체를 어렵게 만드는 것이 아니다. - 모든 상황을 사전에 정의하려는 접근은 복잡한 제품과 예상하지 못한 사용자 요구에 제대로 대응하지 못한다. ## 건축보다 정원에 가까운 운영 - Shopify의 José Torre는 디자인 시스템을 완성 후 고정하는 건축물보다 계속 돌보고 변화하는 정원에 비유한다. - 건축적 접근: - 세부 사항을 미리 결정한다. - 설계와 구축이 끝나면 결과물을 완성된 상태로 간주한다. - 정원식 접근: - 기본적인 씨앗과 구조를 심되, 최종 형태는 성장 과정에서 발견한다. - 실제 사용 중 나타나는 문제와 새로운 요구에 따라 개입한다. - 불필요한 요소는 제거하고 유용한 패턴은 발전시킨다. - 계획된 디자인 시스템 안에서도 새로운 버튼이나 메뉴 변형이 자연스럽게 등장할 수 있다. - 이런 변형을 무조건 제거하기보다, 실제 제품 요구에서 비롯된 것인지 평가하고 필요하다면 시스템에 흡수하는 유연성이 중요하다. 디자인 시스템은 엄격한 규칙집이 아니라 제품과 조직의 변화에 맞춰 계속 진화하는 기반으로 운영하는 것이 바람직하다. 공통 구조와 검토 절차는 유지하되, 브랜치·로컬 시스템·실험 공간을 허용해 팀의 자율성과 창의성을 보장해야 한다.

figma

Figma 커뮤니티 (새 탭에서 열림)

Figma Community는 사용자들이 디자인 시스템, 아이콘, 와이어프레임, 일러스트, 프로토타입 등을 공개하고 서로 탐색·재사용·리믹스할 수 있는 공간이다. 2020년 8월부터 전체 Figma 사용자에게 단계적으로 공개되었으며, 검색과 태그 탐색, 프로필 핸들, 좋아요, 파일 복제 기능을 제공한다. 글은 베타 기간 동안 커뮤니티가 만든 다양한 리소스와 그 제작 배경을 소개하며, Figma Community가 협업과 지식 공유의 기반으로 성장할 가능성을 강조한다. ## Figma Community의 공개와 기능 - 수천 명의 제작자가 베타에 참여해 파일과 프로필을 공개했다. - 사용자는 다음과 같은 자료를 검색하고 탐색할 수 있다. - 디자인 시스템 - 아이콘 팩 - 와이어프레임 - 일러스트레이션 - 애니메이션 프로토타입 - 보드게임 등 실험적인 작업물 - 주요 기능은 검색, 태그 탐색, 프로필 핸들 선점, 좋아요, 파일 복제다. - 초기 공개 단계에서는 모든 사용자가 파일과 프로필을 볼 수 있지만, 파일을 직접 게시하려면 여전히 베타 참여가 필요했다. - Microsoft, Google Material Design, Mixpanel 같은 조직과 개인 디자이너들이 실용적인 리소스를 공개했다. ## Material Design Baseline Kit: 디자인 시스템의 출발점 - Google Material Design 팀의 Jessie Z가 제작한 리소스다. - 디자인 시스템을 처음부터 구축하는 부담을 줄이고, 다양한 프로젝트에서 활용할 수 있도록 설계됐다. - 두 부분으로 구성된다. - **Material Theme**: 타이포그래피와 색상 팔레트를 수정하고, 변경 사항이 컴포넌트·상태·예시 레이아웃에 미치는 영향을 빠르게 확인한다. - **Sticker sheet**: 기존 컴포넌트를 조합하고 활용하는 전통적인 UI 리소스 모음이다. - 사용자는 이 키트를 기반으로 Material 가이드라인을 학습하거나, 제품과 브랜드에 맞는 테마를 시각화할 수 있다. ## Open Figures: 재사용 가능한 일러스트 라이브러리 - Bonnie Kate Wolf가 제작한 일러스트레이션 라이브러리다. - 특정 회사의 브랜드 가이드에 얽매이지 않고 독립적인 스타일을 만들 수 있었던 프로젝트다. - 제품 화면, 프레젠테이션, 개인적인 창작 활동 등 다양한 목적에 사용할 수 있도록 구성됐다. - 모듈형 일러스트를 설계하면서 접근성과 포용성을 고려했다. - 휠체어를 사용하는 캐릭터의 의상 교체가 가능하도록, 드레스나 긴 재킷처럼 다른 요소와 충돌하는 형태를 조정했다. - 단순히 보기 좋은 그림을 제공하는 것을 넘어, 다양한 사용자를 표현할 수 있는 디자인 구조를 보여준다. ## Spotify Ways of Working: 팀 협업 방식의 공유 - Spotify의 Barton Smith, Cliona O’Sullivan과 Figma 워킹 그룹이 제작했다. - Figma에서 팀의 업무를 조직하고 협업하는 방식을 외부 커뮤니티에 공개한 자료다. - Spotify는 회사마다 Figma 파일과 프로젝트를 정리하는 표준 방식이 없고, 이를 어려워하는 팀이 많다는 점에서 출발했다. - 이 파일은 특정 도구 사용법보다 실제 조직이 업무를 구조화한 사례를 보여주는 데 목적이 있다. - Spotify 팀 역시 운영 과정에서 얻은 학습을 바탕으로 기존 결정을 계속 수정하고 있다고 설명한다. ## 커뮤니티가 만드는 공유 생태계 - Figma Community는 완성된 결과물뿐 아니라 제작자의 문제의식과 작업 방식을 공유하는 장으로 기능한다. - 대기업의 디자인 시스템부터 개인 창작자의 일러스트, 팀 운영 문서까지 자료의 범위가 넓다. - 공개된 파일을 복제해 자신의 프로젝트에 맞게 수정할 수 있어 학습과 실무 적용이 동시에 가능하다. - Figma는 초기 출시를 완성된 제품이 아니라 앞으로 확장될 기반으로 설명하며, 사용자들이 무엇을 만들고 어떻게 활용하는지에 따라 발전시킬 계획을 밝혔다. 실무에서는 Material Design Baseline Kit처럼 구조화된 시스템을 출발점으로 삼고, Open Figures처럼 재사용 가능한 시각 자산을 활용하며, Spotify 사례처럼 팀의 파일 관리 규칙을 문서화하는 방식으로 Figma Community를 활용할 수 있다.

figma

디자인 시스템 현황 (새 탭에서 열림)

디자인 시스템은 아직 초기 단계지만, 반응형 디자인처럼 조직의 표준적인 업무 방식으로 자리 잡고 있다. 499명 설문 결과, 전담 팀이나 공개 문서를 갖춘 조직은 많지 않았지만 대부분은 더 성숙한 시스템을 원했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 원칙·가이드·문서·운영 프로세스를 포함하는 지속적인 설계 방식이라는 것이 글의 핵심 결론이다. ## 1. 디자인 시스템은 아직 초기 단계 - 응답자의 약 3분의 2가 디자인 시스템의 초기 단계인 1~2단계에 해당했다. - 1단계: 시스템이 문서화되지 않음 - 2단계: 전담 팀이 없음 - 반면 86%는 전담 인력이 유지·관리하고 외부에도 공개된 3~4단계의 시스템을 원했다. - 브래드 프로스트의 아토믹 디자인과 2014년 구글 머티리얼 디자인 이후 관련 방법론이 확산됐지만, 많은 기업에서는 여전히 정착 과정에 있다. - 디자인 시스템은 일시적인 유행이 아니라 “조직이 일하는 방식”으로 자리 잡을 가능성이 높다고 평가된다. ## 2. 전담 팀이 없어도 시작할 수 있다 - 응답자의 절반은 디자인 시스템을 관리하는 전담 팀이 있는 회사에 근무했다. - 그러나 전담 팀이 반드시 필요하다고 생각한 사람은 약 3분의 1에 불과했다. - 특히 1인 디자이너나 소규모 팀도 시스템의 일부를 먼저 구축할 수 있다. - 전체 시스템을 한 번에 만들기보다 다음과 같이 작은 단위로 시작하는 접근이 권장된다. - 줄 간격(line height) 정의 - 색상과 타이포그래피 표준화 - 반복적으로 사용하는 버튼·입력창 등 컴포넌트 정리 - 중요한 것은 완벽한 시스템을 계획하는 것보다 작게 시작해 실제 제품에 적용하고 개선하는 것이다. ## 3. 디자인 시스템은 제품 이후에 만들어지는 경우가 많다 - 이상적으로는 제품 개발과 디자인 시스템 구축을 동시에 진행할 수 있지만, 실제로 그렇게 한 응답자는 41%였다. - 52%는 이미 존재하는 제품을 바탕으로 디자인 시스템을 만들었다. - 7%는 신규 제품과 기존 제품 모두를 지원하는 방식으로 구축했거나, 여러 회사에서 서로 다른 경험을 가진 경우였다. - 기존 제품에서 출발하면 실제 사용 사례와 문제를 기반으로 컴포넌트를 설계할 수 있다. - 처음부터 추상적인 컴포넌트를 무작정 만드는 것보다, 레거시 화면에서 반복되는 패턴을 찾아 체계화하는 방식이 현실적일 수 있다. ## 4. 컴포넌트 라이브러리와 스타일 가이드가 대표적인 산출물이다 - 디자인 시스템에 포함된 요소로 가장 많이 언급된 것은 다음과 같다. - 컴포넌트 라이브러리: 90% - 스타일 가이드: 83% - 디자인 원칙: 57% - 콘텐츠 가이드라인: 47% - 일부 응답자는 다음과 같은 코드 기반 요소도 디자인 시스템에 포함한다고 답했다. - React 컴포넌트 - 믹스인 라이브러리 - 디자인 토큰 저장소 - iOS·Android 개발 리소스 - 코드 관련 응답이 별도 선택지 없이 자유 응답으로 제시됐다는 점은 디자인 시스템의 범위가 시각 디자인을 넘어 개발 구현까지 확장되고 있음을 보여준다. - 당시 설문은 이러한 다양성을 충분히 측정하지 못했으며, 향후에는 더 폭넓은 항목이 필요하다고 지적한다. ## 5. 산출물만으로는 디자인 시스템이 될 수 없다 - 가장 큰 오해는 디자인 시스템을 정적인 패턴 라이브러리나 컴포넌트 모음으로만 보는 것이다. - 디자인 시스템은 다음을 포함하는 지속적인 프로세스에 가깝다. - 디자인 원칙 - 사용 지침 - 의사결정 기준 - 조직의 디자인 철학 - 산출물의 유지·개선 방식 - 컴포넌트 라이브러리와 스타일 가이드는 시스템의 결과물이자 살아 있는 산출물일 뿐, 시스템 전체와 동일하지 않다. - 문서화가 중요한 이유는 구성원들이 단순히 컴포넌트를 복사하는 데 그치지 않고, 언제·왜·어떻게 사용해야 하는지 이해해야 하기 때문이다. - 아무리 훌륭한 컴포넌트라도 올바른 문서와 사용 맥락이 없으면 실제 조직에서 제대로 활용되기 어렵다. 작은 반복 문제부터 실제 제품에 적용해 디자인 시스템을 시작하고, 컴포넌트뿐 아니라 원칙과 사용 지침까지 함께 문서화하는 것이 현실적인 접근이다. 전담 팀이 없더라도 점진적으로 운영 체계를 만들며 확장할 수 있다.

figma

멀티플레이어, 현실 세계에서 (새 탭에서 열림)

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은 일관된 UI 경험을 제공하지만, 모든 제품이 비슷해져 브랜드 개성이 약해질 수 있다. 글은 Figma Styles와 Components를 결합하면 Material Design의 규칙은 유지하면서 색상·타이포그래피·그림자·그리드·컴포넌트 형태를 브랜드에 맞게 전역적으로 테마화할 수 있다고 설명한다. 이를 통해 대규모 UI 키트도 효율적으로 관리하고 팀 전체에서 재사용할 수 있다. ## 플랫폼 디자인 시스템의 한계 - 디자인 시스템은 일반적으로 제품 내 일관성을 위해 컴포넌트, 패턴, 가이드라인을 통제한다. - Material Design은 Google 및 Android 생태계 전반에 사용성을 높이고 일관된 경험을 제공했다. - 그러나 동일한 컴포넌트를 여러 브랜드가 사용하면 제품이 비슷해지고, 브랜드만의 독특한 인상을 전달하기 어려워진다. - Material Design의 다음 단계는 기본 시스템을 유지하면서 브랜드별 테마와 시각적 개성을 허용하는 방향이다. ## Figma Styles를 활용한 Material 테마 - Figma Styles는 전역 텍스트, 색상 채우기, 선, 효과, 그리드 스타일을 정의한다. - 스타일을 수정하면 해당 스타일을 사용하는 문서 전체에 변경 사항이 즉시 반영된다. - 스타일은 팀 라이브러리에 게시해 여러 프로젝트에서 동일하게 사용할 수 있다. - 따라서 수백 개의 컴포넌트를 개별적으로 수정하지 않고도 UI 키트 전체의 테마를 바꿀 수 있다. ## 색상과 타이포그래피의 전역 관리 - 주요 색상과 보조 색상, 텍스트의 강조 수준, 표면 색상을 Figma Fill Style로 정의했다. - 브랜드 색상을 적용하려면 스타일의 색상만 변경하면 되며, 여러 컴포넌트에 동시에 반영된다. - Material Design의 기본 색상 팔레트도 별도 페이지에서 참고할 수 있도록 구성했다. - Material의 텍스트 스타일을 기준으로 Text Style을 만들고, 기본 글꼴은 Roboto로 설정했다. - 브랜드 서체로 변경하면 시스템 전체의 텍스트가 함께 변경된다. - 다만 글꼴에 따라 글자 크기와 자간·행간을 추가로 조정해야 하며, 서체별 권장 크기를 별도로 마련할 필요가 있다. ## Elevation과 Grid 스타일 - Material Design의 각 elevation 단계에 맞춰 미리 정의된 Drop Shadow 스타일을 제공한다. - Material 그림자는 최대 세 개의 그림자를 조합하는 경우도 있지만, 스타일을 선택하는 것만으로 적용할 수 있다. - 4dp 기준선 그리드를 Figma Grid Style로 정의해 프레임이나 컴포넌트에 적용할 수 있다. - 데스크톱, 모바일, 태블릿 등 플랫폼별 그리드를 추가로 만들어 상황에 맞게 사용할 수도 있다. ## Styles와 Components의 결합 - Material Design은 브랜드 개성을 표현하기 위해 버튼, 카드 등 UI 표면의 모서리 형태를 조정할 수 있도록 한다. - 기본 도형 컴포넌트를 만든 뒤, 이를 버튼·Floating Action Button·카드 같은 상위 컴포넌트 안에 중첩했다. - 중첩 컴포넌트의 가시성을 전환하면 직각 모서리, 절삭 모서리, 다양한 둥근 모서리 스타일을 시스템 전체에 적용할 수 있다. - 변경 사항은 수백 개의 컴포넌트에 전파되며, 경우에 따라 반영까지 몇 초가 걸릴 수 있다. - 개별 인스턴스에서는 중첩 레이어를 직접 조정해 특정 화면에만 적용되는 Override도 만들 수 있다. ## 아이콘 라이브러리와 팀 공유 - Material Design에서 제공하는 다섯 가지 아이콘 스타일을 각각 별도의 Sticker Sheet 문서로 구성했다. - 각 문서에는 아이콘별 컴포넌트가 포함되어 있어 필요한 아이콘만 복사해 사용할 수 있다. - 아이콘 문서를 팀 공유 라이브러리로 게시하면 여러 프로젝트에서 일관된 아이콘을 불러올 수 있다. - 별도 문서로 분리해 전체 UI 키트의 용량을 줄이는 효과도 얻을 수 있다. ## 실용적인 적용 방향 Figma Styles에는 색상, 글꼴, 그림자, 그리드처럼 반복적으로 사용되는 디자인 토큰을 맡기고, Components에는 버튼·카드·아이콘처럼 구조와 동작이 있는 UI 요소를 맡기는 방식이 효과적이다. 이렇게 구성하면 Material Design의 일관성과 사용성을 유지하면서도 브랜드별 테마를 빠르게 적용하고, 팀 전체의 디자인 시스템을 효율적으로 관리할 수 있다.

figma

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

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