что такое figma и зачем она нужна

Что такое Figma: возможности и принципы работы

Революционный онлайн-сервис для дизайнеров. Проектируйте, создавайте прототипы и работайте командой прямо в браузере. Рассказываем о Figma.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Что такое Figma

Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Разработка интерфейсов происходит в онлайн-приложении.

У Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность совместной работы над документами.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

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

Многопользовательский режим редактирования

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

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

Чтобы сотрудничать с другими дизайнерами, создайте команду.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Всё интуитивно понятно: пишете название команды, выбираете нужный тариф, готово.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Облачный сервер хранения файлов

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

Компоненты

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

Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

История версий

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

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

Фреймы

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Сетки

Панель Grid Layout позволяет быстро создать любую сетку.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Десктопная версия

Figma — онлайн-сервис, но есть и десктопная версия. Для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Файлы сохраняются локально и при необходимости импортируются в браузерную версию.

Условная бесплатность

Figma можно пользоваться бесплатно, с такими основными ограничениями:

Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

О конкретных приемах, которые упростят работу в Figma, читайте здесь.

Источник

Figma для маркетологов. Основные возможности и принципы работы

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Вот несколько задач, с которыми поможет справиться Figma:

Чем крута Figma

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

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

Минималистичный интерфейс. Можно быстро разобраться с основными функциями, посмотрев 2-3 видеоурока.

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

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

Компоненты. Это аналог смарт-объектов в PhotoShop. Компоненты позволяют дизайнерам быстро вносить изменения в одинаковые элементы интерфейса. Например, менять названия разделов в меню на каждой странице или цвета кнопок.

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

Источник

Что такое Фигма и как в ней работать

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Рассказываем, как начать работать в Figma и в чем ее особенности.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Что такое Figma

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Научиться пользоваться Фигмой можно быстро и легко. Дайте название проекту или команде, выберите тариф (бесплатный – Starter, платный – Professional) и приступайте к работе.

Многопользовательский режим редактирования

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

Облачный сервер хранения файлов

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

Компоненты

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

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

Виджет обратного звонка для сайта

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Также можно подключить другие виджеты Calltouch для увеличения конверсии сайта и роста продаж. Зарегистрируйтесь и добавьте интерактива на свой сайт уже сегодня.

Виджеты Calltouch

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Фреймы

Если вам необходимо переместить кнопку обратного звонка и фото на всех фреймах, сгруппируйте эти элементы (Object → Group Selection). Проверьте слои на предосмотре, сохраните результат. Готовый фрейм можно скачать в удобном формате.

Сетки

Допустим, вам необходимо настроить расположение товаров в прототипе интернет-магазина. Сетка (Layout Grid) поможет скорректировать промежутки между ними (Gutter), расстояния от краев фрейма (Margin), а также размеры, количество (Count), цвет (Color) карточек с каждым продуктом. Сеток во фрейме может быть сколько угодно – отдельно для каждого графического компонента или группы. Цвет и параметры сетки легко поменять. Предусмотрено 12 колонок для крупных объектов, 24 – для мелких. Вертикальные линии подойдут для работы с текстом.

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

Десктопная версия

Условная бесплатность

Для самостоятельной работы и двух специалистов подойдет бесплатный тариф Starter. В него включены:

За 12$ в месяц с каждого члена команды доступен тариф Professional. Его преимущества:

Тариф Organization за 45$ в месяц дает вам полный доступ к работе в Figma. Список возможностей:

Figma для дизайнеров

Есть масса графических редакторов – Photoshop, Adobe XD, Sketch, Canva. Но в Фигме целый ряд уникальных преимуществ для дизайнера:

Недостатки Фигмы

Какие нюансы учесть перед регистрацией в Фигма:

Начало работы в Фигме

Зайдите на официальный сайт и зарегистрируйтесь: кнопка Create one. Затем в правом верхнем углу кликните на кнопку +New. Так вы создадите файл. Задайте необходимые параметры и преступайте к разработке макета.

Источник

Figma: обзор программы для веб-дизайна

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

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

Что такое Figma

Это графический редактор для веб-дизайна. В Figma можно создавать:

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

Можно заходить в Figma через браузер или же скачать программу на компьютер. Она подходит как для Windows, так и для Mac. В десктопной версии можно работать офлайн, а когда появляется доступ к интернету, изменения синхронизируются.

Преимущества Figma для работы

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

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

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

Как и в Google Docs, в Figma можно работать над документом вместе: давать доступ на просмотр и редактирование, параллельно работать над макетом — на экране будут видны курсоры разного цвета.

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

Инструмент бесплатен для индивидуальных пользователей

Если вы работаете в аккаунте сами, все функции бесплатны. Просто регистрируетесь и начинаете работать. Можно давать доступ на просмотр документа — это тоже бесплатно.

Бесплатные email рассылки

Создайте аккаунт в SendPulse и отправляйте до 15 000 писем бесплатно каждый месяц!

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

$45 за пользователя с правами редактирования/месяц

Это план для больших организаций.

Как начать работать с Figma

После регистрации на почту приходит приветственное письмо со ссылкой на раздел «Помощь», видеоуроки, форум и другие ресурсы:

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаПриветственное письмо от Figma

Интерфейс понятный — слева панель со слоями, которая включает элементы проекта, сверху панель инструментов, справа панель свойств.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаИнтерфейс Figma

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаУведомление с подсказкой

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

Как научиться работать в Figma

Познакомиться с редактором и изучить основы предлагают в онлайн-университете «Нетология». На сайте доступны записи открытых занятий «Figma: лайфхаки быстрой работы дизайнера».

Практические уроки по работе с Figma на русском есть на YouTube каналах:

Электронную книгу «Руководство по Figma» выпустил дизайнер интерфейсов Александр Окунев. В книге рассматриваются 23 темы: обзор интерфейса, формы, перо и векторные сети, градиенты с примерами в Figma, кадрирование и цветокоррекция, компоненты, оверрайды и другие.

Новости и советы по работе с редактором публикуют в Телеграмме:

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

Прототипирование

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

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаСоздание связей между элементами в режиме прототипирования в Figma

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

Компоненты

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

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаИзменения в компонентах

Чтобы сделать элемент компонентом, выберите опцию «Создать компонент» на верхней панели или кликните правой кнопкой мыши на слое и в меню выберите «Создать компонент» (Create Component).

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаСоздание зависимых компонентов в Figma

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

Векторные сетки

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаВекторные сетки в действии

Кроме того, векторные сетки облегчают работу с HTML: можно скопировать SVG код из внешнего источника и вставить его как векторный слой прямо в редактор. Или сохранить векторный объект из Figma как SVG код. Для этого кликните правой кнопкой мыши на элементе, выберите «Копировать как SVG» и вставьте код в HTML или другой веб-проект, с которым работаете.

Встроенное комментирование, редактирование и доступ

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаСовместное редактирование в Figma

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаКомментирование проектов в Figma

Контроль версий

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

Чтобы просмотреть историю версий, выберите в выпадающем меню сверху опцию «История версий». Справа на странице появится панель с историей изменений. Версиям можно присваивать названия, восстанавливать, дублировать.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужнаПросмотр истории версий документа в Figma

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Как работать в Figma: создаем макет электронной книги

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

1. Залогиниться и создать новый документ.

2. Нажать на панели вверху «+» и создать рамку (Frame), чтобы разместить объект на полотне.

3. Заполнить проект слоями: текстовыми блоками, прямоугольниками и рисунками.

Вот, что у нас получилось:

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

Ограничения Figma

Редактор создан в первую очередь для веб-дизайна. Поэтому в нем неудобно работать с полиграфией. В Figma нет CMYK палитры и переключения размерности сетки на см/мм. Чтобы подготовить макет для баннера, листовки или ролл-апа для печати, нужно созданный в Figma файл загрузить в другую программу, что предназначена для полиграфии. И только потом его отдавать на печать.

Еще одно ограничение Figma в том, что макеты из Photoshop нельзя импортировать прямо. Один из вариантов — перевести их в формат Sketch, а потом перенести в Figma.

Подведем итог

Figma выглядит как хорошо продуманный инструмент, сделанный дизайнерами для дизайнеров. Главные достоинства редактора:

Надеемся, что обзор сделал для вас Figma более понятной и вдохновил на работу. Создавайте в Figma макеты и маркетинговые материалы для email рассылок в SendPulse!

Источник

Figma — простое решение для дизайнера, сложное решение для верстальщика

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Самый неоспоримый плюс – халява

В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.

Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.

Задействован принцип кроссплатформенности

Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.

Удобные быстрые клавиши

Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.

Возможность работы с векторной графикой

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

Возможность создания компонентов

Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)

В Фигме есть функционал настраиваемых плагинов, и их там довольно много.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Проблема с определением фактических размеров элементов и расстояния между ними

К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

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

Перекрытие и заблокированные слои

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

Проблемы с текстом

а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).

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

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

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.

*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?

Figma является облачным продуктом

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

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

Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета

скорее всего перейдет к rgba представлению

А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.

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

Отсутствие нормальной Темной темы

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

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

Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.

что такое figma и зачем она нужна. Смотреть фото что такое figma и зачем она нужна. Смотреть картинку что такое figma и зачем она нужна. Картинка про что такое figma и зачем она нужна. Фото что такое figma и зачем она нужна

*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…

О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.

Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *