Дизайн
Olga Toporkova
7232

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Olga Toporkova", "author_type": "self", "tags": [], "comments": 64, "likes": 39, "favorites": 148, "is_advertisement": false, "subsite_label": "design", "id": 74134, "is_wide": false, "is_ugc": true, "date": "Thu, 04 Jul 2019 23:04:27 +0300", "is_special": false }
0
{ "id": 74134, "author_id": 273370, "diff_limit": 1000, "urls": {"diff":"\/comments\/74134\/get","add":"\/comments\/74134\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/74134"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
64 комментария
Популярные
По порядку
Написать комментарий...
–60

Фигма - это фиг#@
Есть же нормальные офлайн граф. редакторы, в которых можно нарисовать что угодно.
А фигма предлагает готовые решения и чуть кастома.

Так что, извините, тут как с вордпрессом или, что еще хуже, виксом или тильдой - показывая прототипы в фигме, вы показываете свой уровень.
Которого нет ;)

Ответить
43

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

Ответить
28

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

Ответить
–10

Вы меня за дурака держите? Прототипирование и интерфейсы.
Если что-то иное, расскажите - интересно будет почитать.

Ответить
3

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

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

Ответить
–1

Давайте не будем растекаться мыслью по древу - я прошу конкретику.
А то ведь следующим шагом будет преимущество вордпресса над другими CMS.

Ответить
3

Фигма прекрасна своим удобством пользования и не более. В PS больше возможностей, но он сложнее для понимания и изучения. Тем не менее, с помощью фигмы можно сделать практически все что угодно. Посмотрите, что моя компания может сделать с PowerPoint, я уверен вы об этом и не знали: https://drive.google.com/file/d/1Rq0NmiNREbVmojj_nUaNdrXnFtX7f16e/view?usp=sharing

Ответить
–20

"но он сложнее" - вот и отвечаете самостоятельно на мои вопросы ;)
сейчас весь мир подмахивает в сторону, где проще и где быстрее

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

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

Ответить
27

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

Ответить

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

18

1) Есть задача и есть инструменты для ее решения.
2) Простой инструмент лучше чем сложный инструмент.
3) Не еби моск себе и окружающим без особой необходимости.

Ответить
6

Можно ещё код в блокноте писать, а за знаниями не в интернет, а в библиотеку ходить) И лучше в самую дальнюю чтобы сильнее и умнее быть) если по делу то упрощение работы нужно для того чтобы за короткий срок справляться с бОльшим количеством работы, можно и в гимпе на линуксе ковыряться и отказаться от граф интерфейсов, только зачем? х) чтобы стать умнее? Серьёзно?) Умный тот кто умеет сделать дохрена пошевелив пальцем левой ноги, а не тот кто может огонь камнем добывать имхо)

Ответить
0

как говорят: "Лень-двигатель прогресса". Ведь разве не поэтому мы вводим ИИ в повседневную жизнь? А можно было ведь сложно и затратно решать задачи:D

Ответить
1

Егор, Вы передёргиваете.
Лень - двигатель, когда, допустим, сисадмин внедряет автоматизацию на скриптах.
Но это ни черта не двигатель, когда вам предлагают кастрированный инструмент с визардами и готовыми элементами.

Ответить
6

Да в фирме нет готовых элементов, господи, блин, ну вы хоть открыли да посмотрели ее перед тем как комментарии строчить!

Ответить
0

Вот тут интересно) Визарды это ведь тоже автоматизация. Не согласны?)

Ответить
–2

Конечно, нет. Визарды - для юзеров ;)

Если я всю жизнь рабочую был сисадмином - и мне нужны были кастомные настройки в винде, чтобы куда-то туда случайно не жамкнуть, плюс линукс (назовём это всё так) вообще никаких визардов не подразумевает — конечно, никаких визардов, это ж для домохозяек, что (вспоминаем установщик винды 98) откинулись на спинку кресла.

Если же закинуть за автоматизацию - я не понимаю, что в прототипах можно автоматизировать. Или в интерфейсах пользовательских.
Любой проект - это кастом. Нельзя тащить туда чужие блоки.

Ответить
0

Фигма – заточенный под интерфейсы фотошоп, если вам будет угодно. Это самый удобный и надежный вариант на данный момент(скетч я тоже уважаю, не бомбите:)). Не знаю почему вы думаете, что фигма это про готовые компоненты.

Ответить
0

Я не могу понять это жирно или тонко)

Ответить
5

В PS больше возможностей, но он сложнее для понимания и изучения

И не используется в нормальных компаниях уже лет 5.

Ответить
1

Это был просто пример оффлайн граф редактора :D

Ответить
3

Какую конкретику вы просите? Рассказать как пользоваться программой?

И причем здесь CMS вообще? Это граф. редактор. На него люди со Скетча активно переходят.

Ответить
3

А чем вам WordPress не нравится? Кроме случаев, когда его используют для магазинов, конечно же.

Ответить
–4

Фигмой пользуются в Твиттере

Нахрена? Что там такого эволюционирует в интерфейсах Твиттера за годы, что без Фигмы никуда?

Ответить
0

Скорее интерфейсы, прототипирование там на базовом уровне, вы правы, но для этого есть множество других тул, куда можно импортировать макеты из Figma. А для рисования аналогов толковых, кроме Sketch, нет. Народ зацепился в комментах, вероятно, именно за прототипирование — хотя если нужно просто последовательность экранов для проклика показать, и какие-то базовые эффекты — почему бы и не в Figma это сделать.

Ответить
17

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

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

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

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

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

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

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

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

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

Ответить
4

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

Ответить
0

Сколько хайпа набрал человек который написал, что не видит преимуществ в Figme))

"Есть же нормальные офлайн граф. редакторы, в которых можно нарисовать что угодно.
А фигма предлагает готовые решения и чуть кастома."

1) Плюшка Фигмы, что это как раз онлайн редактор (хоть есть и десктоп)
2) Отличный инструмент для прототипирования
3) Не особо понял про CMS

Ответить
1

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

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

Ответить
1

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

Ответить
0

"А фигма предлагает готовые решения" ну нет, так же все отрисовываешь под клиента сам с нуля, или вы только китами с инета пользуютесь.

Ответить
0

Нормальные офлайн граф. редактор?
И чтобы для интерфейсов и прототипирования, и для больших команд, и еще с возможностью создания компонентов для Дизайн-систем(цвета, блоки, типографика) это какой?

У каждого редактора своя ниша и это НОРМАЛЬНО! Фигма очень популярная потому что ее выбирают сами специалисты(Дизайнеры) им она заходит, это здоровая конкуренция.

Ваша картина мира про отупление - это банальный когнитивный обман.

Ответить
0

🤦🏼‍♂️🤦🏼‍♂️🤦🏼‍♂️

Ответить
0

Только Paint, только хардкор!

Ответить
4

sucsess

Дальше не читал.

Ответить
4

Читала дальше и страдала каждый раз при встрече с "длинна".

Ответить
0

И вам спасибо) нашла ошибку, правда только одну, возможно еще где-то пропустила, но ctrl+f больше не показал ничего(

Ответить
1

В статье было 2 + ваши комментарии.

Ответить
0

2 было с одной н, все верно) еще раз спасибо, в комментариях я не могу поправить текст( но классно, что вы видите такие ошибки. Мне вот не дано проверять орфографию так внимательно(

Ответить
0

Не за что.
"...проверять орфографию так внимательно" - я не специально, оно само! )

Ответить
0

спасибо, исправила. Бывает)

Ответить
0

Хедр, ёпта

Ответить
4

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

Ответить
2

Как сдеать чтобы она грузилась быстро и не тормозила?

Ответить
1

У меня после недавнего апдейта стала тормозить в браузере, с десктопной всё хорошо

Ответить
8

Комментарий удален по просьбе пользователя

Ответить

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

1

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

Ответить
1

Вы точно из РФ?
В 2019 году без VPN?

Ответить
2

По пятому пункту. Не обязательно рисовать прямоугольники бордерами. Достаточно задать текстовому полю Constraints по правому и одновременно левому краю. Учитывая, что ваша кнопка - это фрейм. Теперь при ресайзе символы которые не влезли будут скрываться, это поможет вам настроить правильную ширину кнопки и оставить нужные отступы (менять ширину или высоту объекта можно кнопками CMD+стрелки)

Ответить
1

Да, я тоже пользуюсь стрелками при изменении длинны в полях с размером:)

Ответить
0

Я это делаю, что бы видеть на сколько растягивать или сжимать кнопку. Если сделать как вы говорите, то я не сожму меньше, чем ширина текста. Потому что шрифт съедет, но вот длиннее, чпм нужно сделать могу

Ответить
0

А в каких ситуациях вы это используете? Когда нужно длиннее сделать

Ответить
0

Например, у меня написано SAMPLE. Компонента сверстана так, что под ней есть фон = длинна текста + отступы. Текст спозиционирован так, одним из описанных вами способов.
Я меняю текст на DOWNLOAD. Длинна текста чуть больше. Значит либо расширится текстовое поле, если он центрирован и отступы до краев будут меньше. Либо левый край будет стоять как нужно, а правый торчать за пределы фона. Дальше я включаю группу с моими прямоугольниками и смотрю на сколько мне нужно растянуть символ что бы слева и справа были одинаковые отступы.
Примерно так же я работаю с таблицами: вижу, когда стоит сделать перенос, если по каким-то причинам не могу загнать текст в ограничения по ширине (так бывает, тк в таблицах колонки разной ширины, а компонент универсальный) или, например у меня этими бордерами размечены компоненты с шаблонами страниц и диалогов. В общем, много примеров. Надеюсь, ответила на вопрос)

Ответить
2

так как кнопка = компонент. Можно задать ей сетку как отступ. Один слой сетки лежит по правую сторону компонента, другой - по левую. Таким образом не нужно скрывать/показывать слои. Достаточно просто включить или выключить сетку хоткеем, что намного удобнее.

Ответить
0

Тоже годный вариант)

Ответить
0

Понял. Пишите ещё что-нибудь про Фигму, всегда интересно почитать как другие ребята работают

Ответить
2

Говно и фигма и скетч. Адоб вечен. Плевать на тех. Вопросы. Главное реализация проекта, когда пиздодельные коллеги игнорят и тени и обводки и кубикбезье. Всем поебать. Хуяк Хуяк и в прод. А я ведь рисовал. И писал css. Всем насрать. Хвячим на глазок. Суко(

Ответить
1

держи краба ))

Ответить
–3

Шесть советов для выживания в Figma:
1 Перейти на Sketch
...

Ответить
1

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

Проще задать Layout grid

Ответить
–7

Мы с партнёрами перешли на xBoosterLikeLBS...
И весь текст догадывайся, что это такое))
Вы бы хоть в начале дали краткий текст, что такое Фигма.

Ответить
1

Если не знаете что такое Фигма, то зачем статью читать. Зачем мучать себя догадками?

Ответить
0

Да хватит минусить) понял уже, что хуйню сморозил!!

Ответить
0

Народ, запилите кто-то сравнение Фигмы и ХД

Ответить
0

XD быстрее всех на рынке сейчас

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }