Framer

[Framer X Code] Framer에서 쓸 수 있는 NPM 패키지

프로토타입을 React에서 Framer로 옮기니, 패키지를 못쓰는 게 제일 쉽지 않았어요 ㅎㅎ... 불꽃 검색 중 우연히 찾은 링크를 공유드립니다! 1. Framer에서 NPM 사용하기 보통 리액트에서는 터미널로 패키지를 설치하는데, Framer는 불가능합니다. 다행히도 Framer에서 쓸 수 있는 NPM 패키지가 몇 개 있더라고요! (앞에 올린 chart Component도 여기에 원래 Example이 있습니다.) 링크에 들어가면 example을 확인해볼 수 있습니다. 링크 : https://www.framer.com/npm/ Framer: Instant NPM Beta Endless possibilities with instant NPM support. www.framer.com 2. NPM 리스트 ..

[Framer X Code] chart.js로 차트 컴포넌트 만들기

차트를 하나하나 디자인할 수 있겠지만, 귀찮을 때!!! 그냥 chart.js로 그래프를 넣어버리자!!! 0. 코드 파일 생성하기 오늘 만들 친구는 코드 컴포넌트입니다. Code component 파일을 만들어줍니다. 저는 파일 이름을 Chart라고 지었습니다. 그리고 오늘 저는 도넛 차트를 그릴 겁니다! 1. chart.js 사용 세팅 chart.js를 사용하기 위해서는 아래의 것들을 import 해야 합니다. import { Chart as ChartJS, LinearScale, ArcElement, CategoryScale, PointElement, LineElement, Tooltip, Legend, } from "chart.js" ChartJS.register( ArcElement, Tooltip..

[Framer X Code] Input값 바로 화면에 출력하기(createStore)

들어가기 앞서… React 경험자들에게: React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다. Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다. React 비경험자에게: React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다. 만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 ..

[Framer X Code] Override로 Hover & Click Effect 만들기

Override 생성하는 방법을 모르신다면... Code Override 만들기 게시글을 먼저 보고 와주세요. Code Override 만들기 : https://minny-it.tistory.com/4 [Framer X Code] Code Override 만들기 *리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/deve minny-it.tistory.com 0. 코드 Override 생성하기 우선 Override 파일을 만들어줍니다. 저는 Effects라고 이름을 지었습니다. 1. Override 코드 작성하기 저는 Override 함..

[Framer X Code] Code Override 만들기

*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 코드 override는 인터렉션, 데이터 처리? 좀 더 동적인 화면을 만드는데 쓰입니다. 이 게시글은 https://www.framer.com/developers/guides/overrides/ 를 번역하고 조금 더 자세하게 써놨습니다. (예제 빼고 ㅎ) 코드 Override 생성, 기본 Override 구조, 데이터 공유, 참고사항(about Override, Data from "framer")에 대한 이야기입니다. 0. 코드 Override 생성하기 코드 Override를 생성하기 위해서는... 좌측 사이드바에서 Assets을 선택한다. 하단에 Code의 + 버튼을 누른다. New override를 선택한다. 코드 파일의 ..

[Framer X Code] Code Component 만들기

*리액트랑 아주 유사합니다. 코드가 처음이신 분들은 조금 어려울 수 있습니다. 디자이너분들은 굳이 코드 컴포넌트를 쓸 이유가 전혀 없을 듯합니다. 복잡한 건 개발자한테 고고. 그리고 프레이머는 타입스크립트 씁니다. 저는 타입스크립트를 한 번도 안 써봤지만,,, 파일은 타입스크립트인데 문법은 자바스크립트랑 유사합니다. 그리고 자체 코드 에디터에서 다 바꿔줍니다. 그래소 많이 몰라도 괜츈. 이 게시글은 https://www.framer.com/developers/guides/code-components/ 를 번역하고 조금 더 자세히 써놨습니다. 코드 컴포넌트 생성, 기본 코드 컴포넌트 구조, 스타일, Props에 대한 이야기입니다. 0. 코드 컴포넌트 생성하기 코드 컴포넌트를 만들기 위해서는... 좌측 사이..

Framer 입문기

Framer 입문 2개월, 프레이머에 대한 자료가 너어어어어무 없어서 "직접" 만들려고요. Framer 블로그. 앞서 저의 Background를 소개해보자면, Design : Figma 3년째 사용 (이해도 상) Develop : 약간의 Python, 약간의 HTML, 약간의 CSS, 약간의 JS (외 약간의 C, 약간의 C++) 2022년 8월 기준, 1개월 차 개발자?기획자?디자이너?데이터분석가? (실무 경험 0에 수렴) 인턴 시절에 기획했던 기능을 리액트를 활용해 프로토타입을 만들었었는데, 그 순간 프로토타입의 위대함에 눈떠버렸습니다! 확실히 프로토타입을 가지고 설득하는 편이 더 설득력 있더라고요. 프레이머를 사용하게 된 이유 저는 프로토타입을 만들기 위해 리액트를 입문했습니다. 실서비스 퀄리티로 ..