Дизайн сайта в Figma: проще и быстрее

6 причин популярности редактора Figma

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

Еще не так давно для организации командной работы дизайнеров каждому специалисту необходимо было установить у себя специальную программу вроде Adobe Illustrator, скачать на свой компьютер макет, настроить интерфейс и затем после любых правок отправлять на проверку откорректированные файлы. Принцип действия редактора Figma совершенно отличается.

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

Figma снискала себе популярность по целому ряду причин:

• Возможность организации совместной работы.

Особенно это ценная опция, когда речь идет о масштабных проектах. Вообще, Figma – единственный графический дизайнер, позволяющий объединить в одном рабочем пространстве всех необходимых специалистов (в качестве добавленных пользователей):

• дизайнеры в едином окне выполняют отрисовки;
• верстальщики корректируют и редактируют файл;
• менеджер следит за всем процессом, управляет им, указывает на проблемные места;
• разработчики вносят свои коррективы еще до момента подачи проекта на согласование заказчику. Это позволяет изначально вынести оценку предстоящим работам, продумать дизайн, чтобы в процессе реализации было меньше проблем.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

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

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31954

Внутри дизайнерского окна каждый из специалистов может задавать вопросы, писать свои комментарии, что значительно упрощает весь процесс работы. Это, в частности, касается согласования рабочих моментов, на обсуждение которых в чате обычно уходит довольно много времени. Приложение сохраняет в истории файла все написанные к нему комментарии.

Настройки приватности тоже предусмотрены достаточно гибкие:

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

• Все рабочие файлы сохраняются в облаке.

Сохранение материалов (на срок 30 дней) в собственный облачный сервис происходит на автомате. При этом макеты можно в любой момент открывать, копировать, редактировать. Любые исправления тоже сохраняются в автоматическом режиме.

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

• Адаптация под любые платформы.

Макет открывается на любом устройстве, компьютере, ноутбуке, планшете или на мобильнике. При этом не важно, какой операционной системой пользуется специалист. Необходимо лишь, имея надежное интернет-соединение, просто авторизоваться через свой профиль и войти в программу. Для рабочего устройства достаточно скачать на официальном сайте Figma специальный редактор и установить его.

• Широкий набор функциональных возможностей.

В бесплатной версии Figma есть все для того, чтобы специалист мог самостоятельно создать дизайн сайт. Вот что тут доступно для использования:

• все возможности редактора, плюс еще набор расширенных опций для рисования, такие как — Smart Selection, Vector Networks, Arc Tool;
• можно заниматься проектом вместе с одним напарником, обмениваться комментариями по макетам и прототипам, демонстрировать их заказчику;
• функция просмотра всей истории правок макета по интересующей дате и времени за весь срок работы и еще в течение 30 дней после ее окончания;
• возможность параллельно вести сразу три разных проекта;
• набор шаблонов и плагинов.

Пакет Professional дает дизайнерам возможность записывать внутри приложения аудио-комментарии, работать в закрытом режиме и показывать прототипы, не давая доступ к исходнику. Число привлекаемых специалистов не ограничено, все они могут вносить правки одновременно. Очень подходящая версия для работы над масштабными проектами.

Читайте также!

Перенос макета из Figma в Tilda: как сделать быстро

Подробнее

В пакет Organization для работы дизайнера выделяется отдельная ветка. По окончании правок все изменения вносятся в исходник. Программа сообщает о противоречащих друг другу изменениях и дает возможность выбрать, что оставить в проекте. В режиме моделирования отображаются все разработанные ветви. Руководитель настраивает одну учетную запись для всей команды, единый вход осуществляется через SALM, управление – через SLIM.

• Интеграция с другими приложениями.

Если переносить проект из Sketch или Zeplin в Figma, то сохраняются шрифты, картинки, кривые. Плюс у верстальщиков есть возможность задействовать для сервиса мессенджеры вроде Slack, Confluence и прочее.

Только до 25.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

• Сохраняется история версий.

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

Минусы работы в Figma

• Мало инструментов для правки текстов.

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

• Для работы нужен интернет.

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

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

Верстальщики часто озвучивают эту проблему. Приходится действовать методом «проб и ошибок». Ситуация усугубляется, если дизайнер накосячил с настройкой текста или не убрал прозрачный фон.

• Слои перекрывают друг друга.

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

• Неактуальные плагины.

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

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

• Не предусмотрена темная тема.

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

Элементы дизайна сайта, доступные в Figma

Через редактор Figma можно создать интерфейс со всеми его элементами, сделать прототип сайта и приложения, отрисовать картинки, проработать векторные файлы.

• Прототип сайта.

По сути – это модель, по которой заказчик видит, как пользователь будет взаимодействовать с площадкой. Дизайнер отрисовывает для прототипа экраны и устанавливает между ними связи.

Общий вид сайта можно сразу показать клиенту на экране любого устройства (в Фигме предусмотрена такая опция).

• Интерфейс, то есть, внешний вид сайта.

С помощью редактора можно устанавливать на сайте кнопки, иконки, формы обратной связи. Есть дополнительные настройки эффектов, позволяющие раскрывать списки, добавлять анимацию в блоки и всплывающие окна, делать кнопки кликабельными.

• Файлы векторной графики.

Инструментарий для работы с векторной графикой в Figma предусмотрен. Это позволяет представлять дизайн в формате SVG, импортировать объекты векторные файлы из программ Adobe Illustrator или Sketch.

Что еще есть полезно в Figma для создания дизайна сайта?

Тут есть возможность делать проекты с Диаграммой Гранта, создавать рекламные блоки по шаблонам Facebook*. Это полезные опции для предпринимателей, менеджеров проектов, специалистов по SMM.

Режим Developer Handoff предусмотрен специально для разработчиков. Тут с помощью направляющих определяются размеры объектов и расстояния между ними, можно копировать CSS-стили элементов, а также коды для операционных систем Android и iOS.

Работа с дизайном в приложении

Figma позволяет формировать команды, разрабатывать проекты. Для начала зайдите на figma.com и создайте новый файл через меню или нажав cmd + N.

Далее можно приступать к настройке фреймов, макетов, слоев, сеток, типографики и прочих элементов интерфейса.

Читайте также!

Работа с Figma – регистрация и первые шаги

Подробнее

• Создание макетов, сеток.

Выделяете нужный вам слой, заходите в «Design» на панели справа и там кликаете «Layout grid». Тут задаете размер, прозрачность, цвет. Для указания формы сетки выбираете в настройках столбцы либо строчные ряды. Можно применять одновременно несколько макетов, для переходя от одного к другому жмите Ctrl + G.

• Проверка прототипов.

Опция позволяет просматривать, как будущий сайт будет смотреться на разных девайсах. На панели справа заходите в «Prototype» ® «Device» и тут находите интересующее устройство (нужный размер экрана будет указан).

В настройках доступно изменение цвета модели и установка вертикального либо горизонтального расположения. Чтобы проверить, как будет смотреться прототип на выбранном устройстве, нажмите справа от «Share» кнопку «Present».

• Добавление изображений.

При создании дизайна сайта в Figma картинки можно брать откуда угодно, из интернета либо из памяти компьютера. Только помните о таком моменте, как авторские права.

Кроме того, графический редактор программы позволяет переустанавливать некоторые параметры и применять наложение эффектов. Для этого выделяете картинку, и справа появится панель, через которую доступны эти опции.

• Использование библиотеки компонентов.

В разделе «Компоненты» можно сохранять создаваемые вами элементы и потом в других проектах тоже ими пользоваться. Сохранять просто: выделяете выбранный объект и жмете Ctrl + Alt + K. В панели слоев значок элемента после этого поменяется.

Причем если в основном варианте элемента вы что-то поменяете, программа внесет эти изменения и в сохраненные копии. Библиотека компонентов находится во вкладке «Assets» на панели слева.

• Стили и цвета.

Программа позволяет задавать изменения стилей одновременно для нескольких элементов и еще компоновать свою цветовую гамму. Просто выделяете созданный объект и жмете на появившуюся квадратную кнопку.

Читайте также!

Резюме дизайнера: баланс между креативом и информативностью

Подробнее

• Управление слоями, группами.

Тут процесс примерно как в Photoshop. Можно формировать группы, устанавливать нужные элементы на переднем или заднем плане. Управление находится во вкладке «Layers» на панели слева.

• Командное использование.

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

Для приглашения в макет новых пользователей выбираете нужную команду, а затем в открывшемся окне жмете «Invite» (в углу справа). Здесь пишете имя пользователя, открываете ему право на просмотр либо редактирование и отправляете приглашение.

Совместную работу можно настроить и по-другому, к примеру, через кнопку «Share». Открываете нужный проект, жмете «Share», устанавливаете права и отсылаете приглашение. Либо просто копируете ссылку и отправляете тому, кому нужно.

• Работа с типографикой.

Figma по умолчанию использует шрифты Google. Применение шрифтов со своего компьютера (для десктопной версии) доступно через установку специального плагина Font Helper.

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

• Плагины.

Создание дизайна сайта в Фигме подразумевает возможность использования плагинов, перечисленных в разделе «Community» на главной странице (вкладка «Explore»).

Например, как вставить картинку из Unsplash? Кликаете правой кнопкой мыши по любой области в Фигме (пусть даже по рабочему элементу), выбираете раздел «Plugins» и там в подразделе открываете «Unsplash». Появится окно, в котором остается выбрать картинку и затем ее вставить.

• Работа с фреймами.

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

Вообще, в Figma для создания дизайна сайта есть масса полезных интеграций и опций. Пусть программа не превосходит по своему функционалу профессиональные конструкторы и традиционные редакторы, однако она «берет» универсальностью. По сути, на Figma можно сделать полную прорисовку сайта. Поэтому данный сервис рекомендуется изучить не только начинающим, но и опытным программистам со стажем.

*Facebook — организация, деятельность которой признана экстремистской на территории Российской Федерации.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование