Figma что это за программа бесплатная ли она

Фигма программа для дизайна: 7 причин полюбить её

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

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

• 1. Фигма – программа для дизайна, ее отличительные особенности
• 2. Как работать в программе
• 3. Основные инструменты Фигмы
• 4. 7 главных причин любить Фигму
• 5. Недостатки Фигмы
• 6. Коротко о главном

Фигма – программа для дизайна, ее отличительные особенности

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

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

Чтобы работать в Фигме через браузер, достаточно зарегистрироваться на ее официальном сайте. Для этого нужно указать e-mail адрес, пароль и другие личные данные. Регистрация сопровождается выбором статуса – менеджер, дизайнер, разработчик и т.д.

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

Но этот вариант предполагает совместную работу над проектом не более 2 человек. Место в облаке при этом никак не ограничивается. Все изменения в личном кабинете сохраняются в течение 30 дней. Для новичков в сфере веб-дизайна такие условия вполне приемлемы.

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

Как работать в программе

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

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

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

Обучение доступно и на специализированных каналах на Youtube. Этот вариант актуален для тех, кто быстро схватывает информацию и не желает тратить лишние средства. У тех, кто хорошо знаком с работой в программах Sketch и Photoshop, проблем с Фигмой возникнуть не должно.

Figma привлекает веб-дизайнеров своим широким функционалом.

Возможности Фигмы заключаются в следующем:

• создание прототипа (модели приложения или сайта);
• формирование элементов интерфейса (иконок, кликабельных кнопок, анимации, списков, формы обратной связи и т.д.);
• работа с векторной графикой;
• создание рекламных объявлений по шаблонам.

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

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

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

Humans to Figma помогает создавать иллюстрации людей. Unsplash, в свою очередь, помогает подобрать и вставить нужное изображение. Чтобы получить доступ ко всему перечню плагинов, следует нажать на кнопку «Browse all plugin».

Создание нового файла осуществляется через кнопку «Drafts» или значок плюса, который находится в правом верхнем углу. Название файлу нужно присваивать самостоятельно. По умолчанию за ним закрепляется название «Untitled».

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

В других случаях состав команды можно менять на свое усмотрение. Работа в Фигме сходна с Google Documents. Каждому проекту присваивается определенная папка, где хранятся все файлы.

Бесплатная версия программы предполагает создание не более 3 проектов. Внутри каждого проекта можно перемещать файлы в форматах JPEG, PNG и SVG.

Основные инструменты Фигмы

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

Панель инструментов находится в левой части программы. Она становится доступной в режиме редактирования файла. К наиболее значимым инструментам программы можно отнести:

1. Изображения. Их можно вставлять через специальную вкладку или просто перетаскивая с рабочего стола в нужное окно. В Фигме можно регуляровать насыщенность цвета, контраст и яркость отдельных фрагментов картинки. Также существует возможность применять векторные объекты, смешивать слои и использовать разнообразные эффекты.
2. Текст. Пользователям открывается доступ к библиотеке Google Fonts, куда при необходимости можно загружать дополнительные шрифты. Для этого нужно установить Font Installers или скачать десктопную версию программы.
3. Векторные формы можно отрисовывать с помощью инструмента Shape Tool. К его главным объектам относят звезду, треугольник, прямоугольник, линию, круг и стрелку. Фигуры можно увеличивать и сжимать, зажимая кнопку Alt.
4. Модульная сетка применяется для упорядочивания всех объектов дизайна во фрейме. Для осуществления настройки нужно зайти в раздел «Layout Grid».
5. Маски и эффекты позволяют выбирать цвет, варьировать его прозрачность и градиент. Чтобы сочетать несколько фигур между собой, можно объединить их градиентом. Для этого нужно использовать режим Layer.
6. Компоненты. Этот инструмент помогает сэкономить время при проектировании макетов. Он позволяет применить необходимые изменения не к одному элементу, а к целой группе. Чтобы группа объектов считалась одним компонентом, нужно нажать на кнопку «Create Component». Вместе с компонентами веб-дизайнеры могут создавать и стили. Они представляют собой целую коллекцию из эффектов, текста и цветовой палитры. Для создания дизайн-библиотеки, можно сохранить шаблон стилей и компонентов, чтобы с легкостью использовать его в дальнейшем.

7 главных причин любить Фигму

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

Источник: proudalenku.ru

Онлайн-сервис Figma: принцип работы, лучшие фишки облачной платформы и полезные лайфхаки

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 всегда есть место для вашего проекта. Свяжитесь с нами, чтобы создать сайт или приложение под ваши задачи.

Источник: idbi.ru

Почему мы перешли на Figma

В 2016 году наша компания полностью перевела процесс прототипирования и веб-дизайна на молодой и развивающийся графический онлайн-редактор Figma (до этого мы проектировали в Moqups, а рисовали в Photoshop). Мы попросили Егора, нашего дизайнера, рассказать о продукте и поделиться своими впечатлениями. Собственно, Егор и нашёл Фигму, досконально изучил её и внедрил в отдел дизайна «Лидера поиска». Так что слово заслуженному фигмоведу!

1. Преимущества программы
2. Возможности командной работы
3. Недостатки и ограничения
4. Что в итоге

Сразу скажу: у меня нет макбука, поэтому, работая UI/UX и веб-дизайнером, все макеты я по старинке создавал в Фотошопе и мог лишь облизываться на недоступный мне Скетч. Объяснять недостатки такого подхода нет смысла: как только проект выходит за рамки одной-двух страниц, работать становится ресурсозатратно.

Куча файлов с макетами, в которых приходится следить за единообразием и боль внесения мало-мальских правок. С Фигмой я работаю с самой первой версии (специально посмотрел: вышла 27 сентября 2016 года). Это стал просто-таки глоток свежего воздуха. Наконец, появился кроссплатформенный конкурент Скетча! В сети полно статей, нахваливающих Фигму, поэтому мой обзор на те вещи, которые стали для меня ключевыми.

Главные преимущества

Простота освоения

Забавно, но когда работаешь с продуктами Adobe 20 лет, перестаешь замечать, насколько это монструозные и сложные программы с бесконечным количеством функций и возможностей. Осознаёшь это только тогда, когда кто-то просит тебя объяснить, как повторить какой-то трюк или решение. Порой это реально сложно.

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

Интерфейс Фотошопа. Под капотом еще тонна панелек и скриптов, которые я скрыл

А это — интерфейс Фигмы

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

Фигма действительно быстра. Работа в ней происходит на куче холстов, расположенных рядом. И если на моём неслабом, в общем-то, ноутбуке (I7, 32 Гб ОЗУ, SSD) Фотошоп уже на 5-7 холстах с хорошим количеством графики начинает ощутимо притормаживать (у Фотошопа в принципе проблема с артбордами), то Фигме и 20 холстов нипочём, продолжает летать.

На этом документе Фотошоп прилично притормаживает

А Фигма легко справляется с такими количеством холстов

Это не значит, что у неё нет пределов. Фотошоп требователен прежде всего к процессору и объему оперативной памяти, а основные системные требования Figma — к видеокарте, поэтому на слабых ноутбуках с интегрированной видеокартой комфортная работа может стать проблемой: при очень большом количестве холстов (3-5 страниц с 20 холстами каждый) документ грузится долго или вообще «вешает» маломощный компьютер.

Автоматическое сохранение и контроль версий

Онлайновость Фигмы отменяет необходимость постоянного сохранения макета и риск потерять данные (Вы же тоже нажимаете Ctrl-S после каждого действия в Фотошопе? Если нет, значит вы просто еще ни разу не теряли работу за последние два часа из-за внезапного вылета программы.) А прекрасный контроль версий за последний месяц (Фигма делает автокопии, но можно сделать и вручную) избавляет от необходимости плодить кучу подверсий проекта. Выручало не один раз, проверено лично.

Список версий проекта

Компоненты и фреймы

Да, это её основные фишки, и они действительно круты. Фреймы — это, по сути, холсты в холстах со своими отступами, направляющими, правилами выравнивания и масштабирования элементов внутри них. Компоненты — это те же фреймы, только превращенные в шаблонизированные блоки по типу смарт-объектов в Photoshop или символов в Illustrator / Animate. Это потрясающе.

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

Об этом я мог только мечтать, когда вставал вопрос о том, чтобы изменить дизайн шапки или кнопки и приходилось открывать 20+ psd-макетов Photoshop, править там каждый блок, сохранять, закрывать и переотправлять. Залинкованные смарт-объекты с проставленными layer comps (если кто понимает, о чём я) костыльненько выручали, но много удобства не добавляли. В Фигме — пара щелчков и всё.

Дочерние копии еще и самодостаточны: можно поменять параметры (например, цвет отдельно взятой кнопки), а остальные копии и родительский объект останутся незатронутыми. С компонентами скорость работы и оперативных правок на прототипах выросла в разы. В PRO-версии Фигмы (Да, она бесплатная, чёрт побери!

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

Как пользоваться компонентами в Figma

Удобное выравнивание элементов

Помнится, в Photoshop была вечная проблема с расстановкой элементов на определенном расстоянии (например, пункты меню или карточки товаров), приходилось делать вручную или пользоваться сторонними скриптами. В Фигме это учли, работает чудесно. Берешь элементы, нажимаешь кнопку и готово — объекты разместились на заданном расстоянии, которое меняется на ходу. Более того, можно взять и поменять местами выровненные блоки простым перетаскиванием с сохранением отступов. Красота!

А еще имеется отличная функция Pack Horizontal и Pack Vertical, я её не встречал ни в одном редакторе, она позволяет быстро скомпоновать элементы вплотную друг к другу.

Пользуюсь выравниванием постоянно

Стили текста

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

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

Пример набора стилей

Копирование стилей объекта

В Фотошопе мне чертовски не хватало нормального копирования и переноса стилей с одного объекта на другой, всё было очень костыльно. В Фигме можно копировать как отдельные свойства (заливку, обводку), так и целиком весь стиль. А можно вообще создать заготовленные стили (так же, как стили текста) и применять их к любому объекту.

Впоследствии достаточно изменить сам стиль, чтобы поменялся внешний вид всех связанных объектов. Именно такие мелочи и оставляют приятное послевкусие от работы. Figma автоматически «цепляет» шрифты из базы Google Fonts, что очень удобно, бесплатно и не требует лишних телодвижений. Собственные шрифты подключить тоже можно: десктопная версия делает это автоматически, для браузерной версии устанавливается специальная надстройка Font Helper. Иногда могут быть баги, когда шрифты неверно отображаются, если с документом поработал пользователь без установленных гарнитур, но в целом система работает отлично.

Привязки

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

Работа привязок объектов на макете-примере

Конечно, не всё работает так гладко. Во-первых, чтобы хорошо овладеть навыком привязки, придётся повозиться, перебирать методом тыка и тестировать. Масштабировать макеты в Figma можно в очень разумных пределах, иначе всё начинает ломаться и сваливаться. Например, изменить макет с ширины 320 px до 480 px можно, Фигма растянет всё красиво.

А вот, например, просто сузить макет шириной 1024 px до 768 px (и уж тем более до 320 px), конечно, не получится, придётся допиливать блоки руками и настраивать новые параметры. Но всё равно, привязка сильно выручает.

Удобство работы со слоям

После Фотошопа и Иллюстратора — это просто отдушина. Организовано настолько хорошо, что можно не брать в руки мышь (частично фигмовцы скопировали подход у Скетча). Ты не отвлекаешься на выделение слоев и их перетаскивание. Переход к дочерним слоям и обратно, переименование, в том числе групповое, перемещение фокуса по дереву слоев — всё это на кончиках пальцев.

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

Фигма — это еще и векторный редактор. Примитивы, перо, узлы, кривые Безье — всё это есть. Однако в этом плане Фигма даже в подметки не годится любому полноценному векторному редактору: Adobe Illustrator, Corel Draw, Xara Designer. Для простейших манипуляний или иконок годится, но не более.

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

Фигмовцы — молодцы, постарались, чтобы продукт был всеядным и переход с других программ был максимально простым. Фигма способна импортировать файлы Sketch. Не идеально, конечно: сложные макеты Figma открывает не совсем корректно, но это лучше, чем ничего. Еще одно: Фигма вставляет PNG-файлы из буфера обмена, сохраняя прозрачность! О, как мне этого не хватало в Фотошопе.

Интерактивные прототипы и анимированные переходы

Фигма пытается охватить всю область прототипирования, поэтому с первых версий добавили функции интерактивных прототипов, планомерно улучшая и добавляя новые фишки. Сейчас это и анимированные переходы между макетами, и фиксация блоков при прокрутке, и возможность сразу посмотреть макет на мобильном телефоне через приложение (У Фотошопа была отличная функция Device Preview по тому же принципу, но в CC2018 её зачем-то решили вырезать.) В общем, при желании можно соорудить полноценный «живой» прототип. Пусть ей далеко до Axure, но здесь всё сразу и «из коробки».

Когда макетов много, схема прототипа превращается в военную карту Второй мировой

Источник: liderpoiska.ru

Figma — где скачать и как установить программу на компьютер

Онлайн-сервис Figma: принцип работы, лучшие фишки облачной платформы и полезные лайфхаки

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

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

1. Регистрация в Figma

Первое что вам необходимо сделать это перейти по адресу figma.com. В верхнем правом углу нажмите на кнопку Sign up.

Во всплывающем окне можно авторизоваться с помощью Google аккаунта, либо ввести e-mail и пароль. Рассмотрим второй вариант. Ввожу e-mail и пароль. Нажимаю на кнопку Create Account.

На следующем шаге укажите ваше имя и выберите род деятельности. Например «Design». Этот выбор ни на что не повлияет в дальнейшем.

Если хотите получать полезную рассылку от фигмы, то поставьте галочку напротив надписи «I agree to join Figma’s mailing list» и нажимаете на кнопку «Create Account».

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

Проверьте вашу почту и найдите письмо от Figma с заголовком «Verify your email address». Нажмите на кнопку для подтверждения регистрации верификации email адреса.

Figma — платная или бесплатная программа

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

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

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

Работа с объектами

Объекты, помещенные на холст, можно редактировать. За это отвечают три раздела: Design, Prototype и Inspect.

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

Prototype. Позволяет расширить функционал объекта. Например, можно связать два объекта в разных фреймах ссылками.

Inspect. Здесь можно посмотреть цвет, размеры и другие параметры объектов. В отличие от вкладки Design, менять настройки нельзя. Этот раздел полезен для разработчиков. Можно быстро скопировать код объекта и легко вставить в свою верстку.

Что ещё подойдёт вместо GitHub Desktop?

Этим вопросом я задалась уже позже. Мне стало интересно, какие ещё есть варианты.

Ну во-первых, пушить изменения на удалённый репозиторий можно с помощью Git.

На мой ноутбук программа установилась нормально. Я пробовала залить изменения через консоль — всё получилось.

Во-вторых, есть разные аналоги GitHub Desktop: SmartGit, SourceTree и т.д. Но фишка в том, что большинство из них 32-битной Windows 7 не подходят. Я много чего пробовала установить, даже архивные версии, которые якобы работают и на x86. Может, есть какие-то ещё варианты (если вы знаете — поделитесь, пожалуйста), но ноутбук подружился только с TortoiseGit.

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

Открывается окно, там проверяем, что изменения пойдут в нужный репозиторий и нажимаем «ок».

Работа с TortoiseGit

Стоимость

Навороченная версия Figma стоит дороже, чем Photoshop: 860 рублей в месяц против 598 соответственно.

Однако у Figma есть бесплатный тарифный план.

Photoshop предлагает бесплатный семидневный период, по истечении которого за использование программы придется заплатить.

Photoshop можно купить только с подпиской сразу на год, а в подарок к подписке дадут доступ к Lightroom и облачному хранилищу.

Вот вся тарифная линейка Photoshop для индивидуальных пользователей:

Инструменты и возможности Figma

Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.

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

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

Начать работу в командном режиме просто.

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

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

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

Компоненты

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

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

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

Фреймы

Фреймы (артборд, холст) — это рабочие пространства. Чтобы вызвать панель фреймов, нажмите F. Есть библиотека предустановленных артбордов.

Можно сочетать рядом несколько фреймов, как на примере ниже:

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

Сетки

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

Чтобы настроить сетку, нажмите «+» рядом с надписью Layout Grid:

По умолчанию установится значение расстояния между линиями 10 px. Задайте необходимую ширину сетки:

Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid.

Если вы работаете с мелкими деталями, вам может понадобиться дополнительная разметка. Чтобы добавить нужные линии, щёлкните ещё раз на «+».

Отличия десктопной версии Figma от браузерной

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

Отличия десктопной версии:

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

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

Работа с изображениями

Изображения в Фигме — это не отдельные объекты, а заливка фрейма.

Как добавить изображение:

• перетащить с рабочего стола на фрейм,
• добавить через File,
• использовать инструмент Place Image.

Изображение загружается с автоматическим параметром заполнения.

Параметры заливки изображений:

• Fill ― изображение заполняет фрейм без учёта пропорций,
• Fit ― изображение должно отразиться полностью, но при несовпадении пропорций и фрейма появляется пустое место или картинка обрезается,
• Crop ― изображение можно приблизить только нужным кусочком, а лишние части обрезать,
• Tile ― изображением можно «замостить» фрейм.

Работа со стилями и цветами

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

Стили градиентов:

Чтобы добавить градиент на рисунок, кликните на «+» в разделе Fill и выберите подходящий:

Регулируйте настройки градиента: подбирайте нужный цвет, интенсивность, количество точек градиента и т. д.

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

В этом списке вы можете выбрать из уже созданных стилей или собрать свой вариант. Нажмите «+» и назовите свой стиль. Так он сохранится у вас в библиотеке:

Слои и группы

Слои — это содержимое фрейма: картинки, текст, видео. Принцип работы со слоями в Фигме очень похож на Photoshop.

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

Чтобы объединить элементы внутри фрейма, нажмите клавиши Ctrl + Alt + G на Windows и Cmd + Opt + G на MacOS.

Чтобы разгруппировать объекты, нажмите Ctrl + Shift + G на Windows и Cmd + Shift + G на MacOS.

Типографика

Figma работает с Google шрифтами ― они унифицированы и не слетают при передаче макета. Но если вы хотите использовать свои варианты, установите плагин Font Helper для десктопной версии и используйте шрифты с вашего компьютера.

Нажмите на букву Т в верхней панели сервиса, чтобы создать текст. Все настройки вы найдёте справа от рабочей поверхности:

Установка плагинов

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

В разделе Community кликните на Plugins и прейдёте в раздел Explore:

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

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

• Центральный процессор: 1.6 ГГц.
• Оперативная память: 1 Гб.
• Пространство на жестком диске: от 100 Мб.
• Платформа: Microsoft Windows 32/64 Bit.

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

Разработчик:	Figma
Информация обновлена и актуальна:	2022 год
Название:	Figma
Платформа:	Windows XP, 7, 8, 10
Язык:	Русский
Лицензия:	RePack
Пароль к архиву:	bestsoft.club

Источник: fobosworld.ru

Фигма для веб дизайна — главные отличия от других графических редакторов

Фигма — относительно новая бесплатная программа для веб дизайнера, который знает цену своему времени и идёт в ногу с тем самым временем.

1. Figma программа, которая работает в браузере

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

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

2. Фигма работает в облаке

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

Вы просто делаете работу, как дизайнер, закрываете браузер, а всё уже и так сохранено, и ничего не пропадет никогда.

Это значительно ускоряет работу, особенно для больших команд.

3. Командная работа в Figma

Раз уж заговорили о больших командах нужно сказать, что Фигма — это как раз то, что им нужно. Больше никаких костылей, типа Zeppelin и тому подобное — все работает из одного клиента. Не нужно всем участникам проекта иметь рабочий Mac.

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

4. Чат

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

5. Контроль версии

Вы всегда можете видеть кто и когда делал изменения в макете и «откатить» работу до нужного момента, создать копию работы из истории и … да найти всё, что угодно.

Контроль версий работает так же, как и Git, если вы знаете, что это такое. Только работает он намного проще и приятнее.

А если, с Гит не знакомы, то Полное руководство GIT для начинающих https://beonmax.com/courses/git/ вы также найдёте на beONmax.

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

6. Constraints

И в Sketch такое есть, только кто нам скажет, когда это появилось — до выхода Фигма или после?)) Да ладно?! Неужели после?)) в общем, constraints.

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

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

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

7. Сетка в Фигма

Модульная сетка в Фигма — это нечто прекрасное. Это не просто направляющие, по которым вы можете выравнивать блоки сайта — это настоящий супер-инструмент!

Сетка в Figma прикрепляет к себе контент, который вы можете привязывать посредством constraints. Это позволяет создавать адаптивные и резиновые версии макетов за считанные минуты, а то и секунды.

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

8. Компоненты в Figma

Это не новинка, в Скетче такое уже давно есть и называется там символами. В чем-то они похожи, а в чем-то и отличаются.

Так при создании нового компонента в Фигма, он (компонент) не перемещается на отдельный артборд, а остается там, где и был создан. Создавая дочерние элементы компонента, вы не создаёте его копии, как таковые, а делаете нечто иное.

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

Но есть масса способов, которые лечат эту проблему на этапе создания самого компонента. Об этом мы поговорим на уроке про компоненты (раздел Профессиональные инструменты Figma) — смотрите полную программу курса Figma для Веб дизайнера — с нуля до профессионала https://beonmax.com/courses/figma/.

9. Шрифты гугла всегда с вами

Потому, что это веб приложение, и оно всегда онлайн и с ним всегда вся библиотека гугла. То есть все, что есть на гугл.фонт все есть и у вас в Фигма.

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

Опытные используют для лечения такой проблемы плагин. О плагинах и том как их использовать мы поговорим в соответствующем уроке — (раздел Профессиональные инструменты Figma) — смотрите полную программу курса Figma для Веб дизайнера — с нуля до профессионала https://beonmax.com/courses/figma/.

10. По мелочи

— Svg и PDF экспорт, причем очень быстрый экспорт в один клик

— Интеграция с avocode, zeppelin, dribble

— Живой чат поддержки. Воистину живой — ответ 2-3 часа

— Фигма бесплатная для отдельных пользователей и для небольших групп на два редактора

А теперь немного о “плохом”

Зависимость от сети. Фигма не работает без интернета, равно, как и ваш браузер

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

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

Обо всех этих инструментах максимально подробно идет речь в курсе Figma для Веб дизайнера — с нуля до профессионала https://beonmax.com/courses/figma/.

Поделитесь в социальных сетях

Источник: beonmax.com