принцип работы, лучшие фишки облачной платформы и полезные лайфхаки

3 года назад Figma совершил переворот в мире графического дизайна и, в частности, прототипирования веб-сайтов и мобильных приложений. Он взял лучшие фишки у топовых инструментов и объединил их в облачную платформу.

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

Важные особенности

Первый релиз Figma состоялся в 2016 году. Начиная с 2017 года информационное поле вокруг сервиса стремительно разрасталось. Это первая облачная платформа для разработки интерфейсов с поддержкой командной работы в режиме реального времени. Многие компании, занимающиеся веб-дизайном, полностью перешли на «Фигму», отказавшись от привычных Adobe Photoshop и Sketch.

Сервис обладает встроенным файловым менеджером, доступен на компьютерах и мобильных устройствах. Одно из главных преимуществ — создание интерактивных страниц. Заказчик открывает прототип в браузере и видит, как выглядит список при раскрытии или кнопка корзины при активации. Эти возможности экономят много времени на согласовании нюансов.

Давайте разберёмся, за что пользователи так любят «Фигму».

Простой интерфейс

Графические редакторы — мощные инструменты, которые за десятки лет развития «обросли» миллионами функций. Чтобы разобраться во всех модулях и повторять операции в автоматическом режиме, надо потратить 2-3 года на изучение и ежедневно совершенствовать знания.

С Figma всё проще. На освоение базовых возможностей уходит несколько дней. Затем остаётся подписаться на официальные аккаунты платформы в социальных сетях и следить за появлением новых фишек.

Для успешного изучения «Фигмы» не надо проходить курсы дизайна. Любой пользователь с чувством баланса, который умеет совмещать цвета и отличать плохой UI от хорошего, быстро разберётся с особенностями редактора и сделает крутой макет. Figma решает задачи всех сегментов целевой аудитории:

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

Производительность

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

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

Сравнение скорости Photoshop и Figma показывают, что при одинаковом количестве открытых холстов «Фотошоп» сильно грузит оперативную память, а содержимое проекта в «Фигме» подгружается дольше, но на быстродействии это никак не сказывается.

Сервис не является панацеей в 100% случаев. Он требователен к видеокарте, на слабых ноутбуках с интегрированной графикой с большими прототипами начинаются проблемы.

История и автосохранение

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

«Фигма» изящно решает одну их главных проблем десктопных программ. После каждого изменения в макете данные сохраняются в базу данных сервиса. Не надо нажимать CTRL+S и переживать о том, запишутся ли правки после экстренной перезагрузки компьютера.

Контроль версий помогает вернуться к точке предыдущего сохранения. К примеру, клиенту изначально не понравилась первая версия макета, а потом он решил вернуться к исходному варианту. Если дизайнер сохранил v1 в Photoshop, он в шоколаде. В другом случае придётся вносить правки заново.

На бесплатном тарифе Figma история версий сохраняется в течение 30 дней. Можно откатить изменения по состоянию на выбранную дату или скопировать элементы в другой фрейм. Ещё один плюс — шаринг ссылки на определённую версию.

Библиотека компонентов и фреймы

Проекты в «Фигме» состоят из фреймов. Это аналог холстов из привычных графических редакторов. Внутри окна располагаются элементы с направляющими и сетками. Один фрейм — одна страница. Удобная навигация обеспечивается за счёт подписей к холстам. Масштаб меняется с помощью горячих клавиш.

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

Рассмотрим простой пример. Дизайнер создаёт 30-страничный портал. На каком-то этапе клиент просит изменить структуру шапки. Специалисту приходится открывать макеты и вносить правки в каждый файл. В «Фигме» задача решается в два клика. Меняем свойства родительского объекта и дочерние копии подстраиваются под изменения.

В PRO версии облачного редактора доступны полноценные библиотеки динамических компонентов. Дизайнер меняет основной элемент в одном проекте и обновление распространяется на связанные прототипы. Затем система отправляет оповещение членам команды.

Стили текста

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

Механизм работы:

1. Выбираем фрагмент.
2. Задаём семейство шрифтов, размер, начертание и другие свойства.
3. Сохраняем шаблон.
4. Применяем в любом месте интерфейса.

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

В «Фигме» наборы для подзаголовков, абзацев, кнопок, всплывающих окон и других элементов сохраняются в общую библиотеку. На обновление внешнего вида слоя уходит 2-3 секунды. Выбрали шаблон и свойства подгрузились.

Привязки

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

Функция экономит время, но не в 100% случаев. Если изменить пропорции фрейма незначительно, операция пройдёт гладко. При большом масштабировании придётся адаптировать объекты вручную. Даже несмотря на этот недостаток, привязки очень выручают.

Интерактивность

Figma пытается охватить все сегменты работы с веб-дизайном. Одна из главных фишек — интерактивное взаимодействие. С первых версий облачной платформы начали появляться возможности для моделирования динамического UI.

Возможности «Фигма»:

1. Анимированные переходы между фреймами.
2. Фиксация объектов при скролле.
3. Просмотр интерфейса в режиме мобильного устройства или планшета.
4. Эффекты для кнопок.
5. Отображение всплывающих окон.
6. Интерактивные связи.
7. Поддержка оверлеев.

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

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

Механизм работает идеально. Отрисовываете макеты, привязываете оверлей к ссылке или иконке, настраиваете параметры и наслаждаетесь динамическим интерфейсом. От такой подачи заказчики будут в восторге. Благодаря встроенной библиотеке анимации, можно использовать нестандартные эффекты.

Командная работа и комментирование

Совместная разработка проекта — не новая фишка, но в «Фигме» её реализовали по-своему. Расширили доступ к макету коллегам и можно устраивать «мозговые штурмы». Изменения отображаются в режиме реального времени. Каждый пользователь, который вносит правки, отмечается отдельным курсором с подписью.

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

Комментарии представлены в виде ярлычков. По клику появляется всплывающее окно с текстом. В любой момент описание можно отредактировать или убрать элемент с карты.

Pixel Perfect

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

Figma обеспечивает комфортную передачу макета верстальщику. Открываете доступ и у специалиста будет максимум информации. Библиотеки шрифтов, параметры слоёв, отступы и свойства объектов. Картинки выгружаются с помощью функции экспорта в нескольких форматах. Раньше такие возможности были только в мечтах.

Auto Layout

В декабре 2019 года появилась новая функция, которая автоматически подстраивает размер фрейма под содержимое контента. Поменяли текст для кнопки — ширина динамически изменяется в зависимости от пропорций объекта.

Для добавления Auto Layout в ранее открытые страницы надо просто обновить фрейм в веб-версии или десктопном приложении.

Лайфхаки сервиса 

Figma существенно экономит время при разработке больших проектов. Описанные выше возможности выводят использование графического дизайнера на новый уровень. Примените наши советы, чтобы задействовать мощь облачной платформы на 100%.

Горячие клавиши

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

Структурирование прототипов

Не делайте в макетах больше 20 фреймов. Даже установка связей не поможет распутать большой «клубок». Чем больше страниц, тем сложнее клиенту ориентироваться в структуре. От количества элементов в проекте зависит и быстродействие. Если на презентации вкладка будет грузиться 5-10 минут, впечатление будет испорчено.

Самоучитель

«Фигма» ещё развивается, но пользователи активно осваивают возможности уже 3 года. В марте появился первый бесплатный самоучитель, который знакомит новичков с особенностями работы и содержит лайфхаки. Внутри PDF книги 23 главы: от обзора интерфейса до фреймов и адаптивности.

Тарифная сетка

Сервис распространяется по условно-бесплатной модели. В базовой версии доступны 3 проекта и 2 пользователя. Платные подписки стартуют от 12 долларов в месяц. Среди плюсов: неограниченная история версий, библиотеки для совместной работы и аналитика.

Преимущества и недостатки

Платформа совершила революцию в мире инструментов прототипирования, но у неё есть и слабые стороны.

Плюсы:

• веб-версия и приложения под разные операционные системы;
• бесплатный тариф;
• неограниченное файловое хранилище;
• командная работа;
• интерактивные макеты;
• редактор кривых;
• библиотека компонентов;
• импорт из Sketch;
• экспорт SVG.

Минусы:

• зависимость от интернета;
• нет русского языка;
• большие макеты долго грузятся;
• нельзя изменить наборы горячих клавиш;
• нет импорта из PSD.

Выводы

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

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

Figma — обзор сервиса | Startpack

Есть бесплатный тариф

от Figma Inc.

5 отзывовЗадать вопрос

Официальный сайт

ИспользуюОтметьте, если используете. Это улучшит ваши персональные рекомендации.

Онлайн-конструктор для создания прототипов и дизайна сайтов, и интерфейса приложений.

Совместная работа и личная эффективность Веб-дизайн

Похожие на Figma

Canva

Readymag

Adobe Creative Cloud

Weblium

SUPA

Abstract

Artboard Studio

Все аналоги Figma

Как продлить подписку Figma из России

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

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

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

Особенности Figma:

• Создание прототипов продукта.
• Создание дизайна пользовательских интерфейсов.
• Коллекция шаблонов.
• Контроль версий.
• Сотрудничество дизайнеров и разработчиков.
• Экспорт в SVG и CSS.
• Взаимодействие с участники при помощи комментирования и оставления эмоций.
• Интеграция с популярными сервисами: Dropbox, Zeplin, Jira, Trello и другими.

Интересные факты

1. Основанная Диланом Филдом компания привлекла 50 миллионов долларов, достигнув оценки капитализации в 2 миллиарда долларов в 2020 году.
2. Один из создателей не закончил учёбу, чтобы принять стипендию Тиля, которая предоставила 100 тысяч долларов на реализацию идеи стартапа.
3. Первая версия Figma была представлена ​​3 декабря 2015 года в качестве предварительной программы по приглашению, а первый общедоступный релиз был выпущен 27 сентября 2016 года.
4. 22 октября 2019 года Figma запустила своё сообщество, где дизайнеры могли публиковать свои работы для просмотра и редактирования.
5. При помощи дополнительных настроек интеграций и работы с плагинами Figma может значительно увеличить функциональность. Например, при помощи интеграции с Google Таблицами можно в реальном времени подгружать актуальные данные в макет.
6. Интерфейс Figma и его возможность к совместной работе позволяет использовать сервис не совсем по назначению — можно хранить заметки, проводить голосования при помощи ползунков и т. д.
7. Созданные в Figma прототипы или дизайны пользователи могут внедрять на сайты, использовать в презентациях, инструкциях и других материалах.

Контакты Figma

Сервисы, с которыми у Figma есть интеграция

Slack

Цены на Figma

Возможности Figma

Платформы:















Веб-приложение














Приложение Android














Приложение iOS














Приложение Windows














Приложение Mac

24

Развёртывание:















Облако

12

Доступные языки:














English

14

Доступ по протоколу HTTPS


Данные между вами и сервисом передаются по шифрованному каналу (SSL/TLS), что исключает их перехват злоумышленниками.

90

Уведомления

40

Управление доступом

26

Поиск и фильтры

36

Комментарии

23

Безопасность и конфиденциальность

Доступ по протоколу HTTPS Данные между вами и сервисом передаются по шифрованному каналу (SSL/TLS), что исключает их перехват злоумышленниками.

90

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

51

Резервное копирование в нескольких местах Резервное копирование данных в несколько независимых мест делает практически невозможным их потерю или повреждение.

70

Законодательство

Входит в Единый реестр российских программ Сервис находится в реестре, который Минкомсвязь России создало в соответствии со статьёй 12.1 ФЗ «Об информации, информационных технологиях и о защите информации», с целью расширения использования российских программ, подтверждения их происхождения и поддержки правообладателей.

53

Совместная работа и личная эффективность

Уведомления

40

Управление доступом

26

Поиск и фильтры

36

Комментарии

23

Отзывы

Трюки

Новости

4,8

5 отзывов

Оставить отзыв

Figma

—

Без альтернативно для веб-дизайна и не только.

Рекомендую

Хорошо

Надёжность

Удобство

Внешний вид

Цена

Функциональность

Плюсы

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

Минусы

Пожалуй, не напишу

Необходимый и достаточный инструмент для работы с интерфейсами и веб-дизайном.

figma

Александр Ерохин

3

22

0

23333

Отзыв

24 апреля 2021

Figma

—

Только изучаем

Рекомендую

Хорошо

Удобство

Внешний вид

Цена

Функциональность

Плюсы

Бесплатный тариф

Регулярные обновления

Есть web-версия

Минусы

Нет приложения под Linux Ubuntu. Некоторым моим коллегам приходится работать только через WEB-версию

Есть бесплатные курсы и туториалы для начинающих. Вроде как даже у нас получается в ней работать.

figma

Евгений Орлов

5

5

0

28041

Отзыв

11 ноября 2020

Figma

—

Мой основной инструмент

Рекомендую

Хорошо

Удобство

Внешний вид

Цена

Функциональность

Плюсы

Бесплатный тариф

Регулярные апдейты

Море плагинов под любую задачу

Минусы

На моем уровне и нету

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

figma

Алёна Кропонина

2

7

0

30444

Отзыв

3 февраля 2020

Figma

—

Отличный сервис, чтобы делать прототипы сайтов

Рекомендую

Хорошо

Удобство

Внешний вид

Функциональность

Плюсы

Работа в онлайн режиме с авто-сохранением

Есть бесплатный тариф

В отличие от Адоб Иллюстратора сервис понимает, какое ровнение для тебя важно

Минусы

Не очень удобный импорт

Советую как минимум попробовать, я не дизайнер и сразу разобрался, без инструкций. Быстро набросал, что я хочу и сбросил дизайнеру — и ему проще понять, и мне объяснить

figma

Григорий Здесенко

2

3

0

37955

Отзыв

29 апреля 2019

Figma

—

Лучший онлайн-сервис для создания интерфейсов

Рекомендую

Хорошо

Надёжность

Удобство

Внешний вид

Цена

Плюсы

+ Бесплатный тариф даёт 3 проекта и почти бесконечное количество файлов в нём

+ Удобно шарить интерфейсы коллегам и заказчикам

+ Не нужно устанавливать доп. программу

+ Не зависит от браузера и ОС

Минусы

– Пока не хватает некоторые возможностей и импорта PSD

Тем, кто ещё рисует в Photoshop, нужно пробовать однозначно. Тем, кто ещё на Sketch, тоже стоит приглядеться.

figma веб-дизайн

Сергей Филимонов

26

18

1

42340

Отзыв

20 марта 2018

Как купить подписку Figma в России

19 июля 2022

по популярности по дате

Google расширяет возможности сторонних интеграций для Workspace

12 октября 2022

Adobe заявила о приобретении сервиса Figma

17 сентября 2022

Figma прекращает работу в России

9 марта 2022

Видеообзоры Figma

Обзор сервиса Обзор основных инструментов

Другие сервисы Figma Inc.

FigJam

(Нет отзывов)

Инструмент для командного генерирования идей на белой доске.

figma SERIES E233 Поезд: линия Chuo Line (Rapid Service)

В вашем браузере отключен Javascript. Некоторые функции могут быть недоступны, если они не включены.

• Название продукта

  figma SERIES E233 Поезд: линия Чуо (быстрое обслуживание)

  Производитель

  Фабрика Макса

  Категория

  фигма

  Цена

  3278 иен

  Дата выпуска

  2018/12

  Технические характеристики

  Шарнирная модель из окрашенного АБС-пластика без масштаба. Длина около 600 мм.

  Выпущено

  Макс Фабрика

  Распространяется

  Компания Good Smile

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

  Продукт одобрен Восточно-Японской железнодорожной компанией.

{{ msg }}

Службы преобразования Figma в HTML

Службы преобразования Figma в HTML

Javascript должен быть включен для корректного отображения страницы

Что такое сервис Figma to HTML от GetDevDone? Мы берем ваш дизайн Figma и превращаем его в идеальную по пикселям, готовую к сетчатке глаза разметку с действительным кодом HTML/CSS.

Начало работы

Почему вам следует выбрать GetDevDone

для вашего следующего проекта разработки Figma to HTML

Наши

Услуги и возможности

Мы

хорошо подходим для

Наш Figma в HTML

Рабочий процесс преобразования

• 01

  Заказать

  Просто предоставьте нам свои файлы дизайна Figma и требования, и мы возьмем их оттуда.

• 02

  Разработка

  Наши опытные разработчики преобразуют ваш статический дизайн в идеальную разметку для полнофункциональной и адаптивной веб-страницы.

• 03

  Тестирование

  Мы тщательно тестируем ваш сайт во всех современных браузерах, платформах и устройствах.

• 04

  Доставка товара

  Вы получаете наценку с точностью до пикселя в срок.

• 05

  Поддержка после разработки

  Мы ответим на ваши вопросы и устраним любые проблемы, с которыми вы можете столкнуться после поставки.

Начало работы

Часто задаваемые вопросы

Вопросы

• Как я могу отслеживать ход выполнения моего проекта?

  Вам будет назначен специальный менеджер проекта, который будет узнавать о статусе вашего проекта в рабочее время. Мы используем множество различных каналов связи и инструментов управления проектами, включая Slack, Trello, Jira и другие. Даже если у вас есть собственное программное обеспечение, которое вы хотите, чтобы мы использовали для вашего проекта, мы также можем гибко переключиться на него.

• Как быстро можно обработать и доставить мой проект?

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

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

• Почему GetDevDone — лучший выбор для моего преобразования Figma в HTML?

  Работа с нами дает множество преимуществ. Вот некоторые из наиболее важных:

  • Наша компания была основана в 2005 году, поэтому мы можем предложить большой практический опыт.
  • У нас огромная команда разработчиков — более 470 профессионалов готовы начать работу над проектом любого масштаба и сложности.
  • Мы работаем с самыми разными технологиями, как бэкэнд, так и фронтенд. Даже если конкретной технологии нет в нашем списке, мы всегда найдем подходящую альтернативу. Мы очень гибкие.

• Сколько стоит преобразование дизайнов Figma в HTML?

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

• Какие форматы дизайна вы принимаете для преобразования?

  Самые популярные форматы изображений, с которыми мы работаем:
  PSD, PNG, Figma и
  Эскиз.

  This entry was posted in Популярное