Эта статья — для дизайнеров, которые работают в Figma или начинают изучать редактор. Уверены: вы не знаете всех его функций. Разбираем 5 фишек, которые ускорят работу и позволят тратить меньше времени на рутинные действия в Figma
1. Моментальное изменение стилей кнопок
Часто возникает ситуация, когда уже есть один элемент дизайна, например, кнопка СТА с заливкой, и нужно создать аналогичную кнопку Secondary с обводкой. То есть, создать вариант кнопки. Чтобы быстро поменять эти стили местами, выделите кнопку и используйте сочетание клавиш Shift + X. Затем останется только изменить цвет текста.
2. Режим Dev Mode
В новой версии Figma 2023 года появился режим Dev Mode — рабочее пространство, которое связывает дизайнеров и разработчиков. С помощью Dev Mode можно «перевести» дизайнерские термины — формы, слои, группы — на язык разработчиков. Элементы дизайна в Dev Mode имеют атрибуты, упрощающие программирование. Помните, что можете установить метку «Ready to dev» для макета, чтобы показать, что он готов к разработке. Это можно сделать не только для секций, но и для фреймов. Переключение происходит с помощью одного тумблера.
3. Пошарить ссылку на отдельные страницы и фреймы
Не всегда коллеге или заказчику нужно (и не всегда хочется) показывать всю работу. В Figma можно поделиться не только ссылкой на весь файл, но и на отдельные страницы или фреймы. При этом, если фрейм имеет метку «Ready to dev», то расшаренная ссылка будет вести на рабочее пространство Dev Mode. Это удобно, если правки внесены в конкретный фрейм и нужно показать их разработчику. Отправьте ссылку на фрейм: к нему можно будет перейти напрямую без необходимости искать на странице. Не забудьте настроить доступ, кликнув на кнопку «Share».
4. Вставка текста с сохранением стиля
Как скопировать текст в Figma из другого источника, сохраняя шрифт, кегель, цвет и выравнивание? Чтобы это сделать, выделите текстовый элемент, нажмите сочетание клавиш Ctr + Shift + V, и текст будет вставлен с сохранением стиля.
5. Консистентность при задании скругления у фигур
Если вам нужно задать одинаковое скругление для двух фигур, причем одна из них меньше по размеру, вы можете столкнуться с проблемой, когда результат не выглядит естественно. Чтобы исправить это, обратите внимание на центр этих фигур. Он должен быть одинаковым. Для достижения этого вы можете сложить значение скругления меньшей фигуры и расстояние между ними.
На картинке показаны два фрейма с закруглениями по 20px. И визуально не сочетаются. Чтобы это исправить, к 20 прибавим 15 (расстояние между контурами) — и вуаля, красивые контуры готовы.
Надеемся, что эти пять фишек помогут в работе с Figma и сделают ваш дизайн-процесс более эффективным и продуктивным! Материал подготовлен дизайнером маркетингового агентства Webstripe.
