Как определить, что задача выполнена? Обычно я не описываю задачи подробно. В конце концов люди — не роботы, поэтому они выполняют задачи в которых нет четкого алгоритма.

В сервисном дизайне задача может звучать коротко, например, “Добавить фичу X в профиле пользователя”, а на деле — влечет за собой пару недель работы, внесение изменений в множество экранов за пределами “профиля пользователя”, и изменения в дизайн-системе сервиса.

Я написал некоторые принципы, которые позволяют проверить и дать ответ, что задача выполнена.

1. Соблюдается правдоподобность

  • Настоящий контент, тексты и фотографии. …


В первой части материала я рассказал о том, как сделать интерактивный инпут. Получилось более 100 строчек кода и, чтобы, не писать столько строк для каждого текстового поля в прототипе мы сделаем класс.

Классы позволяют создавать новые типы объектов определять для них свойства и методы, которые будут работать для всех экземпляров класса. Layer, TextLayer, PageComponent — это все встроенные во Framer классы. Если вы работаете в Figma, то ближайший аналог класса — компонент.

Image for post

Создаем класс

class InputComponent extends Layer
¬ constructor: (@options={}) ->
¬ ¬ @isFocus = false
¬ ¬ super _.defaults …


Я расскажу как реализовать в своем прототипе интерактивные текстовые поля.

Дизайн

Делаем дизайн всех состояний в Figma, определяем размер поля и отступы.

Image for post

У текстового поля будет 4 состояния:

  • Базовое
  • При наведении
  • Активное
  • Ошибка

Создание элементов прототипа

Создаем новый проект во Framer, переключаемся во вкладку Code.

Делаем новый слой в котором будут лежать все элементы текстового поля:

inputContainer = new Layer
width: 360
height: 76
x: 170
y: 162
Image for post

Чтобы избавиться от серого фона, допишем:

backgroundColor: "transparent"

Теперь добавим лейбл. Для этого вместо обычного Layer будем использовать TextLayer :

inputLabel = new TextLayer
¬ text: "Your name"
¬ parent: inputContainer # Размещаем inputLabel внутри inputContainer
¬ fontFamily: "Basis Grotesque Pro"
¬ fontSize: 16
¬ lineHeight: 1.25 …

About

Pavel Chelyuskin

Founder and lead designer at Monographic.ru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store