Скачать учебник:
figma_guide_v.1.3_beta.pdf71149.2KB
Если не скачается с сайта, есть ссылка на файл в Телеграме.
Саша Окунев
:
Я работаю над новой версией учебника, которая будет в этом ноушн-сайте. Чтобы не пропустить её выход, подписывайся на /designer в Телеграме или VK.
Дальнейшее развитие Руководства будет продолжаться на этом сайте.
О книге →
/designer
— образовательный телеграм-канал об продуктовом дизайне, инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev
Бесплатная книга от Саши Окунева.
Что такое Фигма?
Figma – современная программа разработки интерфейсов, мобильных приложений, сайтов для дизайнеров. Если вы до сих пор рисуете интерфейсы в фотошопе, то давно переходить на фигму. Фигма стремительно развивается и уже огромное количество дизайнеров ежедневно пользуется ей для работы.
Отличительная черта Figma – она работает через браузер, хотя можно скачать и приложение. Очень шустрый, удобный и понятный инструмент, рекомендую.
После 10 лет работы в фотошопе я перешёл на фигму и жалею, что не сделал этого раньше.
Необходимо понимать, что фигма это преимущественно векторный редактор и не подойдёт для профессиональной обработки фотографий.
Саша Окунев – дизайнер с богатым опытом написал отличную книгу по фигме, которую периодически обновляет.
Это не проплаченный пост, я с удовольствием и бесплатно рекомендую это пособие.
В книге вы найдёте подробное описание программы, базовые знания, разбор всех функций и весь набор технических знаний. Отличный вариант для тех, кто собирается переходить на фигму, особенно, если вы ранее использовали Sketch.
Ссылка на книгу
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Figma — важный инструмент для дизайнеров, который позволяет быстро спроектировать интерфейс, сайт и мобильное приложение. Работодатели в требованиях к кандидату часто указывают этот графический редактор — поэтому его важно освоить.
В нашем спецпроекте — всё, что вам нужно знать о Figma.
9 марта Figma отменила подписки для пользователей из России. На момент публикации бесплатная версия графического редактора работает.
Если вы ещё не пробовали работать в Figma, начните изучать её с базовых функций. Эти инструкции помогут быстрее разобраться в интерфейсе программы и начать верстать простые макеты.
Рассказываем о базовых эффектах и показываем, как за две минуты сделать «матовое стекло».
Как добавить изображение на макет и отредактировать его без Photoshop.
Как работать с изображениями
Зачем нужно и как пользоваться
Как настроить и использовать
Шаблоны, ограничители и компоненты
Умное копирование
Шрифты в Figma
В чём преимущества Figma перед другими редакторами и почему ей стоит пользоваться.
Что такое Figma: возможности и принципы работы
Рисуем мяч для регби, хитрим с наложением слоёв и избегаем «мятых» линий.
Как рисовать векторные изображения
Рассказываем, как её настроить и использовать сразу в нескольких макетах.
Как работать с модульной сеткой
Figma любят не только за то, что в ней удобно двигать пиксели влево и вправо. С помощью продвинутых функций дизайнеры могут быстро нарисовать тёмную тему для интерфейса, картинку с эффектом голограммы и сделать так, чтобы все элементы автоматически подстраивались под ширину макета.
Глитч, голограмма и неоновое свечение.
Зачем они нужны и как их рисовать.
Рассказываем, что это за функция и как с помощью неё можно аккуратно и быстро сверстать кнопку, модуль и страницу.
Варианты элементов интерфейса
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Пошаговая инструкция, которая поможет грамотно поменять цвета в интерфейсе.
Заранее отловить ошибки в сценариях использования своего приложения — довольно сложно. Прототип решает эту проблему, а в Figma собрать его очень просто даже без программистов.
Как сделать красивые переходы в макете приложения.
Кнопки, прокрутка и поп-апы
Как сделать прототип интерфейса в Figma, чтобы показать его клиенту.
Как самостоятельно проверить макет прямо в телефоне, не привлекая к этому программистов.
Как превратить свой макет в сайт и адаптировать его сразу под все устройства.
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Дизайнеры Тильды любят работать в Фигме. Они создали в ней библиотеку макетов, иллюстраций и файлов PNG, которой может удалённо пользоваться каждый участник команды, не боясь потерять исходники файлов. Несмотря на плюсы сервиса, у Фигмы есть ряд ограничений:
Нельзя установить локальный шрифт без перезапуска. Чтобы применить дополнительный шрифт в Фигме, мало скачать его на компьютер. Придётся прервать работу и перезапустить сервис.
Неточный экспорт файлов. При копировании PNG, JPG и SVG-файлов, Фигма может добавлять к изображению пару пикселей обводки и искажать линейные иллюстрации.
Нет защиты от копирования. На бесплатном тарифе Starter нельзя защитить файл от копирования, недобросовестный заказчик может сохранить его для редактирования через Duplicate to Your Draft и использовать макет.
Нельзя работать без интернета. Фигма похожа на Google Docs: в самолёте или за городом без интернета сохранить изменения в макете не получится. Фигма обновит его, когда вы будете в сети. Нельзя изменять сочетания клавиш.
К заданным горячим клавишам придётся привыкнуть. Или можно скачать плагин Autohotkey и настроить Фигму под себя.
Нет русскоязычной версии. Вы не найдёте Фигму на русском языке, это англоязычный сервис. Если вы до этого работали с любых графическим редактором или прочли нашу инструкцию — проблем не возникнет.
10 Апр 2019
23662
0
Текстовый учебник и видеокурс по Figma. На русском, бесплатно.
Руководство по Figma
Саша Окунев, автор проекта /designer, выпустил свою первую книгу — иллюстрированный учебник по работе в самом прогрессивном инструменте интерактивного дизайна.
Он начинает с самых основ и последовательно объясняет как пользоваться всеми возможностями и рисовать иконки, иллюстрации и интерфейсы.
Саша до Figma долго использовал Sketch и проводит сравнение реализации символов и компонентов, стилей и ограничителей.
В книге 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.
Скачать актуальную версию (PDF, на момент публикации — 69 Мб, 256 страниц)
Видеокурс по Figma
Ребята из телеграм-канала «Наука дизайна» записали бесплатный видеокурс из 15 уроков, в котором дают понятный обзор инструмента. В дополнение к книге Саши Окунева в курсе разбирают ещё работу с прототипами, слайсами и экспортирование проекта.
Плейлист на YouTube (примерно 2,5 часа).
Уроки по отдельности: