figma обучение с нуля бесплатно
20 бесплатных онлайн-курсов по Figma
Для начинающих с нуля в 2021 году.
1. «Figma. Начальный уровень» от GeekBrains
Длительность: 5 уроков, каждый по 30 минут.
Формат: видеоуроки + домашние задания.
Программа обучения:
Чему научитесь: пользоваться графическим редактором Figma на базовом уровне и с его помощью делать несложные макеты сайтов.
Преподаватель: Илья Полянский. Ведущий дизайнер цифровых продуктов в «Почте России». Опыт работы — 7 лет.
💰 На правах рекламы. «Профессия UX/UI-дизайнер» от Contented 💰
Продолжительность курса: 9 месяцев.
Документ об окончании: удостоверение о повышении квалификации установленного образца.
Формат: видеоуроки + домашние задания с проверкой и обратной связью от личного наставника + общение с другими студентами в закрытом комьюнити + удалённая стажировка.
Программа обучения:
Чему научитесь:
2. «Основы Figma» от «Нетологии»
Длительность: 16 лекций общей продолжительностью 17 часов, 7 из них уделено теории, а оставшиеся практике.
Формат: видеолекции и упражнения.
Программа:
Чему научитесь:
3. «Бесплатный курс: Веб-дизайн с нуля» от YouTube-канала «Уроки Web, Mobile и UI/UX дизайна в Figma»
Длительность: 84 урока, продолжительность от 10 секунд до 10 минут.
Формат: видеоуроки.
Программа обучения: студенты рассмотрят все аспекты работы с Фигмой, начиная от установки и запуска программы и заканчивая проектированием адаптивного дизайна.
Чему научитесь:
4. «Курс Figma» от YouTube-канала «Наука Дизайна»
Длительность: 15 уроков, продолжительность каждого 5–25 минут.
Формат: видеоуроки.
Программа обучения: манипуляции с объектами, слои и маски, сетки и направляющие, а также другие темы, которые необходимо знать для прототипирования.
Чему научитесь:
5. «Уроки Figma» от UX Mind School
Длительность: 12 уроков, продолжительность 5–20 минут.
Формат: видеоуроки.
Программа обучения: слушатели узнают об азах работы с популярнейшим графическим редактором, а также несколько лайфхаков от профессионального веб-дизайнера.
Чему научитесь:
6. «Бесплатный подробный курс по Фигме» от Алексея Бычкова
Длительность: 21 урок, продолжительность 5–25 минут.
Формат: видеоуроки.
Программа обучения: студентам предстоит познакомиться с Figma и понять принцип её работы. Основные темы: панель слоев, модульная сетка, привязки, цвет, эффекты. Слушатели узнают, как установить плагины в Фигме и как создать ссылку на проект.
Чему научитесь:
Автор курса: Алексей Бычков — дизайнер со стажем более 17 лет. Автор двух книг по дизайну. Основал онлайн-школу по веб-дизайну.
7. «Figma» от Алексея Бычкова
Длительность: 36 уроков, продолжительность 2–40 минут.
Формат: видеоуроки.
Программа обучения: учащиеся узнают о различных плагинах для Фигмы, в том числе и FigJam. Также слушатели узнают о «фишках» профессионального веб-дизайнера. В конце курса преподаватель на примерах покажет, почему Figma лучше, чем Photoshop.
Чему научитесь:
Автор курса: Алексей Бычков.
8. «Уроки Figma» от Дениса Тимошицкого
Длительность: 22 урока, продолжительность 2–36 минут.
Формат: видеоуроки.
Программа обучения: в курс включены создание логотипа, дизайна мобильного приложения и многостраничного сайта. Студенты узнают о компонентах Фигмы, создании якорных ссылок и горячих клавишах.
Чему научитесь:
9. «Дизайн многостраничного сайта в Figma» от Дениса Тимошицкого
Длительность: 17 уроков, продолжительность 20–35 минут.
Формат: видеоуроки.
Программа обучения: на курсе детально рассматривается тема проектирования многостраничного сайта с помощью Фигмы.
Чему научитесь:
10. «Дизайн интернет-магазина в Figma» от Дениса Тимошицкого
Длительность: 8 уроков, продолжительность 10–40 минут, также есть видео, которое длится 70 минут.
Формат: видеоуроки.
Программа обучения: в курс включены отрисовка главной страницы, каталога и карточек товаров, служебных страниц. Также студенты рассмотрят создание UI-кита — инструмента, ускоряющего разработку дизайна.
Чему научитесь:
11. «Проектирование и дизайн мобильного приложения» от Дениса Тимошицкого
Длительность: 15 уроков, продолжительность 15–25 минут.
Формат: видеоуроки.
Программа обучения: слушатели узнают о нюансах проектирования дизайна мобильных приложений.
Чему научитесь:
12. «Дизайн и вёрстка из Figma в HTML + CSS + JS» от Дениса Тимошицкого
Длительность: 5 уроков, продолжительность 17–40 минут.
Формат: видеоуроки.
Программа обучения: на курсе подробно разбирается создание первого экрана сайта и его последующая вёрстка.
Чему научитесь:
13. «Бесплатные уроки по Figma» от Евгения Смольского
Длительность: 20 уроков, продолжительность 2–17 минут.
Формат: видеоуроки.
Программа обучения: студенты узнают о горячих клавишах, которые ускорят работу в Фигме. Познакомятся со стилями, с компонентами и размытым градиентом. Также в курс включены занятия по созданию дизайна мобильного приложения.
Чему научитесь:
14. «Уроки Figma» от Moscow Digital Academy
Длительность: 12 уроков, продолжительность 4–27 минут, также есть один ролик, который идёт 60 минут.
Формат: видеоуроки.
Программа обучения: студенты познакомятся с Фигмой, создадут первый прототип и превратят его в красивый сайт.
Чему научитесь:
15. «Уроки Figma» от YouTube-канала Disarto
Длительность: 29 уроков, продолжительность 5–50 минут.
Формат: видеоуроки.
Программа обучения: проектирование музыкального приложения, прототипирование и анимация. Детальный курс, в котором рассматриваются темы, необходимые для понимания Фигмы, в том числе фреймы и группы, слои и ограничения, стили и сетки. Учащиеся рассмотрят различные плагины Figma и научатся их использовать в работе.
Чему научитесь:
16. «Уроки Figma» от Figma.Center
Длительность: 107 уроков, основная часть роликов длится 1–5 минут, но есть и несколько больших видеоуроков по 30–60 минут.
Формат: видеоуроки.
Программа обучения: максимально подробный курс, на котором рассматриваются все темы, нужные для работы с Фигмой. Слушатели узнают, что такое мокапы, прототипы и варфреймы. Познакомятся с плагинами.
Чему научитесь:
17. «Уроки Figma» от GloryANT
Длительность: 12 уроков, продолжительность 4–8 минут.
Формат: видеоуроки.
Программа обучения: в курс включены фигуры, слои, сетка, ограничители, стили и эффекты. Также учащиеся познакомятся с FigJam.
Чему научитесь:
18. «Figma уроки» от Амира Исламова
Длительность: 13 уроков, продолжительность 5–25 минут.
Формат: видеоуроки.
Программа обучения: слушатели познакомятся с Фигмой, создадут свой первый сайт, научатся пользоваться различными плагинами и узнают о лайфхаках, облегчающих работу.
Чему научитесь:
19. «Уроки Figma для новичков и джедаев» от Виктора Теплова
Длительность: 35 уроков, продолжительность 1–25 минут.
Формат: видеоуроки.
Программа обучения: курс познакомит учащихся с различными секретными техниками профессионального дизайнера и расскажет о плагинах, упрощающих работу. Главные темы: умные таблицы, компоненты, Auto Layout, иконки и логотипы. Слушатели смогут оптимизировать рабочий процесс и создавать дизайн быстрее.
Чему научитесь:
20. «Уроки по Figma» от YouTube-канала «Дизайн Легко!»
Длительность: 11 уроков, продолжительность 20–50 минут.
Формат: видеоуроки.
Программа обучения: в курс включены артборды, модульная сетка, градиенты, маски. Студенты узнают, как правильно размещать текст и создавать векторные формы.
Чему научитесь:
Профессиональный копирайтер. Более 100+ работ в портфолио. Пишу про онлайн-образование.
Обзор 5 лучших курсов по Figma: онлайн, бесплатные и платные
Если вас притягивает дизайн, то вы наверняка уже слышали про графический редактор Фигма и даже встречали курсы Figma с нуля. 👆 Поэтому держите мою личную подборку из ТОП-5 курсов по Figma для новеньких.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Авг 4, 2020 · 9 мин читать
Figma идеальна для визуального дизайна бесчисленного количества экранов, развития дизайн-систем, командной дизайн-работы, а еще хороша в отрисовке векторных иллюстраций и иконок.
В этой статье мы разберемся как прокачаться в ней по максимум, да на боевых проектах, чтобы попробовать все возможности на полную катушку!
Содержание:
Какие же курсы вошли в подборку ТОП-5 лучших онлайн-курсов
В ТОП-5 лучших онлайн-курсов Figma для новеньких, я включила те, которые помогут научиться дизайнить в этом редакторе уверенно и легко, а главное вся траектория построена так, чтобы прокачать ваши навыки на полную, с наглядной отдачей на каждом этапе. 👨🏻🎓 Я считаю, что образовательные программы из этой статьи хороши именно в комплексе.
Почему стоит пройти каждый курс
Каждый курс отличается по составу проектов, а, значит, чем больше вы практикуетесь, тем основательнее тренируете важные навыки для выполнения боевых заказов. Поэтому я рекомендую начинать с первого курса и осваивать их дальше друг за другом, постепенно. И еще, каждая программа насыщенна практикой. Обучение на каждой площадке проходит на русском языке, поэтому знать английский не нужно!
Почему порядок именно такой
Я предлагаю начать с тех курсов, которые дают практику по всему фронту проектов. Далее советую вынырнуть из digital, поработать вживую руками над проектами в команде и зарядиться. А затем с новыми силами нырнуть в большую онлайн или оффлайн траекторию.
Кому стоит изучить Figma
Ребятам, чьи глаза горят от веб-дизайна, ui-дизайна, проектирования интерфейсов и ux-дизайна. Для тех, кто стремиться расти как:
В чем сила Figma: какие проекты можно создавать в Фигме
Фигму применяют для веб-дизайна, дизайна мобильных приложений, приложений для умных часов, дизайна и проектирования и создания прототипов интерфейсов.
Среди клиентов Figma команды развивающие популярные сайты и приложения : Slack, Dropbox, Twitter, Microsoft, Dribbble, Github, и многие другие известные бренды.
Принцип подбора первого курса
На мой взгляд есть всего два критерия, которые важны на старте. Если кратко: ищите курс с легким стартом и ассортиментом классных и жизненных дизайнов.
И помните, каждая площадка по-умолчанию манит вас многогранностью Фигмы (сама Figma такая), поэтому отделяйте слова про редактор Figma, от слов о курсе. Т.е четко проверьте проекты и навыки, которые вам обещают натренировать, от рассказа про общие возможности Figma. Тогда с выбором не ошибетесь. К примеру если на странице курса встретите увлекательный рассказ, про то, как Figma помогает создавать прототипы интерфейсов, дизайн сайтов, иллюстрации и векторную графику — то проверьте, сделаете ли вы в итоге все это, или будет только что-то одно.
Чек-лист перед стартом первого курса
Перед тем как начинать курс по Figma еще раз проверьте себя по трем параметрам.
1. Онлайн-курс от Breezzly по программе Figma: создайте 4 проекта (сайт и приложения) с наставником
Объем курса: 4 часа, 4 проекта, 32 видеоурока
Стоимость: 4 000 ₽
Фишка: осваиваете инструмент на 4-х нестандартных (и жизненных) проектах: сайт, iWatch App, мобильное приложение и веб-приложение
Здесь вы осваиваете Figma — первый шаг в дизайне сайтов, интерфейсов и даже базовых прототипов с анимацией.
Курс хорош как первый шаг, полезен для прокачки в Фигма на интересных проектах: сайтах, интерфейсах и прототипах с анимацией. Курс даже помогает зажечься дизайном на старте.
Для кого: курс зайдет, если вы хотите познакомиться со всеми видами популярных проектов, которые можно создавать в Figma.
Чему научитесь
Автор курса: Анастасия Свеженцева, продуктовый дизайнер и бренд-дизайнер. 5 лет опыта работы в двух международных компаниях iSpring Solutions и Omega-R. Сейчас помогает стартапам и продуктовым командам по всему миру: проектирует интерфейсы мобильных и веб-приложений, создает сайты, помогает улучшить дизайн. Любит прорабатывать логотипы, фирменный стиль и уникальную графику с характером. Активно изучает коммерческую иллюстрацию, поведенческую психологию и брендинг. Преподает дизайн с 2015 года. Пришла в дизайн из программирования.
2. Figma от Skillbox – отточить навык работы в инструменте
Здесь вы изучаете досконально весь арсенал функций Figma. Если курсы Breezzly – это про создание проектов, то курс от Skillbox идеален как следующий шаг, когда после того как вы прорвались в дизайн сайтов и приложений с Figma и вам нужно слегка осмотреться и отшлифовать некоторые тонкости знаний инструмента, перед тем, как погружается в веб-дизайн и дизайн интерфейсов. Т.е довести навык до автоматизма.
Автор курса: Антон Рыбаков, 10 лет опыта в дизайне. Senior UI/UX Designer в «Крок». Создаёт UI/UX корпоративных мессенджеров, мобильных приложений и каталогов, личных кабинетов веб-сервисов.
Для кого: изучить все нюансы инструмента
Объем курса: 13 онлайн-уроков
Стоимость: 20 000 ₽
Фишка: отточите навык работы в Figma до автоматизма
3. Курс по веб-дизайну с Figma в Москве от Moscow Digital Academy (есть онлайн-формат) – получить опыт работы плечом к плечу в команде
Этот курс, для тех, кто хочет еще больше почувствовать дизайн. Поэтому большой упор в обучении сделан не только на редакторы, но и на приличный объем работы руками. Здесь вам предстоит работать маркерами, карандашами, резать, рвать, мять, клеить аппликации, а затем уже доводить до совершенства вашу дизайн-концепцию.
Автор курса: Влад Федорин, творческий директор «Moscow Digital Academy»; Евгений Черемных, Senior UX-designer Futurice; Юлия Ешкина, Независимый арт-директор.
Для кого: для тех, кому важно получить живой чувственный опыт влияния дизайна на восприятие
Объем курса: 48 академических часов + 85 практических на полном курсе
Стоимость: 69 900 ₽
Фишка: почувствуете вживую драйв от дизайна руками и создадите портфолио, возможностью трудоустройства и стажировок.
4. Дизайнер интерфейсов (UX/UI-дизайн) от Contented – постановка мышления проектировщика
Градус повышается, а значит мы зашли с Figma на поле дизайна интерфейсов. Курс знакомит вас со всеми этапами проектирования интерфейсов. Основной упор курса сделан на дизайн мобильных приложений. Поэтому как следующий шаг после сайтов я его рекомендую. На этом курсе вам не встретятся продвинутые уроки дизайна, модули про классные анимации, но зато здесь вас познакомят с комплексным подходом к дизайну интерфейсов: от исследования до передачи в разработку.
Автор курса: Юрий Ветров – директор по дизайну Mail.ru Group (на момент создания курса), Ксения Стренина – UX-Research Director Mail.ru Group (на момент создания курса), и другие.
Для кого: хорош для того, чтобы зайти впервые в систему проектирования интерфейсов и начать настраивать мышление на инженерный лад
Объем курса: 48 академических часов + 85 практических на полном курсе
Стоимость: 69 900 ₽
Фишка: осваиваете полный процесс проектирования: от исследования до дизайн-концепции интерфейса
5. Бесплатный онлайн-курс от Яндекс.Практикум «Каково это – быть дизайнером интерфейсов» (в продуктовой компании)
Курс Яндекс хорош для развития как продуктовый дизайнер. Здесь вы еще раз бегло вспомните, что изучали на прошлых курсах по Figma и продолжите набивать руку на множестве кейсов продуктового дизайна с Figma и на еще большем количестве разнообразных проектов.
Этот курс – финальная точка в изучении Figma под углом дизайнера интерфейсов. Хорош, чтобы зашлифовать всю базу навыков по Figma и выйти на следующий уровень – в продуктовый дизайн.
Автор курса: Команда дизайнеров Яндекс при поддержке их центра подготовки специалистов.
Для кого: для тех, кто хочет признания от бренда Yandex на российском рынке
Объем курса: 7 месяцев, 310 часов
Стоимость (платное продолжение): 91 000 ₽
Фишка: профессиональная траектория, диплом, помощь в трудоустройстве; Портфолио из 5 проектов, поддержка наставника, сертификат
А что изучать дальше: мой личный список источников вдохновения (Figma, After Effects и другие)
Пробегитесь еще раз по курсам, которые мы обсудили. Там самый смак, свежачок, практика и годнота. А теперь небольшая рекомендация по каналам, которые могут пригодится тем, кто ищет бесконечность. В подборке два английских курса и Youtube-каналы.
Youtube-каналы по Figma
Крайне рекомендую подписаться на официальный канал Figma – он интересен свежими советами (горячими с американского рынка), инсайтами применения Figma у клиентов, а также уроками по созданию дизайн-систем, сайтов и приложений: https://www.youtube.com/watch?v=Cx2dkpBxst8
Курсы по UI-дизайну на английском: следующий уровень
В этой подборке два курса с упором на After Effects и прокачку поведеческих аспектов в дизайне: переходов и микровзаимодействий. Ключевое отличие After Effects от Principle и InVision Studio в том, что с ним можно все. Он не такой практичный для интерфейсов, как инструменты прототипирования (Principle и InVision Studio), зато он про дизайн-концепции и поиск идеального решения.
After Effects – инструмент визуального и моушн-дизайна, а не прототипирование. Да, вы не создадите в нем анимации и поведение, которые можно пощупать и реализовать шустро в ближайшем будущем (для этого идеальны Principle и InVision Studio), зато он отлично снимает ограничения и прокачивает креативность в интерактивном дизайне.
Вывод и рекомендация
Начинайте с онлайн-курса по Figma на Breezzly и создавайте сайты, мобильные и веб-приложения, а затем берите курс с работой в команде и вживую руками, например курс от Moscow Digital Academy, а и уже затем запрыгивайте в долгие годовые траектории.
Figma: всё, что вам нужно знать
Это руководство предназначено для тех, кто только начинает работать с Figma.
В последние годы мы много пользовались Sketch и до сих пор остаемся его большим поклонником. Однако когда дело доходит до совместной работы, появлялись мучительные трудности и приходилось искать альтернативы. Что бы мы ни использовали, они казалась намного менее удобными и вызвали дополнительные трудности, с прототипированием дела обстояли аналогично. Figma пообещала облегчить нам жизнь и сдержала свое обещание.
Зайдите на figma.com, зарегистрируйтесь и следуйте инструкциям. Через пару минут все будет готово!
Вы могли заметить, что Figma позволяет создавать команды и проекты, о которых я расскажу позже, а пока просто создайте новый файл (из меню или с помощью cmd + N).
В отличие от Sketch, файлы Figma хранятся не на Вашем компьютере, а в облаке. Вы можете получить доступ ко всем проектам через браузер в любое время и в любом месте. Существует и отдельное приложение для Mac и PC. Я рекомендую использовать именно их, но это вовсе не обязательно.
Недостатки: вам все так же нужен Интернет. Однако вы можете заранее загрузить файл в приложение, чтобы работать в автономном режиме.
Figma позволяет быстро и точно импортировать файлы Sketch. Просто перетащите файл Sketch на холст Figma!
Также вы можете копировать отдельные элементы из Sketch, щелкнув по ним правой кнопкой мыши и скопировав их как SVG!
☝Совет: я рекомендую использовать приложение фигмы при импорте из Sketch, поскольку в браузере локальные шрифты не будут отображены и это испортит ваш файл.
Если раньше вы использовали Sketch, вам будет гораздо легче освоиться. Нажмите A или F, чтобы увидеть все параметры фрейма на панели свойств справа и выберите размер или же просто нарисуйте свой собственный фрейм. Как и в Sketch, вы можете работать с 1x (что означает фактический размер пикселя, поскольку при изменении размера нет потери качества). Вы по-прежнему можете экспортировать ассеты любого размера, которые могут вам понадобиться.
В отличие от традиционных артбордов, можно вкладывать фреймы отдельно друг в друга. Это позволит вам создавать более сложные конструкции.
Для мобильных устройств можно использовать стандартную сетку из 8 пунктов. Для веба это не столько интервалы, сколько сетки макета. Вы можете начать с популярной 12-колоночной сетки, так будет легче. Есть и более сложный и современный вариант — настраиваемая CSS сетка. Лучше всего заранее обговорить все со своим разработчиком и договориться о том, какую из сеток вы будете использовать.
Отрегулируйте сетку в меню свойств справа. Вы можете перейти от сетки к столбцам или строкам, а также сделать его фиксированным или жидким.
Самое замечательное в сетках и столбцах то, что вы можете настроить сразу несколько сеток и сохранить их. Это удобная функция, которая поможет в адаптации макетов под различные устройства, обмена ими с членами команды или повторного использования в других проектах.
☝Совет: вы можете переключать видимость с помощью комбинации ctrl + G.
Как и в Sketch, в левой части экрана вы найдете панель слоев.
Figma использует так называемые векторные сети, позволяющие создавать сложные формы!
Вы можете создавать фигуры с помощью хоткеев R (прямоугольник), L (линия) или O (эллипс). Удерживайте shift, чтобы сохранить пропорции. Каждая такая фигура автоматически создаёт свой собственный слой.
Чтобы создать более сложную форму, нажмите P или выберите перо в менюшке сверху. По завершении просто нажмите enter. Вы можете изменять свойства и управлять векторными фигурами в любой момент в процессе проектирования через меню свойств с правой стороны.
☝Примечание: векторы можно масштабировать и экспортировать в любом размере. Они идеально подходят для создания простых форм, кнопок, значков, логотипов и всевозможных простых иллюстраций.
Перетащите изображение в рабочую область. В Figma изображения всегда помещаются внутри фигуры (сродни, маски). Чтобы изменить свойства изображения, нажмите на “Fill” в окне свойств справа и меняйте их на свое усмотрение.
В раскрывающемся списке вы можете выбрать:
Кроме того, Figma позволяет настраивать такие свойства как цвет и насыщенность. Обратите внимание, что вы никогда не потеряете исходные свойства изображения, так что не стоит волноваться при работе с цветами.
☝Примечание: также можно заполнить уже существующую фигуру изображением. Нажмите на фигуру и перейдите к «Fill» и в раскрывающемся списке выберите «image».
☝Примечание: если вы новичок, имейте в виду, что вам необходимо владеть или покупать права на изображения, которые вы используете. Также никто не будет осуждать использование изображений без лицензии, их можно найти в Unsplash.
В Фигме уже есть предустановленные шрифты от Google! Но если вы предпочитаете использовать локальные шрифты, вам необходимо установить Font Helper или приложение для Фигмы. Кроме того, убедитесь, что у всех, кто взаимодействует с файлом, есть необходимые шрифты.
Нажмите T для создания текстового окна. Как и обычно, вы можете установить все свойства для текста в меню свойств справа.
☝Совет: если вы новенький в веб-дизайне и дизайне приложений, убедитесь, что размер вашего текста не меньше 16 пикселей, стремитесь к 18 пикселям. В зависимости от вашего шрифта я также рекомендую немного увеличить высоту строки для лучшей читаемости.
Стили позволяют сохранять и повторно применять свойства. Таким образом можно мгновенно обновлять огромные файлы. Можно создавать стили для цвета, текста, сеток и таких эффектов как тени.
Чтобы увидеть все используемые стили, щелкните по серому фону рядом с рамкой и они отобразятся в меню свойств справа.
Стили цвета и градиента в Figma просто великолепны. Вы можете настроить один стиль и повторно использовать его для текста, заливок и контуров! Вы можете изменять и удалять их в любое время, щелкнув по стилю правой кнопкой мыши.
Создайте и используйте свой цветовой стиль:
2. Измените заливку на желаемое значение цвета
3. Нажмите на квадратный символ, содержащий цветовые стили
4. Щелкните «+», для добавления класса. Готово!
☝Совет: когда вы даёте название стилю, укажите наименование его области применения, а не просто впишите название самого цвета («цвет выделения», а не «оранжевый»).
В отличие от Sketch, свойства, что сохраняются в стилях для текста в Figma содержат лишь информацию о семействе шрифтов, размере, высоте строки и интервале. Такой подход делает вашу библиотеку стилей красивой и краткой, поскольку нет необходимости дублировать стиль для другой версии цвета или выравнивания.
Настройка стиля текста схожа с настройкой цветовых стилей:
2. В правом меню свойств щелкните по квадратному значку стилей.
3. Нажмите на «+» и дайте вашему ему имя
4. Чтобы добавить стиль к существующему тексту — щелкните по тексту, а затем выберите нужный стиль в меню справа.
После добавления стиля вы также можете изменять его свойства или вовсе убрать его через меню.
☝Совет: как и в ситуации с цветами, лучше называть стили по области их применения. Таким образом, вы всегда сможете адаптировать шрифты без переименования.
Сетки также можно сохранять и повторно использовать в качестве стилей.
А еще такие эффекты как тень, внутренняя тень, размытие слоя и размытие фона:
Компонентами называют элементы пользовательского интерфейса, которые можно повторно утилизировать в ваших проектах. Компоненты делают ваш дизайн (и последующее программирование) согласованным, позволяют легко обновлять и масштабировать элементы дизайна, что сэкономит вам много времени!
1. Выберите объект и нажмите на кнопку создания компонента вверху экрана или cmd + alt + K.
2. На панели слоёв вы увидите фиолетовый значок компонента. Это значит, что вы создали главный компонент.
Если теперь мы сделаем копию главного компонента, автоматически будет создана идентичная копия, она называется экземпляром. Любые изменения в главном компоненте приведут к таким же изменениям во всех экземплярах. Проще говоря, все изменения родительского компонента, будут унаследованы всеми дочерними.
Вы найдете все свои компоненты на вкладке Assets рядом со слоями слева, также можно перетащить их на свое рабочее пространство.
☝Совет: в долгосрочной перспективе вы должны стремиться согласовать ваши компоненты Figma с интерфейсными (например, компонентами в ReactJS). Лучше обсудить это со своей командой программистов, чтобы согласовать общие действия.
Экземпляры компонентов могут быть вложены в главные компоненты. Это означает, что у вас могут быть компоненты внутри компонентов, внутри компонентов (если вы смотрели Inception, вы понимаете, что я имею в виду).
Вы можете поменять местами вложенные экземпляры, используя меню замены экземпляров справа или просто удерживая cmd + alt + option и перетаскивая их из библиотеки.
Экземпляр всегда будет соответствовать основному компоненту по размеру и общему макету, но вы можете изменить такие свойства экземпляра как цвет, текст и контуры.
Обратите внимание на кнопку отмены в меню свойств, если вы хотите вернуть все в исходное состояние. Также вы можете отсоединить экземпляр, щелкнув по нему правой кнопкой мыши.
Используйте «/» для того, чтобы переименовать компонент, например можно переименовать “share-icon” в icon/share. Тогда Figma автоматически создаст родительскую категорию под названием icon, которая воплотит в жизнь все ваши мечты об обмене экземплярами и экспорте!
Кстати, если у вас есть главные компоненты на нескольких страницах, они будут организованы по страницам.
☝Совет: чтобы компоненты были хорошо организованы, создайте новый фрейм для каждой группы, например «кнопки» или «формы». Теперь перетащите туда свои главные компоненты. Все элементы будут представлены в алфавитном порядке.
Автоматическая компоновка позволяет создавать динамические фреймы, которые увеличиваются или уменьшаются по мере изменения содержимого в них. Это невероятная функция, так как она поможет вам сэкономить массу времени, а также позволит всего одним щелчком мыши проверить, хорошо ли работает ваш дизайн с реальным контентом.
Auto Layout компоненты могут быть вложенными, сочетая в себе горизонтальные и вертикальные пропорции для создания привлекательного интерфейса.
Выберите объекты, снова нажмите Shift + A, фрейм автоматической компоновки теперь является дочерним фреймом внутри родительского. Чтобы текстовые фреймы не увеличивались лишь в одном направлении, убедитесь, что вы выбрали фиксированную высоту.
☝Совет: вы можете поменять местами дочерние фреймы внутри родительских перемещая слои. Довольно приятная фича.
☝Примечание: любые фреймы с auto-layout можно сохранить как компоненты. Однако overflow прокрутка не будет работать при автоматической компоновке. Это становится актуально для прототипирования. Вы можете использовать одну хитрость, поместив фрейм с auto-layout внутрь обычного фрейма.
В Figma есть фантастическое прототипирование для вашего веб-дизайна и дизайна приложений. Никакой другой инструмент вам не понадобится.
Выберите фрейм и в правой части меню свойств щелкните «Prototype», далее по «Prototype Settings» и выберите устройство, под которое будете разрабатывать. Дальше нажмите кнопку воспроизведения в правом верхнем углу, чтобы увидеть ваш дизайн в действии. Вы также можете загрузить приложение Figma Mirror на свой телефон для предварительного просмотра дизайна на вашем устройстве.
Убедитесь, что вы находитесь в меню прототипов справа. Обратите внимание, выбранный элемент имеет синюю рамку с маленьким синим кружком. Щелкните по нему и удерживайте. При перетаскивании появляется стрелочка, которую можно соединить с другим фреймом.
На панели свойств с правой стороны вы можете выбрать действие (смахивание, щелчок, наведение мыши и т.д.) и анимации (сдвинуть, нажать, свайпнуть и т.д.)
Помимо вертикальной прокрутки, Figma предлагает другое очень реалистичное поведение в случае переполнения.
Smart Animate ищет совпадающие слои, распознает различия между ними и анимирует их между фреймами. Это позволяет создавать мощные прототипы. После освоения Smart Animate вам, скорее всего, не потребуются дополнительные инструменты для создания прототипов.
Нажмите по значку воспроизведения в правом верхнем углу, чтобы открыть экран презентации в новой вкладке. Таким образом вы сможете просмотреть все фреймы. Там вы сможете найти поле для комментариев, полноэкранный режим, а также простую ссылку на проект.
Команды в Figma позволяют сотрудничать с другими людьми или просто структурировать вашу работу. Вы можете приглашать участников, добавлять проекты и хранить определенные библиотеки.
Чтобы создать команду, просто нажмите кнопку «Сreate new team» и следуйте инструкциям.
☝Примечание: вы можете перемещать файлы между проектами и командами в любое время.
При работе в команде нам нужно одно конкретное место, в котором хранятся последние обновления всех компонентов и стилей, и к которому имеют доступ все члены команды так называемый единый источник истины. Библиотека команды Figma прекрасно справляется с этим и станет основой вашей дизайн-системы.
☝Примечание: системы дизайна являются важной частью UX / UI в настоящее время и стоит потратить некоторое время на ознакомление с концепцией и различными подходами.
Плохие новости: в бесплатной версии вы можете публиковать цветовые стили только в библиотеке команды. Для сохранения компонентов вам понадобится Pro-статус.
Создание командной библиотеки:
1. В меню слева перейдите в Assets и щелкните на значок книги.
3. Дайте вашей публикации имя
4. Откройте новый чистый файл в рамках команды
5. Перейдите на вкладку Assets, щелкните на значок библиотеки и активируйте только что созданную библиотеку.
Обновление командной библиотеки:
При изменении основного компонента или стиля, Figma предложит вам обновить командную библиотеку. После обновления, все остальные члены команды получат уведомление о том, что для библиотеки доступны обновления, они могут просматривать и обновлять отдельные компоненты или обновить все за раз.
☝Примечание: Общие библиотеки очень эффективны и могут стать основой вашего процесса проектирования.
Пригласите людей, нажав на кнопку «Поделиться» в верхнем меню и введите адрес электронной почты или же скопируйте ссылку и отправьте её вашим коллегам.
Дизайнеры и копирайтеры → Установите EDIT MODE. Он предоставит пользователям доступ ко всем функциям. Вы увидите аватары и курсоры других пользователей и сможете работать вместе в реальном времени в одном файле!
Разработчики → установите VIEW MODE. Пользователь сможет видеть все спецификации (переключение кода CSS, iOS и Android). Также они могут получить доступ к вашему прототипу в действии и могут скачать любые ассеты нужного размера.
☝Примечание: если вы делитесь работой с разработчиками, пока все еще дорабатываете проект, лучше всего настроить отдельную страницу, с самой актуальной версией проекта, дабы избежать путаницы.
В Figma все ассеты могут быть экспортированы в любом размере непосредственно из общих файлов, даже если у вас есть лишь права для просмотра файла. Поэтому, как дизайнеру, вам не нужно ничего экспортировать самостоятельно. Однако, если у вас есть желание, то вот как это работает:
2. Нажмите на экспорт в меню свойств справа.
3. Определите, как экспортировать и готово!
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Полезная статья. Спасибо большое!
Неплохой гайд по старте работы в Figma. Спасибо!
Спасибо за хорошую статью.
хорошая статья для начала работы, нехватает разве что разделов про плагины и комьюнити
Спасибо. Все просто, наглядно и понятно.
Комментарий удален по просьбе пользователя
Почему люди сидят на скетче? Он удобнее чем фигма?
Вы предлагаете начать очередной бой что лучше? )))
Я начинал со скетча, теперь по необходимости и там и там работаю. На мой взгляд сейчас фигма обогнала скетч по удобству и функционалу и, самое главное, развивается быстрее (хотя я остаюсь больше сторонником скетча 🙂 ).
Как получить доступ к полной истории борда, если оплатил план professional?