Создание ультимативного инпута в Figma

P. S. Статья рассчитана на людей, которые уже имеют какой-то опыт работы в фигма и знают, как минимум, что такое «компоненты», «варианты» и т. д.

3232
11

Дополню -
1 - самый первый компонент должен быть наиболее часто используемый. То есть ваши дизайнеры не должны тратить время на то чтобы добавить компонент из библиотеки и тратить время на отключение иконок, подсказок и тому подобного.
2 - Никогда. слышите? НИКОГДА - не объединяйте ассет иконок в один компонент как варианты. Во-первых он никак не сортируется внутри и все иконки будут будут предлагаться в хаотичном списке. Второе - в списке вариантов иконок нет превью это так же усложняет поиск компонента. И в-третьих это противоречит принципам Figma Properties - когда вы создаете instance swap properties это подразумевает что вы будете выбирать иконку не из вариантов этого компонента а среди отдельных компонентов (для удобства иконки компонентов организуют просто в отдельном артборде)
3 - Большие матрицы компонентов нагружают файлы - старайтесь делать более компактные компоненты. Например вам в компоненте не нужны состояния ховера, фокуса или например ассинхроной отправки данных - их можно отрисовать для документации а в компоненте оставить только те что вы реально используете постоянно.
4 - добавляйте обязательно Resizing Truncate Text для всех текста внутри поля чтобы он сокращался внутри инпута. (Не очень "ультимативно" если ваш компонент не предусматривает это поведение )

1
Ответить

1) Самый первый компонент и есть самый используемый
2) Да, иконки никогда нельзя хранить в вариантах. Я просто собирал что бы было видно, что они являются компонентами.
3) Благодаря последнему автолейауту совсем больших матриц и не будет. Хранить отдельные компоненты в другом месте ерунда, так как за этим невозможно будет следить
4) Да, этот момент я просто забыл тут описать. Спасибо.

Ответить