Figma — один из актуальнейших инструментов для дизайна интерфейсов, и мы в ADDEO давно и успешно его используем. Сервис разработан специально для совместной работы и коллабораций в диджитал-проектах. Это графический редактор для создания векторной и растровой графики, где можно рисовать иллюстрации, разрабатывать дизайн, делать прототипы и писать код.
Переход с более ранних графических редакторов (семейство Adobe; Corel Draw; Sketch и других) не станет проблемой, поскольку инструменты и функционал во многом похожи. Но чтобы быстро выполнять задачи и использовать возможности Figma на 100%, придется наработать навык.
Тем, для кого это первый графический редактор, понадобится не менее 40 часов на уверенное освоение. Наша статья поможет справиться быстрее, ведь вся нужная информация уже здесь, в виде удобной подборки.
Обзор рабочего пространства
На английском (от Youtube-канала Figma)
На русском (обзор от блога idbi)
Если вы хорошо воспринимаете английский на слух, обязательно загляните на канал проекта на Youtube. Там много полезного и наглядного материала для новичков и «продвинутых», в том числе и этот обзор по организации рабочего пространства в редакторе: он поможет тем, кто впервые открывает Figma.
Введение в сервис
На английском (от DesignLab).
На русском (от Александра Окунева).
Эти гайды предназначены для абсолютных новичков. Значительная часть посвящена интерфейсу. В туториале от DesignLab также описано, как зарегистрировать аккаунт.
Учтите: Figma обновляется быстрее, чем выходят мануалы, и часть элементов приложения могут выглядеть не так, как описано в руководствах.
Работа со слоями
На английском (от обучающей платформы Envato tuts+).
На русском (от Figmaweb).
Слои — лучший друг веб-дизайнера. Эти туториалы помогут разобраться, что такое слой в графическом редакторе и как использовать панель Слои (Layers) в Figma.
Стили для цветов
На английском (от Youtube-канала Figma).
На русском: урок 8 и урок 10 (от проекта Наука Дизайна).
Эти гайды рассказывают, как использовать цвета в Figma и что такое стили цветов, а также о том, как создать цветовой стиль, применить его и скопировать.
Figma для начинающего UI-дизайнера
На английском (от дизайн-платформы Prototypr).
На русском (от платформы Uxpub).
Эти статьи объясняют, как использовать Figma в качестве инструмента для разработки интерфейсов. Если вы — начинающий UX/UI дизайнер, то найдете в них много полезного, включая объяснение терминов. Материалы не дублируют, а дополняют друг друга. Поэтому советуем прочесть и английскую версию: переводчик в помощь.
Рисование векторных изображений
На английском (от обучающей платформы Envato tuts+).
На русском (от ресурса svgpng.ru)
Если вы научитесь создавать в Figma векторные изображения, то легко сможете использовать свои авторские SVG-элементы в дизайне сайтов. Эти уроки помогут разобраться с инструментами для рисования в векторе, контурами и заливками: как это работает в Figma. И, конечно, с экспортом SVG-файлов.
Создание экранов приложения для онбординга
На английском (от проекта Arttutor)
На русском (от образовательной платформы Skillbox)
Онбординг — это знакомство пользователя с приложением. Figma дает дополнительные возможности, чтобы создавать анимированные экраны приложений и показывать пользователю весь его функционал.
В этой подборке мы собрали туториалы в разных форматах: видео, текст, пошаговая инструкция. Какие из них были удобными? Что оказалось полезным? Пишите в комментариях!