게으른개발너D
Framer 본문
FRAMER(프레이머)는 코드기반의 디자인툴이다. 프레이머로 디자이너가 디자인을 하게 되면 React 샘플 코드로 생성이 된다. 이걸 Front end developer가 조금 수정을 해서 사용을 하면 되는 구조이다.
토스(Toss)와 같이 요즘 서비스 운용하는 기업들은 디자인 시스템(design system)에 흠뻑 빠져있다.
디자인 시스템이란?
서비스를 제공하는 자가 운용하는 각 브랜딩, UI등의 상세 구조들을 규격화하여 어느누가 그 자리에 배치되더라도 규격화된걸 그대로 사용해서 유지보수를 하면 아무런 문제가 발생되지 않도록 하는 일종의 정책서와 같은 것이다.
세일즈포스 닷컴의 라이트닝 디자인 시스템
https://www.lightningdesignsystem.com/
Lightning Design System
Component Blueprints Ready-to-use HTML and CSS UI elements provide the foundation for Salesforce experience development Go to Blueprints Tokens Visual design values and attributes that ensure branding and UI consistency at scale View Tokens Design Guidelin
www.lightningdesignsystem.com
어도비사의 스펙트럼 디자인 시스템
Spectrum, Adobe’s design system
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
spectrum.adobe.com
프레이머는 스케치나 피그마와는 달리 컴포넌트 단위들에게 인터렉션을 다양하게 만들 수 있도록 제공된다.
New 버튼을 누르면 새로운 프로젝트 생성 선택 팝업이 호출되고 여기서 본인이 하고싶은 유형을 선택하면 된다.
컴포넌트들도 제공이 잘되고 있어서 프레이머 홈페이지에서 간단하게 복사 붙여넣기로 바로 적용을 할 수도 있다.
또한 컴포넌트 단위들을 연결하고 그걸 통해 화면 인터렉션을 만들 수 있으며, 컴포넌트들을 조합해서 화면을 만들어둔걸 코드로 추출해서 수정하고 바로 서비스에 반영할 수 있도록 되어있다.
'개발 > ETC' 카테고리의 다른 글
| 테스트 코드 작성에 대해 (0) | 2023.10.23 |
|---|---|
| [Git] CLI 1 - 버전 관리 (2) (0) | 2023.02.12 |
| [Git] CLI 1 - 버전 관리 (1) (0) | 2023.02.12 |
| Publishing on Github (Github Desktop) (0) | 2023.02.12 |
| Windows Setup for Developer (0) | 2023.02.12 |
