Переходим к практической части. Как вы уже догадались, использовать будем Figma. Сначала рассмотрим, какие достоинства и недостатки у этого графического редактора, а потом приступим к изучению — как с его помощью создавать дизайн.
Начинаем с азов. Сегодня мы изучим, как отрисовать прямоугольник, линию, стрелку и текстовый блок. Этого будет достаточно для создания таск флоу всех видов и простых страниц.
В конце урока, как обычно, вас ждет много практических заданий для закрепления материала.
- Почему стоит выбрать Figma?
- Как начать пользоваться? Регистрация
- Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев
- Рисуем прямоугольник
- Выделяем, перемещаем и изменяем размеры объектов
- Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте
- Настройка свойств объекта. Позиция и размер. Как зафиксировать пропорции. Угол поворота. Скругление углов. Цвет заливки. Параметры обводки.
- Окно выбора цвета. Копирование и вставка цветового значения
- Добавляем текст. Задаем границы текстового блока. Параметры текста
- Рисуем линию и стрелку
- Зачем нужны слои. Порядок отрисовки
- Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу
- Домашнее задание
- Выводы
Почему стоит выбрать Figma?
Этот редактор замечателен во всех аспектах и выбираем мы его не из-за простоты или бесплатного доступа. Он действительно мощный. Это невероятно, но некоторые функции реализованы лучше, чем в платном Sketch. Вот лишь несколько из них: цветовые стили, auto layout. Рассмотрим, какие преимущества есть в Figma:
Figma за 13 минут для верстальщиков и веб-дизайнеров
- Бесплатный – большинство функций даются даром, хотя и существуют платные планы для больших команд и проектов. Я работаю с Figma не первый год и могу заверить, что вам хватит его с головой, не вкладывая ни копейки. Все, что нужно новичку идёт в комплекте;
- Прост в освоении – иногда начинают обучение с Photoshop, который излишне сложен и перегружен ненужными функциями для «чайника». Мы поступим мудрее: освоим Figma, а потом вернемся к Photoshop, что будет в разы легче;
- Нетребователен к компьютеру – этот графический редактор заработает на любом ноутбуке, даже самом слабеньком. Главное, что бы запустился браузер. Также не имеет значения, какую операционную систему вы используете (Windows, MacOS или Linux);
- Работает в браузере – для начала вам даже не нужно ничего устанавливать. Зарегистрировались и работаем. Удобно показывать заказчикам. Десктопная версия немного быстрее на огромных проектах, поддерживает локальные шрифты, но в целом и начать можно и с браузерной версии, что мы и сделаем;
- Есть все необходимые функции и даже больше – обеспечивает широчайшие возможности от векторного редактора до создания интерактивного прототипа, который можно мгновенно протестировать в смартфоне (выглядит, как настоящее приложение), совместное редактирование дизайна и многое другое. Все это нам предстоит изучить в будущем.
Как начать пользоваться?
Для начала работы нужно зарегистрироваться на сайте Figma с помощью настольного компьютера или ноутбука, запустив браузер. Смартфон не подходит, так как с него можно только просматривать ранее созданный дизайн. Вам нужен рабочий электронный почтовый ящик (email). Он используется, как логин.
Что такое фигма, зачем она нужна.
- Заходим на сайт Figma — переходим по этой ссылке и сразу добавляем ее в закладки браузера. После регистрации и входа будем использовать эту закладку для запуска Figma словно обычное приложение. Нас встречает анимация, которая показывает одно из ключевых преимуществ Figma — возможность совместно и одновременно редактировать файл (возможно вы встречали аналогичную функцию в Google Docs). Поэтому видно разноцветные курсоры с именами:
- Переходим к форме регистрации — для этого ищем и нажимаем на кнопку Sign up (зарегистрироваться) на главной странице в правом верхнем углу:
- Заполняем первый шаг формы регистрации — вводим ваш адрес электронной почты в поле Email. Придумываем пароль и вводим его в поле Password. Email и пароль можно будет сменить позже при надобности. Нажимаем кнопку Create account и переходим к следующему шагу. Есть и другие способы регистрации (например, с помощью учетной записи Google), но они не такие универсальные;
- Заполняем второй шаг формы регистрации — вводим свое имя (можно с фамилией) в поле Your name на английском языке. Это имя будут видеть другие участники проекта, например, ваш заказчик. Оно будет всегда отображаться в правом верхнем углу запущенного приложения (точнее первая буква). Кстати, если не указывать имя, то оно будет автоматически сгенерировано из адреса электронной почты. Имя можно будет сменить позже. Далее в выпадающем меню What kind of work do you do? указываем Design. Если хотите получать новости о Figma по электронной почте, то ставим галочку напротив I agree to join Figma’s mailing list. Но вы всегда можете почитать последние обновления в блоге. Нажимаем кнопку Create account;
- Добро пожаловать! Регистрация почти завершена — Figma приветствует нас и предлагает указать название нашей команды. Но так как мы работаем одни, то нажимаем Do this later;
- Закрываем всплывающие подсказки — Figma очень дружелюбна и сразу знакомит нас со своим интерфейсом с помощью всплывающих советов. Эти подсказки очень полезны для дизайнеров, которые уже знакомы с другими графическими редакторами. Кроме того снабжаются ссылками на документацию. Но для нас они бесполезны, так как мы не знает абсолютно ничего. Поэтому нажимаем на крестик в углу и закрываем их;
- Все! — Figma готова к работе. Разверните браузер на весь экран, чтобы получить максимум полезного пространства. Есть еще несколько нюансов прежде, чем мы начнем;
- Подтверждаем адрес электронной почты (email) — вы же знаете, что в большинстве сервисов нужно подтвердить адрес почты на случай, если вы, например, забудете пароль. Figma не исключение. Проверяем почту и ищем письмо с названием темы Please confirm your email. Если не нашли, то проверяем папку со спамом. Если письмо угодило туда, то отмечаем, что это не спам. В Gmail, например, для этого есть специальная кнопка Report not spam, когда открываем письмо, которое попало в спам. Это очень важный момент, так как в дальнейшем, когда заказчик будет оставлять комментарии к вашему дизайну Figma будет отправлять письмо-уведомление об этом. А реагировать на замечания клиента нужно как можно быстрее. Итак, открываем письмо и нажимаем кнопку Confirm your email:
После нажатия мы будем перенаправлены на страницу Figma с недавно отредактированными проектами (файлами). Figma хранит все ваши проекты на удаленном сервере (это еще называют «в облаке»). Это значит, что вам не нужно ничего сохранять у себя на компьютере, все делается автоматически. Сверху страницы вы увидите уведомление о том, что ваш email подтвержден You have successfully confirmed your email address. Оно исчезнет через несколько секунд. Справа вы можете видеть изображения ваших проектов. Смотрите, Figma добавила несколько для ознакомления. Наш пустой проект находится в самом верху. Кликаем на него и возвращаемся в редактор. 
Если вдруг попадете на эту страницу снова, просто выберите ваш проект, кликнув по нему. Это лишь сейчас он выглядит, как шахматка, ведь он совсем пуст. А теперь приступим к изучению интерфейса Figma.
Обзор интерфейса Figma
Интерфейс любого графического редактора можно условно разделить на несколько ключевых частей. Каждая из них выполняет специфическую функцию и активно используется во время работы. Рассмотрим мельком каждую часть:
Источник: frusia.pro
Фигма — бесплатная программа для веб дизайнера
Фигма — относительно новая бесплатная программа для веб дизайнера, который знает цену своему времени и идет в ногу с тем самым временем. Если ты читаешь эту статью, то ты молодец, потому что в тебе уже есть зерно сомнения по поводу того, что фотошоп вечен и все такое.
Figma программа, которая работает в браузере
Фигма не требует никакой установки, ты можешь ее открыть прямо в браузере и работать. Это невероятный плюс, который отчасти и минус, но о плохом поговорим в конце этой статьи.
Веб приложение это круто в плане того, что можно использовать ее на любой платформе (Windows Mac Linux). Для первых двух, даже есть десктопная версия, которая по сути ничем не отличается от браузерной.
Фигма работает в облаке
Это вытекает из того, что это браузерный редактор. Соответственно, тебе больше не нужно сохранять свои файлы, заливать их в облако и показывать разрабам иди заказчикам. Ты просто делаешь работу, как дизайнер, закрываешь браузер, а все уже и так сохранении и ничего не пропадет никогда. Это значительно ускоряет работу, особенно для больших команд.
Командная работа в Figma
Раз уж заговорили о больших командах нужно сказать, что Фигма — это как раз то, что им нужно. Больше никаких костылей, типа Zeppelin и тому подобное — все работает тз одного клиента. Не нужно всем участникам проекта иметь рабочий Mac. Не нужно оплачивать годовую лицензию всем участникам работы, в Фигма оплата для команды работает на месяц.
То есть покупать командную лицензию можно только тем, кто действительно работает в данный момент, а если он отправится в отпуск, то можно забить на него и сэкономить немного денег. К тому же покупать лицензию нужно только для тех участников, которые непосредственно редактируют проект, например, разрабам, которым достаточно просматривать его лицензия не нужна. Разве это не круто.
Чат
Прямо в программу вшит чат, которым могут пользоваться все и каждый участник проекта получит сообщение на почту о том, что в чате оживилась беседа.
Контроль версии
Ты всегда можешь видеть и когда делал изменения в макете и откатить до нужного момента и … блин, да все, что угодно. Можно продолжить работать с этого момента, можно создать копию и продолжить работать, при это остальные могут работать с последнего сохранения. Кое-кому с костылями, типа Abstract или динозавру-фотошопу о такой простоте работы только мечтать приходится.
Constraints
И в Scetch такое есть, только кто мне скажет, когда это появилось — до выхода Фигма или после?))Да ладно?! Неужели после?)) в общем, constraints. Это такая фича, которая позволяет привязывать объект или группу объектов к определенным сторонам родительского фрейма. То есть, при масштабировании родителя все его внутренние части будут находиться в четко обозначенном месте. Это очень круто работает для создания адаптивных версий сайта или изменении размера каких-то его частей.
Сетка в Фигма
Модульная сетка в Фигма — это нечто прекрасное. Это не просто направляющие по которым ты можешь выравнивать блоки сайта — это настоящее супер оружие, которым программа кладет на лопатки старенького динозавра от адобе. Сетка в Figma прикрепляет к себе контент, который ты можешь привязывать по средствам constraints, что позволяет создавать адаптивные и резиновые версии макетов за считанные минуты, а то и секунды. Сетка создается только внутри фрейма, а вот фрейм можно создать и внутри другого фрейма, при чем количество вложенностей не ограничено и для каждого можно пилить свою сетку.
Компоненты в Figma
Это не новинка, в скече такое уже давно есть и называется там символы. В чем-то они похожи, а в чем-то и отличаются. Так при создании нового компонента в Фигма он не перемещается на отдельный арт борд, а остается там, где и был создан. Создавая дочерние элементы компонента, ты не создаешь его копии, как таковые, а делаешь нечто иное.
Ты всегда можешь поменять стили дочернего элемента и при изменении этих же стилей у родителя они не поменяются у копии. Единственное, что ты не можешь менять в дочернем элементе — это размер вложенных в него шейпов. Но есть масса способов, которые лечат эту проблему на этапе создания самого компонента, но об этом в другой статье.
Шрифты гугла всегда с тобой
Потому, что это веб приложение и оно всегда онлайн с ним всегда вся библиотека гугла. То есть все, что есть на гугл.фонт все есть и у тебя в Фигма. Это просто прекрасно — ничего не нужно доканчивать. Но есть и минут — посмотреть в динамике изменение шрифта для подбора не получится — нужно обязательно его выбрать, чтобы он применился.
Как добавить локальные шрифты в Figma читай по ссылке
По мелочи :
- Svg и PDF экспорт, при чем очень быстрый экспорт в один клик.
- Интеграция с avocode, zeppelin, dribble
- Живой чат поддержки. Воистину живой — ответ 2-3 часа.
- Фигма бесплатная для отдельных пользователей и для небольших групп на 2 на два редактора
А теперь о плохом
Зависимость от сети. Фигма не работает без интернета, равно, как и твой браузер
Меленькое комьюнити. Инструмент довольно новый и информации о том что и как тут не очень много
Источник: figmaweb.ru
Фигма что за программа и для чего нужна
Квадрокруг — особая форма значка, которая становится все более популярной в UI-дизайне. Часто используется в приложениях iOS.
В Figma создать такой элемент просто.
Фото в тексте: Thalion
Перейдите к настройкам радиуса на правой панели и выберите параметр для отображения отдельных углов. Теперь щелкните значок меню, и вы увидите возможность создания радиуса прямоугольной формы. Также на панели можно выбрать фигуры, похожие на элементы интерфейса iOS.
Совет 2: Использовать имя цвета вместо HEX
По умолчанию цвета в Figma обозначаются в формате HEX. Однако эту настройку можно поменять. Для этого введите имя цвета во входных данных, где обычно отображается шестнадцатеричное значение. Вот пример результата:
Фото в тексте: Thalion
Имя можно придумать любое, насколько хватает фантазии. Нельзя сказать чтобы эта функция имела практическую пользу, но она точно добавит удовольствия от использования программы.
Совет 3: Как быстро переименовать фрейм
Как правило, для изменения имени фреймов используют горячие клавиши CTRL + R (для Windows) и CMD + R (для iOS). На самом деле достаточно дважды щелкнуть на текущее имя фрейма на холсте, и оно будет доступно для редактирования.
Стань профессиональным дизайнером — большой выбор программ обучения можно найти в каталоге курсов дизайна.
Фото в тексте: Thalion
Совет 4: Как отрегулировать размер текстового слоя в соответствии с содержимым
Чтобы размер текстового слоя имел ту же ширину, что и его содержимое, достаточно двойного щелчка по правому краю слоя. Все произойдет автоматически.
Фото в тексте: Thalion
Совет 5: Как обойти ограничения при изменении размера фрейма
В Figma при изменении размера родительского фрейма все остальные внутренние элементы автоматически расширяются или сворачиваются. Однако это не всегда уместно.
Фото в тексте: Thalion
Чтобы обойти эту автоматическую настройку, необходимо перетаскивать край фрейма, удерживая клавишу CTRL (для Windows) или CMD (для iOS). Благодаря этому ограничения будут игнорироваться. Изменение ширины или высоты фрейма никак не отразится на элементах внутри.
Совет 6: Предварительный просмотр элементов в режиме контуров
Режим контуров (outline) полезен, если нужно убедиться, что структура компонента или фрейма выполнена правильно.
Фото в тексте: Thalion
Нажмите клавиши CTRL + Y (для Windows) или CMD + Y (для iOS), чтобы активировать режим контуров. Нажмите ярлык еще раз, чтобы выключить его.
Совет 7: Как копировать и вставлять эффекты
Чтобы скопировать эффект или стиль в Figma, щелкните край строки с параметром. После этого скопируйте с помощью клавиш CTRL + С (для Windows) или CMD + С (для iOS), затем выберите целевой слой и нажмите CTRL + V (для Windows) или CMD + V (для iOS).
Фото в тексте: Thalion
Такая функция существенно экономит время.
Совет 8: Как группировать с помощью фрейма
Используйте комбинацию клавиш CTRL + ALT + G (для Windows) или CMD + OPTION + G (для iOS) чтобы объединить элементы внутри фрейма, а не только стандартную группу.
Фото в тексте: Thalion
Группировка фреймом предпочтительнее стандартной группы, так как впоследствии элементы можно быстро превратить в компоненты, использовать автоматический макет и так далее.
Совет 9: Как заменять компоненты функцией стрелок
Заменять компоненты и перемещаться по ним можно с помощью функции стрелок. Это удобнее, чем щелкать мышкой по каждой позиции меню.
Фото в тексте: Thalion
Совет 10: Как настроить переключение между вариантами
Обычно варианты компонентов отображаются в виде раскрывающихся списков. Чтобы упростить работу с вариантами из двух опций, можно создать формат переключателя. Для этого одному варианту присвойте имя «Да», «Верно» или «Вкл.», а второму — «Нет», «Ложь» или «Выкл.». Переключатель появится автоматически.
Фото в тексте: Thalion
Дополнительный совет: как перемещать компоненты между документами
До августа 2021 года в Figma не было простого способа перенести компоненты в другую библиотеку. Для этого необходимо было воссоздавать их.
Теперь для этого нужно выбрать компоненты, которые следует переместить, вырезать их из исходного файла и вставить в новое место назначения. Если документ является библиотекой, документы, использующие его, получат обновление, которое уведомит вас о некоторых устаревших компонентах. Все, что вам нужно сделать, это подтвердить изменения и указать новую библиотеку.
Источник: rb.ru