Мы с командой пересели на Figma полтора года назад. Переезд дался легко, привыкли быстро. Но вот потом набили несколько неприятных шишек. И я решила поделиться опытом.
1. Не меняйте текст в компоненте из библиотеки
Мы собрали около 100 документов, внутри каждого от 20 до 100 фреймов. Все эти скриншоты были с кнопками, инпутами, чекбоксами и другими компонентами.
В один момент мы решили перевести макеты с русского на английский язык. В том числе и в UI-ките. Казалось бы ничего страшного, ведь если в символе были сделаны какие-то изменения, то даже если компоненту обновить, всё сохранится.
Итог был удручающим. У нас слетели названия всех кнопок, селектов, инпутов. Вообще всех символов, которые успели потрогать. И что самое печальное, откат действий в библиотеке не помог вернуть тексты в документах.
Говорят, что разработчики Figma уже починили этот трюк. Но мы, уже наученные опытом, стараемся не трогать текст в компонентах, только стили.
2. Дробите библиотеки компонентов
У нас в проекте есть несколько библиотек. Казалось бы, можно все слить в один файл и разместить на нескольких страницах внутри документа. Но как показывает практика, чем меньше объектов в библиотеке, тем проще искать нужный. Да и вес файла меньше, а значит, он открывается быстрее.
Когда создаете новый документ, просто включаете нужную библиотеку к документу.
3. Страницы и попапы тоже могут быть компонентами
Загоняйте в символы стандартные паттерны страниц, не только меню, но и, например, попапы или empty state. Зачем? Во-первых, ваши разработчики скажут вам спасибо за стандартизацию. Например, у нас в системе есть три вида попапов в трёх размерах (стандартный, alert, success). Всего получается девять шаблонов. Во-вторых, вы не будете тратить время на позиционирование элементов. А в-третьих, вы упростите жизнь тем коллегам, которые Figma в руках держат впервые, а собрать что-то нужно. Наши продакты одобрили.
4. Дробите прототипы
Как-то нам нужно было протестировать новый способ распределения задач на фрилансеров клиентом. Там было очень большое дерево вариантов экранов. Около 60 скриншотов. Мы хотели сделать тестирование правдоподобным и просчитать всё. Это творчество привело к тому, что мы сами запутались в связях и в составе этих скриншотов. На распутывание этого клубка ушло целых двое суток.
Но и это ещё не все. Мы принесли прототип к клиентам и ждали четыре минуты, пока он откроется. Было очень неловко.
Не делайте прототипы раздутыми. Лучше разбейте на несколько сценариев и тестируйте более короткими отрезками. Для каких-то ветвей достаточно увидеть, что респондент попытался взаимодействовать с объектом.
5. Рисуйте отступы для компонент
В Figma есть очень удобная фишка с позиционированием объектов. И она хорошо работает, если вы точно знаете, как хотите изменить размер элемента и на сколько разъедется символ. Но что, если вам нужно сделать отступы по 8 px для кнопок с длиной, зависимой от текста?
Мне помогают бордеры: обычные полупрозрачные прямоугольники. Им можно задать правильный размер и поведение. Когда я делаю видимой группу с такими прямоугольниками, могу быстро подогнать размер символа относительно текста или другого содержимого. Они выглядят как padding и margin.
6. Загоняйте ячейки таблиц в компоненты
Если сделать компонентами ячейки таблицы, жить станет намного проще. Чаще всего эти компоненты хранят в себе бордер и пример текста. Ещё можно включать туда другие символы, например, кнопки или селекты.
Чтобы составить таблицу из таких запчастей, нужно потратить чуть больше времени и растягивать каждую ячейку на нужную длину. Но если вдруг вы решите изменить размер шрифта или стиль бордера, вы сэкономите гору времени. А ещё так гораздо проще отслеживать консистентность отступов между колонками.
Комментарий недоступен
Кажется, вы сами показали уровень ;)
Вы точно понимаете что такое такое Фигма?
Чувак, ты походу действительно не понимаешь о чем идет речь.
нормальные офлайн граф. редакторыЭто ты о PS? Если да, то это действительно нормальный граф редактор и только. Но это не инструмент для создания интерфейсов и и прототипирования (о чем как раз и говорится в статье). PS был создан для работы с фото. Ну это ты наверное и сам знаешь.
Раньше в нем делали всё. Теперь есть Sketch, Figma и пр. подобные. И слава небесам! В Figma есть библиотеки, компоненты, стили, удобный "человеческий" интерфейс, режим просмотра на разных устройствах и еще много что, чего нет в PS и "нормальных оффлайн. редакторах".
Кто-то упомянул, что мировые гиганты перешли на Figma. Наверное не зря, как думаешь?
Работа о которой говорят в статье, в Figma делается в разы быстрее. Но, что самое главное, весь результат работы очень гибок и поддается правкам на лету, благодаря тем же компонентам, стилям и библиотекам. Меняешь в одном месте, меняется во всех макетах. Попробуй поправить стили в PS. А? Получится изменить стили заголовков в 50 макетах на лету?
"Поймите одну простую вещь - если мы каждый день решаем сложные задачки, мы становимся умнее. Если же мы каждый день двигаем элементы, мы становимся тупее."А про это... Ну это вообще высер курам на смех. Т.е. ты считаешь, что надо намеренно усложнять свою работу, используя неудобные инструменты? Не завидую тебе. Куда целесообразно упрощать свою работу за счет удобного инструмента, чтобы делать сложные вещи.
Ты либо не изучал вопрос, либо жирный тролль и шутишь совсем не элегантно. И да, Figma не граф. редактор. И его онлайновость — его сильная сторона.
Судя по всему, уважаемый Александр, вы очень далеки от реалий работы дизайнера. Photoshop прекрасный, мощный инструмент, но он ВООБЩЕ не подходит для разработки дизайна сайтов и интерфейсов. У него совсем другие задачи, которые лежат в корне его названия.
Расскажете нам когда будут другие подобные сервисы ))
https://skillbox.ru/media/design/chto_takoe_figma/
Вы наверное понятие не имеете, что такое дизайн-система и как это все работает, поэтому не нужно показывать окружающим свою некомпетентность, а лучше изучите этот вопрос глубже и вопросы отпадут сами собой.
"А фигма предлагает готовые решения" ну нет, так же все отрисовываешь под клиента сам с нуля, или вы только китами с инета пользуютесь.
Нормальные офлайн граф. редактор?
И чтобы для интерфейсов и прототипирования, и для больших команд, и еще с возможностью создания компонентов для Дизайн-систем(цвета, блоки, типографика) это какой?
У каждого редактора своя ниша и это НОРМАЛЬНО! Фигма очень популярная потому что ее выбирают сами специалисты(Дизайнеры) им она заходит, это здоровая конкуренция.
Ваша картина мира про отупление - это банальный когнитивный обман.
🤦🏼♂️🤦🏼♂️🤦🏼♂️
Только Paint, только хардкор!
Регнулся даже ради тебя, что бы сказать какую чушь же ты несешь про фигму, с псевдоумнейшим видом...
Александр, сколько тебе лет?))))) что ты пишешь) коры вообще)
вот и рассказывай потом заказчику, что ты на 3 дня проект дольше делал, потому что рутинное действие (какую-нибудь правку) исправлял в своем фотошопе, залезая на каждую страничку, когда в фигме ты мог на это потратить пару минут и остальное время посвещать по-настоящему великим задачам. Да что, мы тут ему доказываем)))) хочешь херней страдать, вэлком. конкурентов меньше. изменяй каждую кнопку в фотошопе целый день, пока остальные будут уже пилить потрясающую анимацию на свои интерфейсы
Комментарий недоступен
Читала дальше и страдала каждый раз при встрече с "длинна".
спасибо, исправила. Бывает)
Комментарий недоступен
Посмотрим как вы в чебурнете своей фигнямой будете пользоваться.
Как сдеать чтобы она грузилась быстро и не тормозила?
У меня после недавнего апдейта стала тормозить в браузере, с десктопной всё хорошо
Это зависит от скорости вашего интернета, кол-ва запчастей в документе (сколько грузить) и еще проверьте, не включен ли VPN, у меня из-за этого дикие лаги бывали.
По пятому пункту. Не обязательно рисовать прямоугольники бордерами. Достаточно задать текстовому полю Constraints по правому и одновременно левому краю. Учитывая, что ваша кнопка - это фрейм. Теперь при ресайзе символы которые не влезли будут скрываться, это поможет вам настроить правильную ширину кнопки и оставить нужные отступы (менять ширину или высоту объекта можно кнопками CMD+стрелки)
Да, я тоже пользуюсь стрелками при изменении длинны в полях с размером:)
Я это делаю, что бы видеть на сколько растягивать или сжимать кнопку. Если сделать как вы говорите, то я не сожму меньше, чем ширина текста. Потому что шрифт съедет, но вот длиннее, чпм нужно сделать могу
Говно и фигма и скетч. Адоб вечен. Плевать на тех. Вопросы. Главное реализация проекта, когда пиздодельные коллеги игнорят и тени и обводки и кубикбезье. Всем поебать. Хуяк Хуяк и в прод. А я ведь рисовал. И писал css. Всем насрать. Хвячим на глазок. Суко(
Комментарий недоступен
Шесть советов для выживания в Figma:
1 Перейти на Sketch
...
Проще задать Layout grid
Комментарий недоступен
Если не знаете что такое Фигма, то зачем статью читать. Зачем мучать себя догадками?
Комментарий недоступен
Комментарий недоступен
XD быстрее всех на рынке сейчас
Подскажите пожалуйста, как увеличить разрешение нарисованных элементов в Figma? Когда выгружаю их в .jpg или .png качество отвратительное.
Не могу найти зачем в фигме есть возможность создавать страницы в дереве слева (Pages), но при этом все штапмпуют страницы в виде фреймов внутри одной страницы.
Только начинаю смотреть на фигму, жду соотвествующего ответа )
Спасибо.
как минимум для того, чтобы сэкономить на бесплатной версии, ведь каждый проект можно на отдельной странице создавать , а не доплачивать за отдельные. но это больше "лайфхак", основной причины тоже пока не хзнаю