Framer Web의 코드 기능으로 프로토타입 만들기(양식 오류 및 버튼 활성화)

평소 UI 디자인의 프로토 타입 제작은 sketch와 Prott를 사용하지만 동적인 움직임을 재현하지 못하고 이미지가 전해지지 않는 스트레스가있었습니다.
여러가지 시험한 결과, 개인적으로는 Framer라고 하는 제품이 마음에 들어, 보다 잘 사용하고 생각해, 기억한 실장 방법을 기록해 가고 싶습니다.
htps //w w. f 라메 r. 코m/

Framer는 Framer Web이되었습니다.

첫째, Framer는 디자인 ~ 움직임이있는 프로토 타입까지 일관되게 제작할 수있는 제품으로, 가장 큰 특징은 코드를 작성하고 프로토 타입을 제작할 수 있습니다.
이전에는 Framer X라고 하는 다운로드해 사용하는 소프트였습니다만, 요전날 Framer Web이라고 하는 브라우저로 사용하는 제품이 되어 릴리스 되고 있었습니다! (Framer X는 유료 다운로드 판이 되어 있는 것처럼)
Figma라는 프로토 타입 툴도 브라우저로 디자인까지 가능합니다만, 평상시 sketch를 사용하고 있는 나에게 있어서 브라우저에서 sketch와 같이 디자인을 만들 수 있는 것에 꽤 충격을 받았습니다.

우선 완성형 프로토타입

하고 있는 일

회원정보에 전화번호 정보가 부족하여 오류가 발생했습니다.
↓
서랍 양식을 열고 전화 번호를 추가합니다.
↓
비활성이었던 양식 버튼과 회원 정보 버튼이 활성화됩니다.
(후반은 그 반대로 비활성 상태입니다)

만든 페이지는 단 2장!

디자이너가 있다고 생각하지만, 전환을 표현하기 위해 비슷한 페이지를 많이 만들 수도 있습니다.
Framer Web에서는 단 2장으로 OK입니다.

코드를 사용하려면

메뉴의 코드에서 설정해야 합니다.

코드 설명

↓ 우선은 Form.tsx라고 하는 파일을 제작해, 사용하는 것을 import 합니다.
Override : 프로토 타입을 렌더링 할 때 실행되는 JavaScript 함수

From.tsx

import { Override, Data, Color } from "framer"

↓ 다음에 사용할 데이터를 정의합니다.

From.tsx

const data = Data({
    formDisable: false,
    ctaBackground: Color("#E4E4E4"), // 会員情報ページのctaButton
    subButtonColor: Color("#E4E4E4"), // ドロワーフォームのctaButton
    message: "", //入力した電話番号
})

↓ 버튼의 색을 변경하는 함수

From.tsx

// ctaボタンの色を指定
export function CtaButton(): Override {
    return {
        background: data.ctaBackground,
    }
}
export function SubButton(): Override {
    return {
        background: data.subButtonColor,
    }
}

↓ 전화 번호 input의 처리를 쓴 함수

From.tsx

// 電話番号の入力フォーム
export function TelInput(): Override {
    return {
        onValueChange(value) {
            value: data.message
            if (value) {
                data.ctaBackground = Color("#FFC11C")
                data.subButtonColor = Color("#1BA1FF")
                data.formDisable = true
            } else {
                data.ctaBackground = Color("#E4E4E4")
                data.subButtonColor = Color("#E4E4E4")
                data.formDisable = false
            }
            // 入力した電話番号をフォームにいれたい（実はここが上手く機能しません。。）
            data.message = value
        },
    }
}

↓ 「회원 정보」페이지의 변경을 지정

From.tsx

// 会員情報ページのエラーの色を変更
export function IsErorrBackground(): Override {
    if (data.formDisable) {
        return {
            background: Color("#FFF"),
        }
    }
}
// 会員情報ページのエラーテキスト表示
export function IsErorrText(): Override {
    if (data.formDisable) {
        return {
            opacity: 0,
        }
    }
}
// 電話番号が入力されたら会員情報ページの電話番号を表示
export function IsTelNumber(): Override {
    if (data.formDisable) {
        return {
            opacity: 1,
        }
    }
}

작성한 함수를 사용하는 부품에 지정

하나의 요소에 하나의 함수만 할당할 수 있습니다.
↓ 이하에서는 「회원 정보」페이지의 메인 버튼에 CtaButton() 를 할당하고 있습니다.


같은 요령으로 다른 파트에도 함수를 할당합니다.
↓ 이쪽은 전화 번호 입력 폼

기존 Framer Web의 기능을 사용하여 움직이기(코드 사용하지 않음)

Framer Web에서는 코드를 작성하지 않아도 표현할 수 있는 경우도 많습니다.
다음은 기존 기능을 사용하여 제작했습니다.

1. 폼 페이지 오버레이(드로어)

↓ 오버레이 하고 싶은 파트를 디자인상에서 묶어, 우측의 설정 일람으로부터 Interactions > Transition으로 움직임을 지정할 수 있습니다.

2. Input 폼 추가

실제로 입력할 수 있는 input 폼은 헤더에 있는 insert 로부터 호출할 수 있습니다.

↓ 디폴트를 포커스 맞추는지나, 배경의 색까지 이쪽으로 지정 가능합니다.

여기까지 설정하면 종료

다시 한번 완성계를 보자.

주) 버튼은 색의 변경만 하고 있으므로, 실제로 disable가 되는 것은 아닙니다. (누를 수 있습니다)

앞으로 하고 싶은 일

웹 서비스를 디자인하기 때문에 기존 기능으로는 부족한 경우도 많다. Framer API를 공부하고 싶습니다.

Framer 이외에 Origami Studio도 하고 있으므로, 사용 비교 기사도 걸면 좋다고 생각하고 있습니다.

고마워요.