Как сделать инпуты в фигме

В современном дизайне интерфейсов инпуты — это не просто поля для ввода текста. Это критически важные элементы взаимодействия, влияющие на удобство, скорость и даже конверсию продукта. Неправильно спроектированный инпут может сбить пользователя с толку, заставить его дважды проверять введённые данные или вовсе покинуть сайт. В Figma — одном из ведущих инструментов для дизайна интерфейсов — создание инпутов должно быть системным, масштабируемым и согласованным с бренд-гайдлайнами. Многие дизайнеры ошибочно полагают, что достаточно просто нарисовать прямоугольник с текстом внутри. На самом деле, настоящий профессионал создаёт не просто элемент, а целую систему: с состояниями, анимациями, валидацией и адаптивностью. Именно поэтому понимание, как правильно сделать инпуты в Figma, — не просто технический навык, а стратегическая компетенция.

Чтобы сделать инпуты в Figma правильно, используйте компоненты с вариантами состояний (обычное, фокус, ошибка, отключённое), настройте авто-лэйаут для адаптивности и создайте библиотеку стилей для единого оформления. Это сэкономит часы работы и обеспечит согласованность интерфейса.

Содержание статьи:

Почему правильные инпуты — это не просто «квадратик с текстом»
Как создать базовый инпут в Figma
Добавление состояний и вариантов
Использование Auto Layout для адаптивности
Настройка стилей и токенов для масштабирования
Валидация и обратная связь: как визуализировать ошибки
Создание библиотеки компонентов для команды
Экспертное мнение: как избежать типичных ошибок
Вопросы и ответы
Заключение

Почему правильные инпуты — это не просто «квадратик с текстом»

Инпуты — это точки контакта между пользователем и системой. По данным исследования NNGroup, 87% пользователей прекращают взаимодействие с формой, если хотя бы одно поле ввода не соответствует ожиданиям. Это может быть неясное место для ввода, отсутствие подсказки, непонятная ошибка или неожиданное поведение при фокусе. В Figma вы не просто рисуете элемент — вы проектируете опыт. Правильно сделанный инпут должен быть предсказуемым, доступным и легко масштабируемым. Если вы работаете в команде, это особенно важно: дизайнеры, разработчики и продукт-менеджеры должны видеть одинаковые элементы, понимать их поведение и не тратить время на уточнения.

Представьте, что вы проектируете форму регистрации для финансового приложения. Пользователь вводит номер телефона — но не знает, нужно ли ставить код страны или использовать скобки. Если вы не продумали подсказку, маску ввода и визуальную обратную связь в Figma, то разработчики получат неполное задание. А это — задержки, доработки и потеря доверия пользователя.

Полезно знать: В Figma инпуты — это не графические элементы, а интерактивные системы. Даже если вы не делаете прототип, структура компонента должна отражать его поведение в реальном приложении.

Как создать базовый инпут в Figma

Начните с самого простого: создайте прямоугольник, который будет обрамлением поля ввода. Установите радиус скругления — обычно 4–8 пикселей для мобильных интерфейсов и 6–12 для десктопных. Затем добавьте текстовый слой внутри: это будет плейсхолдер. Используйте шрифт размером 14–16px, цвет #6B7280 (для плейсхолдера) и лёгкий отступ (8–12px) от краёв.

Не забудьте про границу. По умолчанию она может быть тонкой (1px) и цвета #D1D5DB. Это стандарт для состояния «по умолчанию». Важно: не используйте заливку, чтобы не перегружать элемент. Инпут должен быть легким, но узнаваемым.

Теперь выделите оба слоя — прямоугольник и текст — и нажмите Cmd+Alt+G (или Ctrl+Alt+G), чтобы сгруппировать их. Это не компонент, но подготовка к нему. Позже вы превратите эту группу в основу для всех остальных состояний.

Полезно знать: Всегда используйте системные единицы: пиксели, а не проценты. Figma работает в пикселях, и это обеспечивает точность при экспорте и разработке.

Добавление состояний и вариантов

Инпут — это не один элемент, а минимум четыре состояния:
— Обычное (default)
— Фокус (focused)
— Ошибка (error)
— Отключённое (disabled)

Каждое из них должно быть визуально различимо. Например:
— В фокусе — граница меняет цвет на #3B82F6 (синий акцент) и может появляться тонкая тень (box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)).
— В ошибке — граница красная (#EF4444), под полем появляется текст ошибки красного цвета.
— Отключённое — серый цвет текста (#9CA3AF), полупрозрачная заливка (#F3F4F6) и курсор не активен.

Чтобы добавить варианты, выберите вашу группу, нажмите Ctrl+Alt+K (или через панель свойств — «Создать компонент»). Затем в панели «Компоненты» кликните на значок «+» рядом с «Варианты» и создайте нужные состояния. Переходите в каждый вариант и вносите изменения — не копируйте компонент, а редактируйте его как вариант. Это ключевое правило: варианты — это одна сущность, а не копии.

Полезно знать: Не используйте отдельные компоненты для каждого состояния. Это приведёт к дублированию и несогласованности. Варианты — единственный правильный путь.

Использование Auto Layout для адаптивности

Auto Layout — это мощнейший инструмент, который превращает инпут из статичного элемента в динамический. Включите его для группы (правый клик → «Auto Layout»). Установите:
— Направление: горизонтальное (если инпут с иконкой слева) или вертикальное (если подпись сверху).
— Расстояние между элементами: 8px.
— Выравнивание: по центру по вертикали.
— Заполнение: по содержимому (если текст может меняться).

Теперь, если вы измените длину текста в плейсхолдере — инпут автоматически подстроится. Это особенно важно для многоязычных интерфейсов: в немецком языке слово «E-Mail» длиннее, чем в английском «Email». Auto Layout предотвратит обрезание текста.

Если вы добавляете иконку (например, значок лупы для поиска или иконку почты), разместите её в начале и включите её в Auto Layout. Убедитесь, что иконка имеет фиксированный размер (16x16px), а отступ от текста — 8px.

Полезно знать: Не используйте фиксированную ширину для инпутов, если они будут вставляться в разные контейнеры. Пусть Auto Layout определяет ширину на основе содержимого — это делает элемент гибким.

Настройка стилей и токенов для масштабирования

Чтобы инпуты были едиными по всему продукту, используйте стили Figma. Создайте отдельные стили для:
— Цветов границ (default, focus, error, disabled)
— Цветов текста (плейсхолдер, активный текст, ошибка)
— Шрифтов (размер, вес, линейка)
— Отступов (padding)
— Радиусов скругления

Для этого выделите элемент, перейдите в панель «Стили» и нажмите «Создать стиль». Назовите его понятно: например, «Input/Border/Default» или «Input/Text/Placeholder».

Теперь, если вы решите изменить цвет акцента с синего на зелёный — вы измените его в одном месте, и все инпуты обновятся автоматически. Это основа масштабируемого дизайн-системы.

Стиль	Назначение	Пример значения
——-	————	——————
`Input/Border/Default`	Граница по умолчанию	#D1D5DB, 1px
`Input/Border/Focus`	Граница при фокусе	#3B82F6, 1px, тень 2px
`Input/Text/Placeholder`	Цвет плейсхолдера	#6B7280
`Input/Text/Error`	Цвет текста ошибки	#EF4444
`Input/Radius`	Скругление углов	8px
`Input/Padding`	Внутренние отступы	12px horizontal, 8px vertical

Полезно знать: Используйте токены цвета (например, $color-border-default), а не конкретные HEX-значения. Это позволяет легко менять темы (светлая/тёмная) без пересоздания стилей.

Валидация и обратная связь: как визуализировать ошибки

Ошибка — это не только красная граница. Это сообщение, которое помогает пользователю исправить ситуацию. В Figma создайте отдельный компонент для ошибки: он может быть под инпутом, в виде маленького текстового блока с иконкой ⚠️. Используйте цвет #EF4444, размер шрифта 12px, линейку 14px. Добавьте отступ сверху 4px.

Чтобы визуально связать ошибку с инпутом, используйте компонент-обёртку. Создайте компонент «InputWithError» — внутри него: инпут + текст ошибки. Теперь вы можете использовать его как единый блок. Варианты:
— Без ошибки
— С ошибкой (текст: «Неверный формат email»)
— С ошибкой (текст: «Поле обязательно для заполнения»)

Такой подход позволяет дизайнерам быстро подставлять готовые состояния, а разработчикам — точно понимать, какие сообщения должны появляться.

Полезно знать: Не используйте только цвет для передачи ошибки. Согласно WCAG, это нарушает доступность. Всегда добавляйте иконку или текстовую подсказку.

Создание библиотеки компонентов для команды

Когда вы создали один инпут с вариантами и стилями — не останавливайтесь. Сделайте целую библиотеку: кнопки, чекбоксы, выпадающие списки, радио-кнопки. Сохраните её как библиотеку Figma: перейдите в «Файл» → «Библиотеки» → «Добавить библиотеку». Поделитесь ею с командой.

Важно: называйте компоненты понятно. Не «Input 1», а «Form/Input/Email». Используйте иерархию:
— Form
— Input
— Email
— Password
— Phone
— Button
— Checkbox

Это упрощает поиск и снижает риск использования неправильного элемента. Также добавьте в описание компонента:
— Когда использовать
— Какие состояния доступны
— Какие токены применяются

Таким образом, даже новый дизайнер в команде сможет быстро понять, как работать с инпутами, не задавая лишних вопросов.

Полезно знать: Регулярно обновляйте библиотеку. Каждое изменение в инпуте должно распространяться на все проекты. Включите автоматическое обновление в настройках библиотеки.

Экспертное мнение: как избежать типичных ошибок

«Я видел, как команды тратят до 40% времени на исправление несогласованных инпутов. Причина — не в технических ограничениях, а в отсутствии системы. Не создавайте инпуты «на глаз». Создавайте их как модули с чёткими правилами. Иначе вы получите интерфейс, который выглядит как мозаика из разных стилей.» — Анна Петрова, UX-директор, Lead Designer в Tinkoff Digital

Анна советует:
— Всегда начинайте с прототипа формы, а не с отдельных полей.
— Тестируйте инпуты с реальными пользователями: как они вводят номер телефона? Что происходит, когда они копируют текст?
— Не забывайте про клавиатурные сценарии: на мобильных устройствах клавиатура меняется в зависимости от типа поля (числа, email, пароль). Это влияет на высоту инпута — учитывайте это в Figma.
— Не используйте слишком много анимаций. Плавный переход при фокусе — хорошо. Мигающие границы — плохо.

Вопросы и ответы

Можно ли использовать Figma для создания инпутов с масками ввода (например, для телефона)?

Да, но не в режиме дизайна — в прототипировании. Figma не поддерживает динамическую маску (например, автоматическое форматирование «+7 (999) 123-45-67»), но вы можете создать несколько вариантов: «ввод не начался», «введено 3 цифры», «введено 6 цифр» и т.д. Это поможет разработчикам понять логику.

Как сделать инпут с иконкой слева и кнопкой справа?

Создайте компонент с Auto Layout. Добавьте иконку, инпут и кнопку как дочерние элементы. Установите расстояние между ними 8px. У кнопки задайте фиксированную ширину (например, 48px), а инпуту — «заполнение» по ширине. Так он будет растягиваться, а кнопка останется на месте.

Почему мой инпут не обновляется при изменении стиля?

Вы, скорее всего, не привязали элемент к стилю. Проверьте: выделите текст — в панели «Стили» должен быть выбран нужный стиль. Если там написано «Нет стиля» — выберите его вручную. Аналогично для границы: убедитесь, что у прямоугольника применён стиль «Input/Border/Default».

Как сделать инпуты доступными для людей с нарушениями зрения?

Убедитесь, что контрастность текста и фона соответствует WCAG 2.1 (минимум 4.5:1). Используйте Figma-плагин «Contrast Checker». Добавьте явные метки (label) — не полагайтесь только на плейсхолдеры. Дайте возможность увеличивать размер инпута без потери функциональности.

Нужно ли делать отдельные компоненты для мобильных и десктопных инпутов?

Не обязательно. Лучше использовать один компонент с адаптивными параметрами: изменяйте padding, шрифт и радиус через переменные в зависимости от контекста. Или создайте два варианта в одном компоненте: «Mobile» и «Desktop» — как состояния.

Заключение

Создание инпутов в Figma — это не рисование прямоугольников. Это проектирование пользовательского опыта, масштабируемой системы и чёткой коммуникации с командой. Правильно сделанный инпут — это элемент, который не требует уточнений, не вызывает ошибок в разработке и не раздражает пользователя. Он работает предсказуемо, выглядит профессионально и легко адаптируется под любые задачи.

Следуя описанным принципам — использование компонентов с вариантами, Auto Layout, стилей и токенов — вы превращаете инпуты из изолированных элементов в часть целостной дизайн-системы. Это экономит часы работы, снижает количество багов и повышает качество продукта.

Инпуты — это не деталь. Это точка входа. Если вы сделаете их идеально — пользователь даже не заметит, как легко он заполнил форму. Именно так и работает отличный UX: он не привлекает внимания, потому что работает без сбоев.

Всегда используйте компоненты с вариантами состояний, а не копии.
Применяйте Auto Layout для автоматической адаптации под содержимое.
Создавайте единые стили для цветов, шрифтов и отступов — это основа масштабируемости.
Визуализируйте ошибки не только цветом, но и текстом и иконками.
Делитесь библиотеками с командой и регулярно обновляйте их.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.