Цифровой элемент
5 минут на чтение
5453
Отправь статью на почту?

9 причин, чтобы полюбить Figma

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

Подписаться

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

Figma объединил в себе всё лучшее, что происходило с миром инструментов UI-дизайна за последние несколько лет. 

Figma — это лучшие качества от Sketch, Zeplin и InVision в одном крутом продукте.

Figma - интерфейс

Интерфейс

1 - Доступность

Figma работает в браузере и доступен на любой платформе (если вы уже работали в конструкторах страниц вроде Webflow или Tilda, проблем с адаптацией не будет).

Никаких дистрибутивов и приложений — нужно только зайти на figma.com, зарегистрироваться и начать работать.

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

2 - Экосистема

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

Figma решает эту проблему, поскольку рабочие файлы находятся на собственном облаке и организованы простым деревом «команда → проект → файл», дизайнер может просто отправить ссылку на файл клиенту или верстальщику. Поэтому больше никаких конфликтов копий, «залей в Dropbox», «не подгрузилось», «макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)» — в папку Drafts автоматически сваливаются любые новые файлы, не сохраненные в явном виде. Кроме того, если на проекте меняется специалист, не возникнет проблем с тем, где находятся исходники.

3 - Совместное редактирование

Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер.

Интерфейс изменений в реальном времени - Figma

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

4 - Актуальность версий

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

Контроль версий нативный и простой: вы видите, кто вносил изменения, когда, и «откатываетесь» до версии в пару кликов, перезаписывая или создавая копию макета.

5 - Удобные инструменты

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

  • удобное соединение точек и работа с шейпами;
  • создание эффектов, например, тени, занимает считанные секунды
Создание эффектов в Figma
  • настройки сетки всегда находятся на главном экране
  • удобный pen tool
  • направляющие, которые упрощают работу дизайнера

6 - Шрифты

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

7 - Многозадачность

Если вам нужно работать одновременно с несколькими рабочими областями, вы наверняка жаловались на производительность Sketch или Photoshop. Figma же позволяет работать с более, чем десятью файлами и прекрасно себя чувствовать, поскольку производительность продукта на высоте.

img_4.jpg

8 - Прототипирование мобайл-проектов

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

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

Figma полезна и для программистов - прямо в программе можно посмотреть информацию об объектах, которая нужна для кода:

Figma - просмотр информации об объектах

Отличная функция - play button. С ее помощью дизайнеры могут “проиграть” приложение, тестируя последовательность и логику переходов так, будто приложение готово и загружено на смартфон.

Figma - тест с мобильного устройства

9 - Интеграция

Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin.

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

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

Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Читайте в нашем блоге

Все статьи
Обзор ключевых инструментов digital-маркетинга

Обзор ключевых инструментов digital-маркетинга

В digital-маркетинге существует множество инструментов, которые помогают специалистам достигать своей целевой аудитории. Давайте рассмотрим как...

29.03.2024
142
Что будет, если не продлить лицензию Битрикс24?

Что будет, если не продлить лицензию Битрикс24?

Битрикс24 – это платформа, которая помогает организовать и автоматизировать бизнес-процессы компании, обеспечивая удобство использ...

04.03.2024
236
Как настроить редирект через .htaccess

Как настроить редирект через .htaccess

Редирект можно настроить разными способами: в панели управления хостингом, через код HTML, через PHP, с помощью web.config, через .htaccess, а ...

04.03.2024
190
Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Через панель администратора сайта на 1С-Битрикс можно управлять настройками сайта, менять контент и так далее. Также там можно заводить новых п...

21.12.2023
869
Как создать аккаунт разработчика в App Store, Google Play, AppGallery

Как создать аккаунт разработчика в App Store, Google Play, AppGallery

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

08.12.2023
2200
Файлы-куки: как правильно информировать пользователей и избежать штрафов

Файлы-куки: как правильно информировать пользователей и избежать штрафов

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

06.12.2023
536
Безопасность сайта: поиск вирусов и троянов

Безопасность сайта: поиск вирусов и троянов

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

20.11.2023
861
«Цифровой Элемент» принял участие в Русском Экономическом Форуме

«Цифровой Элемент» принял участие в Русском Экономическом Форуме

Форум посвящен масштабным вопросам развития суверенной экономики России в XXI веке. Среди основных тем: импортозамещение, технологическое разви...

13.11.2023
393