Продолжаем рассказывать про Figma (первая часть здесь). Это современный графический редактор, который удобно использовать агентствам по веб-разработке и в совместных проектах, ведь вся работа ведется онлайн.
Для диджитал-агентства большой плюс Figma в том, что можно показать готовый сайт не в виде скриншотов или картинок, а в формате прототипа с понятным переходом между страницами. Это стало одной из главных причин, почему мы в свое время перешли с Photoshop на Figma. Если ты — начинающий дизайнер интерфейсов, то обязательно оценишь это преимущество в своей будущей работе.
Только начинаешь знакомство с Figma? Тогда лови новую подборку полезных и наглядных уроков.
Общий курс для новичков
На английском (от портала learnux.io)
На русском (от Даниила Волосатова)
Эти курсы, разбитые на короткие видеоуроки, предназначены для новичков в веб-дизайне и в работе с Figma. Они пошагово познакомят зрителя с основными возможностями и инструментами графического редактора и с базовыми опциями, необходимыми для работы: стилями, плагинами, меню слоёв.
Библиотеки для командной работы
На английском (от Youtube-канала Figma)
На русском (от ресурса Figmadesign)
Функция «Командная Библиотека компонентов» (Team Libraries system) — одна из относительно новых возможностей Figma. С её помощью можно публиковать стили и компоненты, расшаривать их для участников команды и поддерживать все файлы в актуальном состоянии с последними версиями. Учтите: командные библиотеки доступны не во всех версиях редактора.
Компоненты: что это и как использовать
На английском (от Youtube-канала Figma)
На русском (от платформы Uxpub).
Компоненты — основа всей работы с Figma. Им может быть кнопка, иконка или более сложные элементы: например, таблица данных. Каждый раз, когда вы вносите изменения в компонент, то все его экземпляры обновляются: больше никакой рутины и «пропущенных» кнопок! Именно поэтому про компоненты говорят, что они выводят веб-дизайн в Figma на новый уровень. Туториалы расскажут, как создать главный компонент и управлять им.
Создаём масштабируемые кнопки
На английском (от канала Build UX)
На русском (от блога «Дизайн-кабак»)
Мини-туториалы расскажут, как создавать кнопки, которые меняют масштаб. Ролик на английском посвящен только этой узкой теме, а статья блога «Дизайн-кабак» познакомит вас с проектированием кнопок в Figma «от А до Я».
Рисуем и оформляем портфолио UX-дизайнера
На английском (от образовательного портала skillshare.com)
На русском (от канала Moscow Digital Academy Дизайн и практика)
В конце обучения каждый веб-дизайнер столкнется с необходимостью оформить портфолио. Первый (английский) туториал — это целый онлайн-курс, доступный бесплатно; он рассказывает о важности портфолио и принципах его оформления. А русскоязычный ресурс разбирает одну из работ на примере конкретного кейса: сайта для дизайнера интерьера. Вслед за автором видео начинающий дизайнер сможет создать в Figma аналогичный сайт.
Сайт в Figma за час
На английском (от канала Dev Ed)
На русском (от канала Evgeny UPROCK)
Если работ в вашем портфолио всё ещё маловато, пополните его простыми, но стильными сайтами: эти видео готовы подкинуть вам интересные идеи. А попутно объяснить, как работать с редактором эффективнее и экономить своё время.
Градиенты
На английском (от Youtube-канала Figma)
На русском (от ресурса svgpng.ru)
Плавные переходы цветов — один из трендов веб-дизайна последних лет. В популярных графических редакторах есть удобные настраиваемые инструменты для создания градиентов. Потратьте пять минут на их освоение, и стильный фон для сайта готов!
Figma лишь инструмент; владение ею само по себе не сделает тебя веб-дизайнером. Чтобы стать им, нужно развиваться в сфере дизайна и получать опыт на реальных проектах. В ADDEO открыты стажировки для веб-дизайнеров с начальными знаниями, которые помогут получить такой экспириенс под руководством опытных дизайнеров. Хочешь попробовать? Пиши нам на почту info@addeo.ru!