ГлавнаяБлогДизайн сайта в Figma: проще и быстрее
Дизайн сайта в Figma
06.01.2022
5 169
Время чтения: 15 минут

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

06.01.2022
5 169
Время чтения: 15 минут
Сохранить статью:
Сохранить статью:

В статье рассказывается:

  1. 6 причин популярности редактора Figma
  2. Минусы работы в Figma
  3. Элементы дизайна сайта, доступные в Figma
  4. Работа с дизайном в редакторе
  5. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

И все же, работать в Figma удобно, приятно, а главное просто. Больше никаких заморочек с выгрузками из Adobe Illustrator, корпений в Sketch. О том, почему стоить переходить на Figma, какими плюсами и минусами обладает приложение и как начать в нём работать, вы узнаете из нашего материала.

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

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

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

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

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

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

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

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

  • дизайнеры в едином окне выполняют отрисовки;
  • верстальщики корректируют и редактируют файл;
  • менеджер следит за всем процессом, управляет им, указывает на проблемные места;
  • разработчики вносят свои коррективы еще до момента подачи проекта на согласование заказчику. Это позволяет изначально вынести оценку предстоящим работам, продумать дизайн, чтобы в процессе реализации было меньше проблем.
Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

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

Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
pdf иконка

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

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

doc иконка

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

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

pdf иконка

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

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

pdf 3,7mb
doc 1,7mb
Уже скачали 28364 pdf иконка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Только до 27.05
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы получить файл, укажите e-mail:
Введите e-mail, чтобы получить доступ к документам
Подтвердите, что вы не робот,
указав номер телефона:
Введите телефон, чтобы получить доступ к документам
Уже скачали 52300
  • Сохраняется история версий.

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

Историю правок смотреть так: раздел меню File → Show version history. Если используете бесплатную версию – материалы хранятся месяц, в платных – на протяжении всей работы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы дизайна сайта, доступные в Figma
Элементы дизайна сайта, доступные в Figma
  • Файлы векторной графики.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа с дизайном в приложении
Работа с дизайном в приложении
  • Использование библиотеки компонентов.

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

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

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

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

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

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

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

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

Персональная команда создается сразу в момент регистрации в сервисе. Для смены ее имени (это доступно в любой момент) нажмите на элемент правой кнопкой мыши и дальше кликните «Rename». Для удаления команды путь тот же. Новая команда формируется через «Create new team» (на левой панели снизу).

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

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

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

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

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

  • Плагины.

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

Какие именно из них уже установлены – посмотрите в том же разделе в настройках профиля.

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

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

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

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

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

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

Хотите стать мастером дизайна веб-пространства? На курсе Fullstack-дизайнера вы освоите искусство создания восхитительных интерфейсов и глубокий взгляд на верстку. Под руководством экспертов научитесь воплощать идеи в реальные проекты, владеть инструментами и вдохновлять мир дизайном.
Оцените статью
Рейтинг: 2
( голосов 4 )
Поделиться статьей
Добавить комментарий

Сортировать:
По дате публикации
По рейтингу
До конца акции осталось
0 дней 00:00:00
Дарим скидку 64% на обучение «Веб-дизайнер»
  • Получите новую профессию с гарантией трудоустройства
  • Начните учиться бесплатно, 3 месяца обучения в подарок
Забронировать скидку на обучение
Забрать подарок

Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Подарки от Geekbrains из закрытой базы:
Осталось 17 мест

Поздравляем!
Вы выиграли 4 курса по IT-профессиям.
Дождитесь звонка нашего менеджера для уточнения деталей

Иван Степанин
Иван Степанин печатает ...