본문 바로가기
닫기
토픽 주제별 분류
서브토픽
필터

  • 11 steps to keep Figma clean

    uxdesign.cc

    11 steps to keep Figma clean

    We all probably already know how it is to receive a project from someone else. Not everyone works the same way, it’s what makes our field…

    dracure

  • Using Figma interactive components to create functional buttons

    uxdesign.cc

    Using Figma interactive components to create functional buttons

    Using Figma’s new Interactive Components to make reusable buttons in your prototypes

    dracure

  • How we use Figma’s API to deliver design to the production

    uxdesign.cc

    How we use Figma’s API to deliver design to the production

    Why did we choose Figma?

    dracure

  • 피그마, 디자인 그리고 8px

    brunch.co.kr

    피그마, 디자인 그리고 8px

    디자이너, 개발자 그리고 그 중간에 있는것들 | 최근 피그마 코리아 페이스북 그룹에서 활동하기 시작했다. 필자가 개발한 피그마 플러그인 'util+'를 만든 이유에 대해 포스팅했다. 포스팅 댓글들을 보니 생각보다 8픽셀에 집착?하는 디자이너들이 많은것 같더라. 이 사실을 알게 되고 플러그인 개발하는게 즐거워졌다. 8픽셀 디자인이 필요한 이유는 무엇인가? 여기에 대해서는 나보다 훨씬 잘 설명한 포

    yuli_kim

  • 피그마 디자인코드와 개발환경

    brunch.co.kr

    피그마 디자인코드와 개발환경

    리액트, 뷰, 스벨트, 플러터, 스위프트, 코틀린... | 피그마에서 디자인을 실제 개발에 적용하기 위한 코드를 Inspect창을 통해 볼 수 있다. Inspect / Code 에서 CSS, iOS, Android 탭을 선택하면 각각에 해당하는 코드로 보여준다. 이 코드들은 웹, 아이폰, 안드로이드폰의 세가지 환경에 적용되는 디자인 코드들이다. 디자인 코드를 제어할수 있는 환경에 대해 살펴보면 웹은 자바스크립

    yuli_kim

  • 피그마 디자인을 코드로 만드는 방법

    brunch.co.kr

    피그마 디자인을 코드로 만드는 방법

    개발환경 설정없이 시작하는 코딩 | 피그마로 디자인을 완성하면 inspect창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다. 완성된 디자인을 개발에 적용하는 과정은 각 컴포넌트들의 class name을 정하고 피그마 inspect창의 코드를 복사하여 붙여 넣는다. 이렇게 붙여넣기만 하면 짠~ 하고 디자인과 똑같이 브라우저에 나타날것이라 예상되지만 실제로는 어느정도 코드의 수

    yuli_kim

  • 개발 구조를 만드는 피그마 플러그인

    brunch.co.kr

    개발 구조를 만드는 피그마 플러그인

    피그마 플러그인 #util+ | 필자는 지난 포스팅에서 피그마로 개발 구조를 잡는 방법에 대해 포스팅을 했다. 이 글을 통해 개발구조를 잡아가는 흐름과 개발에 적용한 결과를 이미지를 통해 설명했다. https://brunch.co.kr/@eddwardpark/53 이 과정에서 피그마 플러그인을 사용하여 구조를 잡았다. 여기서 사용한 플러그인(util+)을 어떻게 활용했는지 살펴보자

    yuli_kim

  • 인간의 눈으로 보는 컬러 디자인 시스템

    brunch.co.kr

    인간의 눈으로 보는 컬러 디자인 시스템

    컬러에 대한 이해 | 각각의 색상을 색상휠로 구분하여 사용하는 방법중 HSL, HSB, HSV등이 있다. 색상을 표현하는 방법중 HSL( hue, saturation, lightness )을 기준으로 보면 색을 결정하는 요소는 hue인것을 알수 있다. hue의 컬러휠 빨간색 0도 기준으로 360도까지 노란색, 녹색, 파란색, 자주색등으로 배치되어 있다. 왼쪽의 컬러휠은 1

    yuli_kim

  • 피그마로 개발 구조 잡기

    brunch.co.kr

    피그마로 개발 구조 잡기

    디자인을 개발에 맞게 구조화 하기 | 위의 이미지는 최근 필자가 참여한 프로젝트의 일부분을 각색하여 피그마로 재구성한 디자인이다. 실제 개발까지 진행된 프로젝트의 예제라고 보면 된다. 기획을 바탕으로 디자인을 완성하면 위의 이미지와 같이 2차원적으로 보여지게 된다. 2차원적인 컴포넌트들로는 개발자가 html의 구조를 잡기에는 매우 어렵다. 구조를 완성하고 javascript(react,

    yuli_kim

  • 디자이너가 개발과 친해지는 방법

    brunch.co.kr

    디자이너가 개발과 친해지는 방법

    어디서부터 시작해야 하나? | 디자이너가 개발을 배우는게 어려운 이유는 무엇일까? html은 tag(div, button, input, h1, p)라는 재료를 이용해 디자인에 맞게 구조를 만드는 역할을 한다. css는 html로 만든 뼈대위에 살을 붙여 디자인이 완성된 웹페이지를 만든다. js는 이렇게 만들어진 웹페이지의 구성요소들의 움직임 또는 필요한 기능을 수행한다. 개발을

    yuli_kim

  • Figma AutoLayout  vs  CSS Flex

    brunch.co.kr

    Figma AutoLayout  vs  CSS Flex

    개발자가 보는 피그마 오토레이아웃 | 피그마로 다자인 요소들의 레이아웃(디자인 요소의 배치)을 반영할때 오토레이아웃을 사용하게 된다. 오토레이아웃을 Inspect창에서 개발자가 코드로 확인을 해보면 CSS의 Flex값들로 보인다. 오토레이아웃은 디자이너가 사용하는 객체이고 개발자가 이를 코드로 변환하기 위해서는 CSS Flex로 작성해야 한다. 필자는 피그마의 오토 레이아웃에에서 레이

    yuli_kim

  • 피그마의 디자인은 사용자에게 어떻게 전달될까?

    brunch.co.kr

    피그마의 디자인은 사용자에게 어떻게 전달될까?

    프로덕트의 모든 과정을 살펴보자 | 우리가 피그마로 디자인한 결과물이 사용자에게 전달되기까지 어떠한 과정이 존재할까? 이러한 과정을 체득하여 이해하기까지 필자또한 굉장히 오랜 시간이 걸린것 같다. 디자인 이후에 거쳐야 하는 각각의 과정들이 실제 개발자들이 알아야할 내용들이기도 하다. 각각의 과정들을 깊이 파보면 그또한 깊이가 상당하다는걸 알게된다. 그렇기에 실제 사용자에게 서비스하기까

    yuli_kim

  • 피그마, 디자인 토큰 그리고 개발

    brunch.co.kr

    피그마, 디자인 토큰 그리고 개발

    글로만 이해해 보는 디자인 토큰 | 디자인 시스템 Material은 팀이 Android, iOS, Flutter 및 웹을위한 고품질 디지털 경험을 구축 할 수 있도록 Google에서 만든 디자인 시스템입니다. https://material.io/design/introduction 디자인 시스템은 재사용 가능한 UI 컨포넌트이다. 머터리얼 디자인 시스템을 들여다 보면 엄청나게 방대한 분량

    yuli_kim

  • 피그마로 그려보는 Prototype Pattern

    brunch.co.kr

    피그마로 그려보는 Prototype Pattern

    생성 패턴중 프로토타입 패턴에 대해서 | 프로토타입 패턴(prototype pattern)은 소프트웨어 디자인 패턴 용어로, 생성할 객체들의 타입이 프로토타입인 인스턴스로부터 결정되도록 하며, 인스턴스는 새 객체를 만들기 위해 자신을 복제(clone)하게 된다. 위키에 정의된 프로토타입 패턴이다. 우리가 사는 지구는 다양한 생명체들이 살고 있다. 세포는 생명체를 이루는 가장 기본 단위이다.

    yuli_kim

  • 피그마로 그려보는 Observer Pattern

    brunch.co.kr

    피그마로 그려보는 Observer Pattern

    행위 패턴중 옵저버 패턴에 대해서 | 옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 위키에 정의된 옵저버 패턴이다. 여러분들은 아마도 피그마, 넷플릭스, 멜론등 수많은 구독 서비스 중 하나 이상을 사용하고

    yuli_kim

  • 피그마로 그려보는 Proxy Pattern

    brunch.co.kr

    피그마로 그려보는 Proxy Pattern

    구조패턴중 프록시 패턴에 대해서 | 일반적으로 프록시는 다른 무언가와 이어지는 인터페이스의 역할을 하는 클래스이다. 프록시는 어떠한 것(이를테면 네트워크 연결, 메모리 안의 커다란 객체, 파일, 또 복제할 수 없거나 수요가 많은 리소스)과도 인터페이스의 역할을 수행할 수 있다. 위키에 정의된 프록시 패턴이다. 회사를 주제로 하는 드라마에서 대리라는 직함을 들어본적이 있을거다. 간단한 업

    yuli_kim

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기