Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Недавно мы рассказывали, как UI-kit помогает поддерживать порядок в дизайне. Там мы делились советами, которые подойдут для работы в Figma, Sketch, и Adobe XD. Но команда Purrweb работает в Figma, и для этого сервиса у нас собрался целый гайд. Любители Figma, ловите полезности.
Сразу оговоримся. Мы собираем UI-kit через компоненты и автолейаут (АЛ). И если компонентами пользуются почти все дизайнеры, то автолейаутом — не все. А зря. Нам эта функция экономит кучу времени и сил, когда приходят замечания от заказчика и в макетах нужно что-то поменять.
Поэтому сначала небольшое отступление про автолейаут, а затем перейдем к сборке компонентов в Figma.
Автолейаут — это инструмент, который помогает выравнивать отступы, привязывать элементы к сторонам контейнера и выставлять расстояния между элементами. Как это работает, показываем на примере кнопки:
Меняем текст, но отступы остаются прежними
В итоге элемент правильно выглядит при любых изменениях. Если не использовать АЛ, изменения будут влиять на текст кнопки: он будет растягиваться, съезжать и вести себя не так, как нам нужно.
АЛ также удобно использовать при отрисовке сложносоставных компонентов: карточек, хедеров, модалок. Благодаря АЛ эти компоненты можно менять, сохраняя исходное расположение элементов.
Перейдем к сборке компонентов.
Инпут собираем с помощью АЛ с фиксированной высотой. Если у инпута есть заголовок, также делаем из текстового контейнера АЛ, а потом заголовок и инпут помещаем в один большой АЛ. Для заголовка и инпута выставляем настройку Fill container.
Теперь при растягивании и сжатии большого АЛ заголовок и инпут будут растягиваться и сжиматься, как один элемент
С дополнительным текстом под инпутом делаем то же самое. Только не нужно фиксировать высоту общего АЛ. Он должен растягиваться в случае, если ошибка будет длиной в несколько строк.
Инпуты с разной высотой делаем разными компонентами. Это нужно для того, чтобы разработчики понимали, сколько строк должно быть в каждом инпуте.
Также важно выставить настройку Hug content. С ней контейнер будет облегать содержимое, и разработчики не добавят на готовый экран лишние отступы.
Их также собираем через АЛ с фиксированной высотой. Если есть заголовок, действуем так же, как с инпутом. И не забываем про Hug content.
Для дропдауна и меню добавляем настройку Space between. В таком случае текст будет всегда расположен по левой стороне контейнера, а стрелка, открывающая элемент — по правой.