Курс Figma для веб дизайнера
KURSY ONLINE

Курс Figma для веб дизайнера

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

Онлайн Курс Figma для веб дизайнера

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

Онлайн Курс Figma для веб дизайнера

0:00
/
Figma Установка

В чем главные отличия Figma от других редакторов

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

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

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

0:00
/
Figma Структура файлов

Figma работает в облаке

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

0:00
/
Figma Обзор интерфейса программы

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

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

Чат Figma

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

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

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

Figma Constraints

И в Scetch такое есть, только кто мне скажет, когда это появилось до выхода Фигма или после?))Да ладно?! Неужели после?)) в общем, constraints. Это такая функция, которая позволяет привязывать объект или группу объектов к определенным сторонам родительского фрейма. То есть, при масштабировании родителя все его внутренние части будут находиться в четко обозначенном месте. Это очень круто работает для создания адаптивных версий сайта или изменении размера каких-то его частей. Данная функция в 1000 раз укоряя работу над адаптивным дизайном.

Сетка в Figma

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

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

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

Шрифты Google всегда с тобой

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

0:00
/
Figma Сохранение и передача файла
0:00
/
Figma Файлы Sketch в Figma
0:00
/
Figma Горячие клавиши
0:00
/
Figma Move tool, Scale tool
0:00
/
Figma Выравнивание объектов
0:00
/
Figma Прямоугольник + овал
0:00
/
Figma Полигон и звезда
0:00
/
Figma Обводка
0:00
/
Figma Эффекты
0:00
/
Figma Заливка + градинет
0:00
/
Figma Изображения
0:00
/
Figma Маска
0:00
/
Figma Перо
0:00
/
Figma Инструмент - Текст
0:00
/
Figma Группа
0:00
/
Frame
0:00
/
Figma Булевы группы
0:00
/
Figma Комментарии
0:00
/
Figma Эффекты наложения
0:00
/
Figma Экспорт
0:00
/
Figma Плагины
0:00
/
Figma Скрытые инструменты Figma
0:00
/
Figma Стили
0:00
/
Figma Constraints
0:00
/
Figma Constraints
0:00
/
Figma Сетки. Часть 1
0:00
/
Figma Сетки. Часть 2
0:00
/
Figma Компоненты
0:00
/
Figma Мультикомпоненты
0:00
/
Figma Практика создания мультикомпонента
0:00
/
Figma Основа атомарного дизайна
0:00
/
Figma Что должно быть в твоей
0:00
/
Figma Практика
0:00
/
Figma Практика
0:00
/
Figma Практика
0:00
/
Figma Создаем кликабельный
0:00
/
Figma Создаем кликабельный
0:00
/
Figma Создаем кликабельный
0:00
/
Figma Создаем кликабельный
0:00
/
Figma Создаем кликабельный
0:00
/
Figma Эффекты взаимодействия в прототипе
Отблагодарить нас за предоставленный контент
Внеси небольшой вклад 10$ для развития нашей площадки чтоб мы могли предоставить тебе еще больше полезного контента


Share Tweet Send
0 Комментарии
Загрузка...
You've successfully subscribed to Pinta IT 🍺
Great! Next, complete checkout for full access to Pinta IT 🍺
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.