Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design — Stepik

Меня зовут Дима и это видео-курс по веб дизайну в Figma, с нуля до результата!
В этом курсе, вы найдете все для успешного старта карьеры в UX/UI. Быстрый старт в профессию веб дизайнер.

What you will learn

• Изучите все инструменты Figma
• Изучите современные техники и приемы дизайна
• Научитесь азам работы в Photoshop
• Узнаете больше про профессии UX UI дизайнер
• Узнаете что такое web design на практике
• Научитесь работать с изображениями в Figma
• Научитесь подбирать правильные цвета для ваших сайтов
• Научитесь подбирать правильные шрифты для ваших сайтов
• Узнаете как работать с контрастом на веб страницах
• Научитесь сочетать элементы на веб страницах
• Узнаете что такое адаптивный дизайн
• Научитесь адаптировать под любое мобильное устройство, любой сайт
• Узнаете как анимировать макеты
• Изучите места где можно черпать вдохновение для своих работ
• Знаете где найти идеальное изображение, иконки и иллюстрации для ваших сайтов
• Вы поймете как договариваться с потенциальным заказчиком
• Вы узнаете как составлять бриф с потенциальным заказчиком
• Изучите базу по работе в Photoshop

About this course

Привет!

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

Этот курс для абсолютных новичков

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

Выбор цветов для проекта будет простым и понятным

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

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

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

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

Простая и понятная работа со шрифтами

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

Разберемся в странных темах UX/UI

Этот курс направлен в первую очередь на развитие навыков User Interface дизайнера, но конечно, в курсе мы коснемся обеих сторон профессии как UX – User Experience так и UI — User Interface

Практика на протяжении всего курса

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

Необходимые навыки адаптивного дизайна

И конечно, мы узнаем как адаптировать сайты под разные устройства, как анимировать каждый элемент макета и даже научимся создавать красивые слайдеры и красивую анимацию счетчика прямо в figma!

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

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

База по Photoshop для уникальных макетов

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

Гарантия возврата денег

И если у вас еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него, в течении 30 дней, без каких либо вопросов!

Присоединяйтесь ко мне и мы вместе начнем создавать, прекрасный дизайн, в figma!

До встречи на уроках!

Whom this course is for

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

Initial requirements

Работающий компьютер и желание узнавать новое!

Meet the Instructors

How you will learn

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

Course content

Certificate

Stepik

What you will get

Price

FAQ

How to pay from the company?

Share this course

https://stepik.org/course/102520/promo

Direct link:

https://stepik.org/102520

курсы онлайн-обучения созданию и дизайну сайтов в Figma дистанционно для UX/UI и веб-дизайнеров – МАДП «ПЕНТАСКУЛ»

Чем вам будет полезен этот курс?

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

На курсе вы освоите инструменты Figma по подробным видеоурокам в формате скринкастов — записи экрана с комментариями эксперта. С первых занятий вы начнете практиковаться и создадите несколько проектов для портфолио. А после курса вы сможете найти первых клиентов и брать заказы на разработку прототипов в Figma.

Курс подойдет вам, если…

1. Вам интересна сфера веб-дизайна и вы хотите начать ее освоение с конкретного инструмента — редактора Figma.

2. Вы мечтаете о творческой работе и хотите уже через 3 месяца взять первые проекты на фрилансе.

3. Вы графический дизайнер и хотите предложить своим клиентам дополнительные услуги — создание прототипов сайтов и приложений.

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

5. Вы хотите добавить в свое портфолио комплексные проекты — дизайн лендинга, интернет-магазина и мобильного приложения в Figma.

6. Вам важно учиться у дизайнеров-практиков и получать обратную связь по каждой работе.

Почему Figma?

Вы сможете:

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

Доход

от 60 000 P

доход начинающего веб-дизайнера, работающего в Figma

от 15 000 P

стоит дизайн лендинга на фрилансе

Вакансии

более 1800

вакансий на HH. ru, где требуется владение Figma

более 1500

задач на фриланс-площадках (*по данным за 2023 год)

Практические работы на курсе

Лендинг для онлайн-школы

Интернет-магазин техники

Мобильное приложение онлайн-школы

Вы будете знать

1. Основные инструменты и возможности Figma для веб-дизайнера.
2. Основы работы с типографикой, цветом, композицией при создании прототипов.
3. Принципы работы с векторной и растровой графикой в Figma.
4. Правила адаптивной верстки сайтов для различных устройств.

Вы будете уметь

1. Разрабатывать в Figma прототипы лендингов, основных страниц интернет-магазина и мобильных приложений.
2. Делать созданные вами прототипы интерактивными.
3. Создавать UI-kit — набор элементов интерфейса.
4. Работать с FigJam и создавать мудборды для проектов.

Сертификат Московской академии дизайн-профессий Pentaschool

Как вы освоите Figma

Зачисляетесь, получаете доступ к личному кабинету

Смотрите видеоуроки в формате скринкастов (запись экрана) в удобные день и время

Изучаете предложенные нами дополнительные материалы по теме

Выполняете практические домашние задания и получаете доступ к следующим модулям

Получаете обратную связь от преподавателей — практикующих дизайнеров

Забираете лучшие работы в свое портфолио, проходите итоговое тестирование и получаете сертификат

Проекты студентов

Александр Лазарев
Лендинг детейлинг-центра

Александр Лазарев
Лендинг интернет-магазина

Шабнам Амирасланова
Лендинг интернет-магазина Daisy

Марина Соломина
Лендинг интернет-магазина Elma

Андрей Чучунков
Тренировка насмотренности — перерисовка сайта Ростелеком

Анна Врублевская
Лендинг курса английского языка

Лариса Виктурова
Лендинг курса английского языка

Лендинг услуги Интерактивная визуализация пространства для дома

Преподаватель курса

Программа обучения

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

• 1. Основы Figma

  Содержание курса:

  • Интерфейс и основные инструменты Figma
  • Оформление мудборда в FigJam
  • UX-дизайн. Настройка сетки и структура страницы в Figma, создание прототипа
  • Создание User-flow для лендинга
  • UI-дизайн. Работа с цветом, типографикой и изображениями
  • Адаптивный дизайн для веб-версии лендинга

  Задания на курсе:

  • Создать мудборд для лендинга в FigJam
  • Повторить макет формы обратной связи в Figma
  • Создать User-flow для лендинга
  • Создать прототип одностраничного сайта и настроить его компоненты
  • Настроить в прототипе текстовые и цветовые стили
  • Сделать адаптивную мобильную версию лендинга с опорой на видеоурок

  Результат:

  • Познакомитесь с основными инструментами Figma и научитесь создавать в программе прототипы лендингов

  3 часа теории

  9 часов практики

• 2. Дизайн сайтов в Figma

  Содержание курса:

  • Создание мудборда и User-flow, настройка сетки для интернет-магазина
  • Разработка главной страницы интернет-магазина в Figma
  • Разработка страниц каталога, результатов поиска и карточек товара в Figma
  • Разработка страниц корзины в Figma
  • Создание интерактивного прототипа
  • Цвет, изображения, анимация: как работать с векторной и растровой графикой в Figma
  • Подготовка UI-kit

  Задания на курсе:

  • Сделать настройку сетки и компонентов, как это показано в уроке
  • Сделать UX-прототип главной страницы интернет-магазина, как это показано в уроке, повторить все настройки
  • Сделать UX-прототип страницы каталога, страницы результата выдачи и карточки товара для вашего проекта
  • Сделать UX-прототип страниц корзины
  • Настроить для вашего прототипа стили, цвет и параметры текста
  • Сделать ваш прототип сайта интерактивным
  • Создать векторные иконки для сайта и настроить анимацию

  Результат:

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

  8 часов теории

  12 часов практики

• 3. Дизайн мобильных приложений в Figma

  Содержание курса:

  • Особенности проектирования мобильных приложений и создание User-flow
  • Проектирование главной страницы приложения и результатов поиска
  • Подготовка к работе: настройка рабочей области
  • Создание прототипа главного экрана и структура страниц
  • Создание интерактивного UX-прототипа
  • UI-дизайн мобильного приложения в Figma

  Задания на курсе:

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

  Результат:

  • Вы научитесь собирать основные экраны мобильных приложений в Figma, настраивать компоненты и создавать интерактивные прототипы

  8 часов теории

  12 часов практики

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

• Intel HD Graphics 4000 (или позднее).
• Nvidia 330m (или позднее).
• ATI Radeon HD 4850 (или позднее).

Список изучаемых программ: 

• Figma

Бесплатно 

Ссылка на программу

Учебный план программы повышения квалификации «Дизайн интерфейсов в Figma» доступен по ссылке

Успейте присоединиться к ближайшему набору и получите полезные навыки со скидкой 35%

Должность
Дизайнер Figma

Зарплата от
60 000P

Ваши навыки по итогу обучения

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

Отзывы студентов

Мехельсон Анна

Менеджер, Москва,

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

Читать полностью

20. 03.2021

Ачиткин Олег

Руководитель проектов, Санкт-Петербург

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

Читать полностью

27.02.2021

Колесова Инга

Маркетолог, Москва

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

Читать полностью

24.01.2021

Иванихина Елена

ИП, Новосибирск

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

Читать полностью

29.01.2021

Кречетова Мария

Дизайнер, Пермь

Выбрала для себя школу Pentaschool из-за возможности обучения у практиков и постоянного доступа к материалам курса. Это очень круто, ведь курс постоянно обновляется, и я всегда получаю самую свежую информацию из первых рук. Много сил было вложено в практические задания, но моё портфолио и дипломную работу отметили эксперты, поэтому всё не зря!

Читать полностью

25. 03.2021

Почему Pentaschool

5 лет
специализируемся на обучении дизайнеров

5500
довольных студентов

4000
вебинаров в нашей базе знаний

91%
студентов рекомендуют обучение в Pentaschool по данным otzovik.com

• Бессрочный доступ к материалам курса после успешного завершения обучения
• Обратная связь от практикующих экспертов
• Входим в сообщество дизайнеров со всего мира

Учитесь выгодно

Стоимость обучения

Скидка

-35%
До 5 мая

от 4 750 P

в месяц по рассрочке банка-партнёра

Рассрочка 0% без первого взноса и переплат

30 000 P

19 000 P

Срок обучения — 3 месяца Обучение с выдачей сертификата

В стоимость входит:

• более 30 видеоуроков по инструментам и возможностям Figma
• более 20 практических заданий с проверкой и персональной обратной связью от экспертов
• дизайн сайтов и мобильного приложения в Figma для портфолио
• бессрочный доступ к материалам курса после успешного завершения
• регулярные онлайн-вебинары
• доступ к библиотеке вебинаров на время курса и еще 90 дней после выпуска

Показать еще

Вы также можете позвонить нам самостоятельно по номеру 8 800 550-76-72

Звонок для вас абсолютно бесплатный

Вопросы и ответы

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

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

Конечно. Наши эксперты внимательно проверяют практические работы и дают развёрнутые комментарии.

Один видеоурок длится 15-20 минут. Если вы не хотите отстать от учебного плана, вам нужно уделять занятиям 2-3 часа в день.

Да. У нас вы можете оформить беспроцентную рассрочку. Вы сможете получить её даже в том случае, если вы не являетесь гражданином РФ.

Фигурка | Как превратить дизайн Figma в веб-сайт

Как создать веб-сайт с помощью Figma

05.03.2022 • Тайлер Кеннеди

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

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

С помощью Figment вы можете создать свой веб-сайт прямо из дизайна Figma без программирования. Вот как это работает:

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

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

Дизайн для мобильных и настольных компьютеров

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

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

2. Установите подключаемый модуль Figment

Когда ваш дизайн завершен, пришло время создать веб-сайт. Для этого установите плагин Figment со страницы сообщества Figma. На странице плагина Figment нажмите «Установить» в правом верхнем углу.

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

3. Запустите подключаемый модуль Figment

Установив подключаемый модуль Figment, откройте свой дизайн в Figma. Затем запустите плагин Figment. Для этого щелкните правой кнопкой мыши свой дизайн и выберите «Плагины», а затем щелкните плагин Figment.

Это запустит окно плагина Figment внутри приложения Figma. Плагины Figma работают как в браузерной, так и в настольной версии Figma, поэтому вы можете использовать плагин Figment на любой платформе.

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

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

Знакомство с макетами плагинов Figment

Плагин Figment позволяет полностью настроить дизайн Figma перед тем, как превратить его в веб-сайт. В открытом окне плагина вы увидите 3 раздела.

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

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

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

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

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

4. Опубликуйте свой веб-сайт

Когда вы закончите последние штрихи и будете готовы опубликовать свой веб-сайт, Figment сделает это очень просто. Вернитесь на главный экран и найдите кнопки Опубликовать на веб-сайте или Код экспорта внизу.

Это дает вам два варианта того, как вы можете превратить свой дизайн в веб-сайт.

Публикация Figma Design на веб-сайте

Нажмите Опубликовать на веб-сайте , чтобы открыть меню публикации, и вы увидите экран, подобный этому:

Здесь вы можете выбрать кадр, который хотите экспортировать как веб-сайт. ( Подсказка: Чтобы опубликовать несколько фреймов, поместите их в один контейнер фреймов)

Далее вы можете просмотреть домен, на котором будет размещен ваш новый веб-сайт. Если у вас есть хобби-план, для вас будет создан домен. Если вы используете план Pro или Team, вы можете подключить свой собственный домен, нажав Use Custom Domain .

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

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

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

Экспорт дизайна Figma в код HTML и CSS

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

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

Чтобы экспортировать полный код веб-сайта, вам потребуется план Pro или Team. Нажмите Экспорт полной страницы в нижней части экрана, чтобы получить полный код HTML и CSS для вашего дизайна.

Все готово 😆

И с этим все в порядке! Figment позволяет легко создать веб-сайт из Figma без необходимости кодирования. Время создания веб-сайта с помощью Figma сокращается вдвое, поэтому вы можете тратить больше времени на разработку и меньше времени на кодирование.

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

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

Получите последний контент от Figment. Подпишитесь сегодня, чтобы получать руководства по дизайну Figma и советы по созданию веб-сайтов.

Разработка веб-сайта с помощью Figma

Что такое Figma?

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

Если вы использовали другие инструменты для проектирования пользовательского интерфейса, такие как Adobe Photoshop или Adobe XD, вы можете легко освоить Figma и ее инструменты в один миг. Figma — это один из инструментов проектирования интерфейсов, который помогает всем участникам проекта сотрудничать в процессе проектирования — будь то не дизайнеры, разработчики, менеджеры по продуктам, маркетологи или руководители.

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

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

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

Figma и Adobe

Если вы когда-либо использовали продукт Adobe, вы увидите много общего. Наиболее очевидным из них является Adobe XD, оба инструмента для дизайна интерфейса. Итак, как Figma соотносится с Adobe XD?

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

Каркас на Figma 

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

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

Для Productive Shop мы создали каркас, поместив заполнители элементов и изображений в конечный результат, чтобы создать конечный продукт.

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

Вот одна из последних итераций высокоточного каркаса: 

Пример каркаса низкой точности.

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

Пример высокоточного каркаса.

Креативное задание: усовершенствование Figma

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

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

Далее вы можете реализовать требования, изложенные в брифе креатива. С помощью FigJam команды могут добавлять брендинг, блок-схемы и пути пользователя. Команды также могут создавать доски настроения и доски для мозгового штурма. Все они синхронизируются с облаком Figma и могут просматриваться в режиме реального времени участниками вашего проекта!

Доска настроения

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

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

Импорт и экспорт

Начнем с импорта. Figma поддерживает различные типы файлов, что само по себе очень удобно при проектировании. Некоторые из популярных расширений файлов, которые он поддерживает, — это файлы изображений (JPEG, PNG, SVG, HEIC, GIF), файлы Sketch (.sketch) и файлы Figma (.fig).

Figma также поддерживает копирование и вставку векторов из Adobe Illustrator. Вы можете просто импортировать их из файлового браузера или перетащить для удобства использования. Для пользователей Illustrator Figma сохранит элементы и цвет, созданные вами в Illustrator, а также позволит вам вносить в них изменения в самой Figma благодаря инструменту «Перо».

Теперь об экспорте. Естественно, вам придется экспортировать свои проекты в различные форматы, как только ваш дизайн будет готов. Вы можете экспортировать его во все стандартные форматы изображений, такие как JPEG, PNG, PDF и SVG. Что еще лучше, так это то, что вы можете экспортировать их в 1x, 2x, 3x или любом другом размере, который вы выберете, вместе с предварительным просмотром того, что вы экспортируете. Аккуратно, верно? Инструмент экспорта также отлично подходит для передачи разработчикам или другим дизайнерам, которым потребуются файлы SVG, PNG или JPG для справки или для клиентов.

GIF файла, импортированного в Figma.

Скриншот варианта экспорта файла с форматом файла.

Использование плагинов и сообщества Figma

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

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

Unsplash

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

Плагин Unsplash — отличный способ добавить изображения в ваши дизайны.

Lorem Ipsum

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

Используйте плагин Lorem ipsum для создания фиктивного текста для ваших проектов.

Материальные символы 

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

Плагин «Материалы» предлагает библиотеку иконок для ваших дизайнов.

Режим презентации: Войдите в режим прототипа

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

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

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

Создание мастер-шаблонов на Figma

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

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

Вы также можете быстро создавать компоненты для элементов, которые будут использоваться во всем дизайне и к которым можно быстро получить доступ на вкладке «Активы» в левой части экрана. Таким образом, вы можете легко скопировать существующий шаблон и вставить его в нужное место на странице.

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

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

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

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

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

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

Пример дизайн-системы (стили кнопок).

Сотрудничество

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

Затем вам остается выяснить, какая обратная связь относится к какому элементу, и пройти весь процесс заново для следующей итерации, создав несколько экспортов и несколько цепочек электронной почты. Вы видите, куда это идет?

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

Заключение

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

Figma предоставляет комплексное решение, которого долгое время практически не существовало. Figma представляет будущее дизайна и совместной работы. Он растет с момента его создания и имеет уровень принятия более 60% по всем направлениям. Программное обеспечение имеет хорошие шансы стать лидером индустрии дизайна по используемым инструментам. Если вы еще не пробовали проектировать на Figma, вам стоит попробовать, и, скорее всего, вам это понравится.

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