Шесть советов для выживания в Figma

Шесть советов для выживания в Figma

Мы с командой пересели на Figma полтора года назад. Переезд дался легко, привыкли быстро. Но вот потом набили несколько неприятных шишек. И я решила поделиться опытом.

1. Не меняйте текст в компоненте из библиотеки

Мы собрали около 100 документов, внутри каждого от 20 до 100 фреймов. Все эти скриншоты были с кнопками, инпутами, чекбоксами и другими компонентами.

В один момент мы решили перевести макеты с русского на английский язык. В том числе и в UI-ките. Казалось бы ничего страшного, ведь если в символе были сделаны какие-то изменения, то даже если компоненту обновить, всё сохранится.

Итог был удручающим. У нас слетели названия всех кнопок, селектов, инпутов. Вообще всех символов, которые успели потрогать. И что самое печальное, откат действий в библиотеке не помог вернуть тексты в документах.

Шесть советов для выживания в Figma

Говорят, что разработчики Figma уже починили этот трюк. Но мы, уже наученные опытом, стараемся не трогать текст в компонентах, только стили.

2. Дробите библиотеки компонентов

Шесть советов для выживания в Figma

У нас в проекте есть несколько библиотек. Казалось бы, можно все слить в один файл и разместить на нескольких страницах внутри документа. Но как показывает практика, чем меньше объектов в библиотеке, тем проще искать нужный. Да и вес файла меньше, а значит, он открывается быстрее.

Когда создаете новый документ, просто включаете нужную библиотеку к документу.

3. Страницы и попапы тоже могут быть компонентами

Шесть советов для выживания в Figma

Загоняйте в символы стандартные паттерны страниц, не только меню, но и, например, попапы или empty state. Зачем? Во-первых, ваши разработчики скажут вам спасибо за стандартизацию. Например, у нас в системе есть три вида попапов в трёх размерах (стандартный, alert, success). Всего получается девять шаблонов. Во-вторых, вы не будете тратить время на позиционирование элементов. А в-третьих, вы упростите жизнь тем коллегам, которые Figma в руках держат впервые, а собрать что-то нужно. Наши продакты одобрили.

4. Дробите прототипы

Как-то нам нужно было протестировать новый способ распределения задач на фрилансеров клиентом. Там было очень большое дерево вариантов экранов. Около 60 скриншотов. Мы хотели сделать тестирование правдоподобным и просчитать всё. Это творчество привело к тому, что мы сами запутались в связях и в составе этих скриншотов. На распутывание этого клубка ушло целых двое суток.

Но и это ещё не все. Мы принесли прототип к клиентам и ждали четыре минуты, пока он откроется. Было очень неловко.

Не делайте прототипы раздутыми. Лучше разбейте на несколько сценариев и тестируйте более короткими отрезками. Для каких-то ветвей достаточно увидеть, что респондент попытался взаимодействовать с объектом.

5. Рисуйте отступы для компонент

В Figma есть очень удобная фишка с позиционированием объектов. И она хорошо работает, если вы точно знаете, как хотите изменить размер элемента и на сколько разъедется символ. Но что, если вам нужно сделать отступы по 8 px для кнопок с длиной, зависимой от текста?

Мне помогают бордеры: обычные полупрозрачные прямоугольники. Им можно задать правильный размер и поведение. Когда я делаю видимой группу с такими прямоугольниками, могу быстро подогнать размер символа относительно текста или другого содержимого. Они выглядят как padding и margin.

6. Загоняйте ячейки таблиц в компоненты

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

Чтобы составить таблицу из таких запчастей, нужно потратить чуть больше времени и растягивать каждую ячейку на нужную длину. Но если вдруг вы решите изменить размер шрифта или стиль бордера, вы сэкономите гору времени. А ещё так гораздо проще отслеживать консистентность отступов между колонками.

Шесть советов для выживания в Figma
3636
70 комментариев

Комментарий недоступен

9
Ответить

Кажется, вы сами показали уровень ;)

50
Ответить

Вы точно понимаете что такое такое Фигма?

32
Ответить

Чувак, ты походу действительно не понимаешь о чем идет речь.

нормальные офлайн граф. редакторы

Это ты о PS? Если да, то это действительно нормальный граф редактор и только. Но это не инструмент для создания интерфейсов и и прототипирования (о чем как раз и говорится в статье). PS был создан для работы с фото. Ну это ты наверное и сам знаешь.

Раньше в нем делали всё. Теперь есть Sketch, Figma и пр. подобные. И слава небесам! В Figma есть библиотеки, компоненты, стили, удобный "человеческий" интерфейс, режим просмотра на разных устройствах и еще много что, чего нет в PS и "нормальных оффлайн. редакторах".

Кто-то упомянул, что мировые гиганты перешли на Figma. Наверное не зря, как думаешь?

Работа о которой говорят в статье, в Figma делается в разы быстрее. Но, что самое главное, весь результат работы очень гибок и поддается правкам на лету, благодаря тем же компонентам, стилям и библиотекам. Меняешь в одном месте, меняется во всех макетах. Попробуй поправить стили в PS. А? Получится изменить стили заголовков в 50 макетах на лету?

"Поймите одну простую вещь - если мы каждый день решаем сложные задачки, мы становимся умнее. Если же мы каждый день двигаем элементы, мы становимся тупее."

А про это... Ну это вообще высер курам на смех. Т.е. ты считаешь, что надо намеренно усложнять свою работу, используя неудобные инструменты? Не завидую тебе. Куда целесообразно упрощать свою работу за счет удобного инструмента, чтобы делать сложные вещи.

Ты либо не изучал вопрос, либо жирный тролль и шутишь совсем не элегантно. И да, Figma не граф. редактор. И его онлайновость — его сильная сторона.

18
Ответить

Судя по всему, уважаемый Александр, вы очень далеки от реалий работы дизайнера. Photoshop прекрасный, мощный инструмент, но он ВООБЩЕ не подходит для разработки дизайна сайтов и интерфейсов. У него совсем другие задачи, которые лежат в корне его названия.

5
Ответить

Расскажете нам когда будут другие подобные сервисы ))

https://skillbox.ru/media/design/chto_takoe_figma/

1
Ответить

Вы наверное понятие не имеете, что такое дизайн-система и как это все работает, поэтому не нужно показывать окружающим свою некомпетентность, а лучше изучите этот вопрос глубже и вопросы отпадут сами собой.

1
Ответить