Figma уроки: Уроки Figma (Фигма) для начинающих — уроки с нуля

Уроки Figma (Фигма) для начинающих — уроки с нуля

Представляем вам уроки по изучению программы Figma (Фигма) с нуля для начинающих. В ходе курса вы научитесь создавать UI, UX дизайн для веб и мобильных проектов. К концу курса у вас будут твердые знания в разработке дизайна при помощи программы Figma.

Что такое Figma?

Программа Фигма впервые появилась в 2012 году. Она быстро начала набирать обороты и уже в 2013 году привлекла около 4 миллионов долларов в виде инвестиций.

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

Почему Фигма стала популярным?

Программа за небольшой промежуток времени смогла быстро перевернуть рынок и подвинуть таких гигантов, как: Photoshop, Sketch, Illustrator и многих других.

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

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

Что умеет Figma?

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

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

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

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

А как же PhotoShop?

С приходом Figma у PhotoShop появился новый крупный конкурент. Если ранее разработка дизайна была привилегией PhotoShop, то сегодня все больше разработчиков предпочитают Фигму.

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

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

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

План курса

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

бесплатный учебник и видеоуроки на русском — Оди. О дизайне

Текстовый учебник и видеокурс по Figma. На русском, бесплатно.

Кирилл Олейниченко

Дизайн-куратор. Выпускаю «Оди» и «Журналус»

Руководство по Figma

Саша Окунев, автор проекта /designer, выпустил свою первую книгу — иллюстрированный учебник по работе в самом прогрессивном инструменте интерактивного дизайна.

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

Саша до Figma долго использовал Sketch и проводит сравнение реализации символов и компонентов, стилей и ограничителей.

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

Скачать актуальную версию (PDF, на момент публикации — 69 Мб, 256 страниц)

Видеокурс по Figma

Ребята из телеграм-канала «Наука дизайна» записали бесплатный видеокурс из 15 уроков, в котором дают понятный обзор инструмента. В дополнение к книге Саши Окунева в курсе разбирают ещё работу с прототипами, слайсами и экспортирование проекта.

Плейлист на YouTube (примерно 2,5 часа).

Уроки по отдельности:

Обзор интерфейса

Манипуляция объектами

Фреймы и слайсы

Векторные объекты

Кривые и перо

Слои и маски

Текст

Цвет

Сетки и направляющие

Стили

Ограничители

Компоненты

Выравнивание и умное распределение

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

Интеграция и экспорт

Изучите дизайн с Figma

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

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

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

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

Вот экран из приложения Apple Music :

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

Ниже приведен файл экрана Apple Music сверху с коллекцией его объектов и каркасом. Щелкните здесь, чтобы получить копию файла. Если вы впервые используете Figma, вы можете бесплатно создать учетную запись за считанные минуты. Чтобы начать, нажмите кнопку «Зарегистрироваться» в верхней части этой страницы.

Открыв действие, перетащите элементы интерфейса поверх фигур во фрейме вправо.

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

То же самое верно для Интернета или даже рекламных щитов, журналов, книг. Они в основном состоят из этих основных форм, расположенных вместе для достижения целей и визуально приятного вида.

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

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

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

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

Соотношение дизайнеров и инженеров резко возросло за последние пять лет.

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

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

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

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

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

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

У тебя уже есть все, что тебе нужно! Если вы читаете это, значит, у вас есть современный веб-браузер и подключение к Интернету. Некоторые видео могут использовать значительный объем данных, примерный размер видеофайла будет включен в описание каждого видео.

Чтобы выполнять упражнения по дизайну и проектировать в Figma, вам также потребуется доступ к ноутбуку или настольному компьютеру. Figma работает на Chrome OS, Linux, macOS и Windows; установка не требуется.

• Уроки. Каждый из них основан на основных концепциях дизайна. Их можно употреблять вместе или по отдельности.
• Упражнения по проектированию. Это ваш шанс открыть файл Figma и применить урок на практике.
• Дополнительная литература. Это ресурсы, которые нам нравятся, но не сделаны Figma. Это могут быть бесплатные статьи и видео, а могут быть и книги. Пожалуйста, не думайте, что вы должны покупать что-то, что вам неудобно покупать.
• Сообщество Figma. Это глобальное сообщество дизайнеров и клиентов Figma, доступное на Spectra.chat, является еще одним ресурсом для вас. Перейдите на канал Critique, чтобы получить отзывы о своих дизайнерских упражнениях.
• Playbook. Наши друзья из Playbook с вами, если у вас есть вопросы о карьерном росте в качестве дизайнера, вашей карьере, работе в отрасли и многом другом. Они объединяют дизайнеров в одном месте, чтобы поделиться друг с другом полезными советами по карьере.

И все. У нас в Figma есть три ключевых принципа: поощрять инклюзивность, быть смелым и получать удовольствие! Мой личный фаворит — «Веселись!» Это основа философии Figma, и мы считаем, что она имеет основополагающее значение для самого дизайна.

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

Итак, давайте углубимся в что такое дизайн.

Перейдите к следующему разделу

Learn Design с фигма

Figma

Або всего в одном дизайнерской платформе

DesignPrototygingDesign Systemdownloads

Figjam

Интернет-доска для команд

Интернет-платежи.

Файлы и шаблоны

Бесплатные профессионально созданные файлы, которые вы можете копировать, микшировать и использовать

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и Livestreamsbest PracticeSeducation Programuser Groups

Françaisdeutsch 日本語

Log Inget Начало

Начатие

Начатие

Kick Start Your Design Education с этими 12 уроками

10 Mins

start start start get start start start start start start start start start start start start start start start start nething

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

9 минут

Что такое графический дизайн?

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

5 минут

Дизайн-мышление и этика

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

12 минут

Доступность и инклюзивность

Узнайте, что значит проектировать с учетом доступности и инклюзивности.

6 мин.

Исследование дизайна

Узнайте о различных типах исследований, используемых в дизайне, и о том, как их проводить.

8 мин.

Содержимое

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

5 минут

Рассказывание историй

UX-дизайн похож на хорошую книгу, он отправляет пользователя в путешествие и имеет начало, середину и конец.

5 минут

Простота

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

5 минут

Согласованность

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

3 минуты

Ограничения

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

6 мин

Иерархия

Узнайте, как создать информационную иерархию, которая позволит вашим пользователям легко сканировать и перемещаться по вашему продукту или веб-сайту.

15 мин.

Типографский дизайн

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