Мы с командой пересели на Figma полтора года назад. Переезд дался легко, привыкли быстро. Но вот потом набили несколько неприятных шишек. И я решила поделиться опытом.
1. Не меняйте текст в компоненте из библиотеки
Мы собрали около 100 документов, внутри каждого от 20 до 100 фреймов. Все эти скриншоты были с кнопками, инпутами, чекбоксами и другими компонентами.
В один момент мы решили перевести макеты с русского на английский язык. В том числе и в UI-ките. Казалось бы ничего страшного, ведь если в символе были сделаны какие-то изменения, то даже если компоненту обновить, всё сохранится.
Итог был удручающим. У нас слетели названия всех кнопок, селектов, инпутов. Вообще всех символов, которые успели потрогать. И что самое печальное, откат действий в библиотеке не помог вернуть тексты в документах.
Говорят, что разработчики Figma уже починили этот трюк. Но мы, уже наученные опытом, стараемся не трогать текст в компонентах, только стили.
2. Дробите библиотеки компонентов
У нас в проекте есть несколько библиотек. Казалось бы, можно все слить в один файл и разместить на нескольких страницах внутри документа. Но как показывает практика, чем меньше объектов в библиотеке, тем проще искать нужный. Да и вес файла меньше, а значит, он открывается быстрее.
Когда создаете новый документ, просто включаете нужную библиотеку к документу.
3. Страницы и попапы тоже могут быть компонентами
Загоняйте в символы стандартные паттерны страниц, не только меню, но и, например, попапы или empty state. Зачем? Во-первых, ваши разработчики скажут вам спасибо за стандартизацию. Например, у нас в системе есть три вида попапов в трёх размерах (стандартный, alert, success). Всего получается девять шаблонов. Во-вторых, вы не будете тратить время на позиционирование элементов. А в-третьих, вы упростите жизнь тем коллегам, которые Figma в руках держат впервые, а собрать что-то нужно. Наши продакты одобрили.
4. Дробите прототипы
Как-то нам нужно было протестировать новый способ распределения задач на фрилансеров клиентом. Там было очень большое дерево вариантов экранов. Около 60 скриншотов. Мы хотели сделать тестирование правдоподобным и просчитать всё. Это творчество привело к тому, что мы сами запутались в связях и в составе этих скриншотов. На распутывание этого клубка ушло целых двое суток.
Но и это ещё не все. Мы принесли прототип к клиентам и ждали четыре минуты, пока он откроется. Было очень неловко.
Не делайте прототипы раздутыми. Лучше разбейте на несколько сценариев и тестируйте более короткими отрезками. Для каких-то ветвей достаточно увидеть, что респондент попытался взаимодействовать с объектом.
5. Рисуйте отступы для компонент
В Figma есть очень удобная фишка с позиционированием объектов. И она хорошо работает, если вы точно знаете, как хотите изменить размер элемента и на сколько разъедется символ. Но что, если вам нужно сделать отступы по 8 px для кнопок с длиной, зависимой от текста?
Мне помогают бордеры: обычные полупрозрачные прямоугольники. Им можно задать правильный размер и поведение. Когда я делаю видимой группу с такими прямоугольниками, могу быстро подогнать размер символа относительно текста или другого содержимого. Они выглядят как padding и margin.
6. Загоняйте ячейки таблиц в компоненты
Если сделать компонентами ячейки таблицы, жить станет намного проще. Чаще всего эти компоненты хранят в себе бордер и пример текста. Ещё можно включать туда другие символы, например, кнопки или селекты.
Чтобы составить таблицу из таких запчастей, нужно потратить чуть больше времени и растягивать каждую ячейку на нужную длину. Но если вдруг вы решите изменить размер шрифта или стиль бордера, вы сэкономите гору времени. А ещё так гораздо проще отслеживать консистентность отступов между колонками.
По пятому пункту. Не обязательно рисовать прямоугольники бордерами. Достаточно задать текстовому полю Constraints по правому и одновременно левому краю. Учитывая, что ваша кнопка - это фрейм. Теперь при ресайзе символы которые не влезли будут скрываться, это поможет вам настроить правильную ширину кнопки и оставить нужные отступы (менять ширину или высоту объекта можно кнопками CMD+стрелки)
Я это делаю, что бы видеть на сколько растягивать или сжимать кнопку. Если сделать как вы говорите, то я не сожму меньше, чем ширина текста. Потому что шрифт съедет, но вот длиннее, чпм нужно сделать могу
А в каких ситуациях вы это используете? Когда нужно длиннее сделать
Например, у меня написано SAMPLE. Компонента сверстана так, что под ней есть фон = длинна текста + отступы. Текст спозиционирован так, одним из описанных вами способов.
Я меняю текст на DOWNLOAD. Длинна текста чуть больше. Значит либо расширится текстовое поле, если он центрирован и отступы до краев будут меньше. Либо левый край будет стоять как нужно, а правый торчать за пределы фона. Дальше я включаю группу с моими прямоугольниками и смотрю на сколько мне нужно растянуть символ что бы слева и справа были одинаковые отступы.
Примерно так же я работаю с таблицами: вижу, когда стоит сделать перенос, если по каким-то причинам не могу загнать текст в ограничения по ширине (так бывает, тк в таблицах колонки разной ширины, а компонент универсальный) или, например у меня этими бордерами размечены компоненты с шаблонами страниц и диалогов. В общем, много примеров. Надеюсь, ответила на вопрос)
Понял. Пишите ещё что-нибудь про Фигму, всегда интересно почитать как другие ребята работают
ребят, объясните, плиз, каким образом у вас в компоненте сетка работает как паддинг? если текст внутри блока больше исходного и я растягиваю кнопку - отступы тоже больше становятся. то ли лыжи не едут, то ли я.... :)
Сетка не сможет работать как паддинг, они используют ее чтобы визуально видеть. А для того чтобы отступы не растягивались, вам нужно задать в параметрах Constrains (в левой панели) привязку слева и справа (Left&Right в первой выпадайке, можете также нажать на правую палочку и с зажатым Shift на левую)