챕터 3-4 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1Hqs1YwtrYbhO7x129jv3prkKeTAmwhpe/view?usp=sharing 3-4 엘리베이션과 스타일.pdf drive.google.com https://drive.google.com/file/d/1qTqhPORwcX_g4toUfxY_tbdPuCzqzNkX/view?usp=sharing 3-4 엘리베이션과 스타일.zip drive.google.com
챕터 3-3 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1V4V9hBRDdJy1eMhwrIfDCV4DIaFqCZ2B/view?usp=sharing 3-3 텍스트와 스타일.pdf drive.google.com https://drive.google.com/file/d/1nMcUsxMEZQ2JeACyxVuvKpha6DAws-eI/view?usp=sharing 3-3 텍스트와 스타일.zip drive.google.com
챕터 3-2 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1H7GUdnB4UrLSxM33f7kkbKond3ez0uZF/view?usp=sharing 3-2 컬러와 스타일.pdf drive.google.com https://drive.google.com/file/d/1FGeVwNsvEa8utjmCIgBPN_1l6GG0sQVJ/view?usp=sharing 3-2 컬러와 스타일.zip drive.google.com
챕터 3-1 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1eCwmmgm9rbPOrSX7JWHnImvBuSx4EyHg/view?usp=sharing 3-1 스타일 등록하기.pdf drive.google.com https://drive.google.com/file/d/1kvJv-Xt0cMU5MeRZeXxocm2cHg5Nq-6C/view?usp=sharing 3-1 스타일 등록하기.zip drive.google.com
디자인 파일 인터페이스 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1XKlCYqsAR6vIcq0e6gxNb4gHfCtioc-J/view?usp=sharing 0-2 디자인 파일 인터페이스.zip drive.google.com https://drive.google.com/file/d/1-qWkVpC4N0_rqaGKqisNTY9RtX775mWF/view?usp=sharing 0-2 디자인 파일 인터페이스.pdf drive.google.com
홈 & 커뮤니티 인터페이스 편을 작성했습니다. 아래 링크를 통해 다운로드 하실 수 있습니다. 한꺼번에 다운받을 수 있는 링크 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ https://drive.google.com/file/d/1IEfNBTFCeW-y7C7dct2GOuQZDrVkv4yi/view?usp=sharing 0-1 홈 & 커뮤니티 인터페이스.zip drive.google.com https://drive.google.com/file/d/1y4v1BjsuMXkw_stzJm5uJlGum6BoadVj/view?usp=sharing 0-1 홈 & 커뮤니티 인터페이스.pdf drive.google.com 피드백은 언제나 환영입니다 많은 댓글과 관심 부탁드립니다. 감사합니다.
안녕하세요, 오구리입니다. 간만의 블로그 포스팅 소식으로 찾아뵈었습니다. 한동안은 블로그에 이전에 제가 제작했던 자료들을 묶어 Figma Basic이라는 이름으로 포스팅을 진행할 예정입니다. 사실 그간 UX와 UI를 진행하며 기존에 쌓아 왔던 자료들과 작업들을 모아서 한데 묶는 작업이 필요하다 느꼈습니다. 저 스스로도 혼란스럽고 작업 프로세스에 대한 정립 없이는 다음 단계로 넘어가기 힘들겠다는 생각이 들었구요. 그래서 이번 기회에 제가 생각했던 프로세스나 방법, 구성, 자료들을 풀어보고 싶어졌습니다. 어떠한 피드백이어도 좋으니 많은 분들께서 보시고 이야기해주셨으면 좋겠습니다. ( 다만 당부드릴 것이 제 @frogOlis 아이디와 카피라이트, 캐릭터는 절대 삭제하지 말도록 당부 드립니다. 저작권을 지켜주세..
지난 포스팅에서는 구글 스프레드시트 플러그인을 사용해서 디자인을 생성하는 법에 대해서 다루었습니다. 오늘은 조금 더 구체적으로 '뭐라고 입력해야 할지'에 대해서 다루어 보겠습니다. 구글 스프레드시트로 어디까지 피그마의 요소들을 조절할 수 있을까요? 하나하나 살펴보겠습니다. 1. 기본값 : 텍스트, 이미지, 베리언츠 먼저 지난 포스팅에서 사용해 봤던 이미지, 텍스트 값을 입력하는 법에 대해서 다루어 보겠습니다. 텍스트 레이어 : 텍스트 레이어의 내용을 입력합니다. 일반적인 텍스트 레이어 설정 시에 주로 사용됩니다. 이미지 : http:// 또는 https:// URL에서 데이터를 받아 해당 레이어의 배경 fill 속성으로 적용합니다. * 단, 벡터 레이어에만 적용됩니다. 텍스트, 프레임, 컴포넌트에는 적용..
피그마에서는 다양한 플러그인을 지원합니다. 플러그인을 통해서 더 편하게 디자인을 할 수 있어요. 이번 편에서는 구글 스프레드 시트를 사용해서 자동으로 디자인이 생성되도록(!) 만드는 방법에 대해서 이야기해보겠습니다. 1. 플러그인 설치 더보기 Google Sheets Sync | Figma Community Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued d..
드디어 디자인 시스템 대망의 과정, 베리언츠에 대해서 알아보겠습니다. 베리언츠는 변형체, 변이체라는 말로 '같은 종류으로부터 나와 다른 모습이 된 것'이란 뜻입니다. 즉, 여러 변형을 갖는 디자인을 만들 때 사용하는 기능이라고 할 수 있습니다. 지금부터 이 베리언츠(Variants)에 대해서 알아보겠습니다. 1. 베리언츠란? 피그마에서는 베리언츠는 마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미합니다. 이때, 베리언츠 속성으로 '상태'를 컨트롤합니다. 크고 녹색인 버튼을 만들어 주세요! 같은 경우라고 할 수 있어요. 속성의 개수도 여러 개를 설정할 수 있기 때문에 한 개의 컴포넌트가 여러 '상태(status)'를 가질 때 주로 표현합니다. 2-1. 베리언츠 생성하기 이런 베리언츠를 만드려면, 3가지 방..
지난 시간에 배운 컴포넌트에 이어서 이번에는 컴포넌트의 다양한 확장을 만드는 컴포넌트 프로퍼티 기능을 준비했습니다. 설명 필요 없이 바로 진행 들어가겠습니다...! 1. 컴포넌트 프로퍼티란? 마스터(원본)에 하위 레이어의 종류와 출력 여부,텍스트를 조정할 수 있도록 속성으로 등록하는 기능을 말합니다. 텍스트, 레이어 출력 여부, 인스턴스 전환 기능 세가지 속성을 조정해서 다양한 조합의 인스턴스를 손쉽게 조정할 수 있습니다. 2. 컴포넌트 프로퍼티 등록하기 프로퍼티를 생성하는 방법은 두 가지가 있습니다. 첫번째는 프로퍼티를 마스터 컴포넌트에서 생성하는 것이고, 두번째는 하위 레이어에서 연결될 컴포넌트 프로퍼티를 생성하여 등록하는 방법입니다. 한 개의 컴포넌트 프로퍼티에 여러 레이어를 연결 지을 수도 있고,..
자 드디어 디자인 시스템의 핵심, 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능으로, 마스터(원본)와 인스턴스(복제본) 로 나뉩니다. 이 둘의 상호작용을 얼마나 잘 이해하는지에 따라 디자인 시스템을 원활하게 관리하는 데 영향을 많이 끼치게 됩니다. 지금부터 차근차근 컴포넌트에 대해서 알아보도록 하겠습니다. 1. 마스터 컴포넌트 등록하기 먼저 마스터 컴포넌트는 상단 UI바에서 마스터 컴포넌트 등록 아이콘을 누르거나 Ctrl + Alt + k 로 등록할 수 있습니다. 등록된 마스터 컴포넌트는 레이어 패널 옆의 에셋 패널에서 확인이 가능합니다. 2. 마스터 컴포넌트를 복사해서 인스턴스 만들기 등록된 마스터 컴포넌트를 복제해 보겠습니다. 복제하고 나니 레이..
