Figma — графический редактор, который помогает проектировать интерфейсы, сайты, макеты изданий. Рассказываем, как ускорить работу в нём с помощью стилей, компонентов, ограничителей и горячих клавиш.
1. Шаблонизируйте цвета и шрифты
Шаблоны цветов и шрифтов помогут быстро использовать стандартные стили и не вспоминать каждый раз, какие цвета вам нужны для плашек и кнопок и какого кегля у вас заголовки и основной текст.
Как создать стиль цвета:
- Выделите любой объект на макете.
- Перейдите в пункт Fill («Заливка») и нажмите на квадратную иконку из кружков.
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.
Со стилями текста принцип тот же, что и с цветами:
- Выделите любой текст на макете.
- Перейдите в пункт Text и нажмите на квадратную иконку из кружков.
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Text нажмите на иконку из кружков и выберите нужный шаблон.
Стиль в любой момент можно отредактировать:
- Выберите элемент, стиль которого нужно изменить.
- Наведите на него курсор и нажмите на иконку, похожую на эквалайзер, — откроется редактор цвета или шрифта.
После обновления стиля автоматически обновятся все элементы, где этот стиль используется:
Стили могут выручить на встрече с арт-директором или клиентом. Например, неподходящие цвета можно изменить в два клика без переделки всего макета.
Называйте стили осмысленно, чтобы потом не запутаться в своей палитре. Например, название Blue-text может означать цвет заголовка или основного текста — непонятно, а название Link-color сразу передаёт смысл — цвет для ссылок.
2. Используйте компоненты
Работая над интерфейсами или сайтами, дизайнеры часто используют стандартные элементы: кнопки, плашки, поля ввода, ссылки. Чтобы бесконечно не копировать одно и то же, создайте из стандартных элементов компоненты.
Создайте компонент, выбрав любой фрейм и на верхней панели, затем нажмите на иконку с ромбиком:
Компонент создан, теперь вы можете поместить его копию в любое место на макете. Для этого переключитесь на панели слоёв во вкладку Assets и перетащите нужный компонент на макет:
Как и стили, компоненты можно изменить сразу на всём макете. Для этого выберите основной компонент и измените в нём что-нибудь — все копии компонента на макете изменятся в соответствии с оригиналом:
Если весь ваш макет будет состоять только из компонентов, вам будет сложно в нём что-то изменить. Лучше делать компоненты только из стандартных элементов: кнопок, плашек, полей ввода, ссылок.
3. Пользуйтесь ограничителями
Сайты должны быть удобными на любом устройстве: на телефоне, планшете, ноутбуке или компьютере с огромным монитором. Дизайнер учитывает каждый экран при проектировании интерфейса сайта или приложения.
Чтобы каждый раз не перевёрстывать весь макет под разные экраны, в Figma предусмотрены ограничители — Constraints. Они фиксируют элемент в определённой точке макета и при изменении ширины или высоты макета не меняют своего положения.
Соберём с помощью ограничителей шапку для сайта.
1. Создайте фрейм размером с iPhone 5 SE — 320×568 пикселей:
2. Внутри этого фрейма создайте ещё один, растяните его на всю ширину экрана и поставьте в самом верху:
3. Укажите на панели Сonstraints выравнивание Left and right и Top:
Готово — теперь шапка будет растягиваться за макетом, как бы вы ни меняли его размер:
В шапку можно добавить кнопки и ссылки. С помощью ограничителей вы сможете научить их также адаптироваться под любую ширину экрана:
Таким образом, вы сможете проверить, как выглядит сайт или приложение на любом экране, и заранее скорректировать то, что выглядит плохо.
4. Запомните горячие клавиши
Горячие клавиши — самый сильный буст продуктивности в любой программе. Гораздо быстрее нажать две кнопки, а не тянуться курсором в меню и выбирать то, что вам нужно.
Для начала запомните базовые горячие клавиши:
- Ctrl (⌘) + N — создать новый файл;
- Ctrl (⌘) + W — закрыть файл;
- Ctrl (⌘) + Alt + K — создать компонент;
- Ctrl (⌘) + G — объединить объекты в группу;
- Ctrl (⌘) + Alt + G — объединить объекты во фрейм;
- I — пипетка для выбора цвета;
- Минус (−) и плюс (+) — уменьшить и увеличить масштаб;
- Ctrl (⌘) + B, I, U — сделать текст жирным, курсивным, подчёркнутым;
- Alt + H — выровнять по центру по горизонтали;
- Alt + V — выровнять по центру по вертикали.
#figma #лайфхакидлядизайнеров #лайфхакиFIGMA
Про легендарные моменты с премии Оскар, читайте по ссылке: