реклама
разместить

Шесть советов для выживания в 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
Раскрывать всегда
Ралли Деда Мороза. Пополнил брокерский счёт на 238 000 в декабре. Что купил? Часть 2

Заканчивается декабрь, а с ним и 2024 год, да и бюджет, выделенный на инвестиции, тоже. ЦБ оставил ключ на 21, случился локальный туземун. Я продолжаю инвестировать по своему плану. Кроме 238 000 дополнительных пополнений не было, только многочисленные купоны и дивиденды от Лукойла, ФосАгро и Европлана.

Ралли Деда Мороза. Пополнил брокерский счёт на 238 000 в декабре. Что купил? Часть 2
1010
11
реклама
разместить
💣 ИНФЛЯЦИИ приказали снизиться.. и она послушалась. Как за одно заседание вдохнуть жизнь во весь рынок?

Почему кредиты становятся недоступными, вклады теряют привлекательность, а фондовый рынок улыбается в 33 зуба? Ответ есть..

💣 ИНФЛЯЦИИ приказали снизиться.. и она послушалась. Как за одно заседание вдохнуть жизнь во весь рынок?
1212
11
Что такое нейромаркетинг? Как мозг помогает продавать?

Нейромаркетинг — это наука, которая изучает бессознательные реакции человека. Она родилась на стыке маркетинга, когнитивной психологии и нейробиологии.


Термин «нейромаркетинг» был введен относительно недавно — в 2002 году. Его предложил профессор Роттердамского университета Эйл Смидс. Тогда ученые хотели лучше понять потребителей, их реакцию на разн…

11
11
Что не забыть сделать перед длинными праздниками? 🎉

Шуточный чек лист. Конечно же закупить облигациями😉

Что не забыть сделать перед длинными праздниками? 🎉
88
Почему Яндекс изменяет данные в карточке компании на Яндекс Картах и как это контролировать

На Яндекс Картах часто случаются неожиданные изменения, которые вносятся автоматически. Вам может показаться, что все данные под вашим контролем, но Яндекс иногда решает иначе. Разберемся, как это работает и что с этим делать.

Почему Яндекс изменяет данные в карточке компании на Яндекс Картах и как это контролировать
66
11
Объём рынка кинопроката в России превысил 43 млрд рублей в 2024 году, восемь российских фильмов собрали более 1 млрд — министр культуры

По её словам, доля зрителей российских фильмов в отечественном прокате составила 78%.

1414
55
11
Это те российские фильмы, у которых на "предсеансовое обслуживание" включают нормальные голливудские картины?
РЖД протестировали робособак на потенциально опасных участках железной дороги

Оценили, как роботы следуют прописанному алгоритму, перемещаются по инфраструктуре и сколько времени могут работать без подзарядки.

2424
1717
11
11
11
На такой робособаке можно торговать пивом и сухариками на платформах.
Как настроить динамические объявления в Яндекс.Директ: автоматизация рекламы?

Сегодня хотел бы рассказать о том, как настроить динамические объявления в Яндекс Директ.

Как настроить динамические объявления в Яндекс.Директ: автоматизация рекламы?
66
Производители предупредили ритейлеров о росте отпускных цен на газировку и соки с 2025 года — «Ъ»

В частности, компании якобы ссылаются на рост издержек, высокую инфляцию и повышение акцизов.

77
33
11
Скоро: Этот год был — непростым — сложным — тяжёлым — трудным Выбери правильный ответ!
[]