본문 바로가기

분류 전체보기38

figma에 의한 디자인 시스템 구축 사례 및 개념 정의 YouTube 연정's figma에 연재 중인 Figma 강좌의 다음 주제가 디자인 시스템 구축을 위한 스타일링과 컴포넌트 구축이기 때문에 figma에 의한 디자인 시스템 구축 사례와 디자인 시스템과 관련된 개념을 정리해 보았습니다. 디자인 시스템이라는 단어 정의가 어디서부터 누구로부터 시작되었는지는 모르나, 스마트폰이 세상 밖으로 나온 뒤의 구글(Google) 머터리얼 디자인 가이드가 디자인 시스템의 첫 인상이었고, 그 머터리얼 가이드는 2019년부터 저에겐 Web, Mobile에 대한 UI/UX 표준 가이드가 되었습니다. figma에 의한 디자인 시스템 구축 사례 1) Design Systems for Figma 피그마로 제작된 디자인 시스템을 모아놓은 웹 서비스 44개 이상의 디자인 시스템이 등록됨.. 2020. 8. 23.
#2 피그마로 아이콘 제작 Tip (feat. Shape Booleans 기능) figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다. Shape 툴과 Pen 툴을 사용하여 머터리얼 아이콘을 제작해봅니다. [피그마 기초 Part2 - 영상 목차] 00:00 Intro 00:09 1/6 Material Design - System Icon 개요 01:16 2/6 Layout Grid & Keyline 제작 [🔗연관 figma file] 06:18 3/6 도형 툴 {Shapes, Booleans} 08:54 4/6 아이콘 Export & Import {SVG} 10:33 5/6 펜 툴 {Pen, Outline Stroke} 12:14 6/6 기타 유용한 사용 Tip {좌우 상하 반전} 아이콘 제작 시 유의사항 1 - Constraints frame 안쪽 객체의 "Constraint.. 2020. 8. 23.
#1 피그마 기초 강좌 {연정's Figma} #UI 무료 편집 도구 #초보자용 figma를 처음 접하는 분들을 위한 기초 강좌 영상입니다. #이미지 import export #컬러 #텍스트 #그림자 효과 Sketch에서 Figma로 전환하게 된 계기 Figma Figma는 클라우드 기반 UI 편집 도구이자 협업 도구입니다. 디자이너뿐만 아니라 비 디자이너 직군에서도 협업 도구로서 다양한 용도로 사용 가능합니다. Figma의 용도 UI/UX 디자인 Wireframe, 화�� designer-story.tistory.com Figma 툴에 대해 궁금하시면 위 링크 또는 Figma 빠르게 훑어보기 유튜브 영상을 통해 좀 더 자세히 아실 수 있습니다. Figma는 IT 직종 전문가들에게 최적화된 UI 편집 도구이며 협업 도구입니다. 그뿐 아니라 비 디자인 직군에서도 과제를 한다거나 아래의.. 2020. 8. 23.
Color Palettes Generator 사이트 모음 Color Tool - #MaterialDesign 머터리얼 디자인의 Primary와 Secondary Color Generator Tool입니다. Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io - Material design palette https://www.materialpalette.com/ #Coolors The super fast color schemes generator! Coolors - The super fast color schemes generator! Generate or bro.. 2020. 8. 21.