Бесплатный тренинг

Места ограничены

Компонентный
подход в Figma

  • Научись дизайнить со скоростью мысли
  • Выйди на новый уровень качества
  • Делай меньше действий и кайфуй
Записаться бесплатно
Компонентный <br>подход в Figma
  • Стоимость

    Бесплатно + оплачиваемая стажировка в компании

  • Наставник

    Дизайнер с 13-летним опытом работы

  • Длительность

    Обучение 2 недели + стажировка (по желанию)

  • Формат

    Видео уроки, прямые эфиры и практика

Для кого?

  • photo

    Начинающим
    дизайнерам

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

  • photo

    Дизайнерам
    с опытом

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

  • photo

    Руководителям
    отдела дизайна

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

  • photo

    Владельцам стартапов
    и тех. директорам

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

Знакомые проблемы?

  • Злюсь, когда вношу одинаковые правки
    в разных местах

  • Не могу найти
    достойный UIKit

  • Не получается
    быстро работать

  • Приходится делать много скучной работы

  • Программисты долго делают то, что нарисовал

  • С интерфейсом возникают проблемы после реализации

  • Тяжело работать с компонентами

  • Очень долго внедрять улучшения в проект

  • Беспорядок в слоях и стилях, долго подписывать и придумывать имена

  • Забываю отрисовать все состояния компонентов и это отнимает много времени

  • Сложно продумать все нюансы работы интерфейса, после реализации всплывают проблемы

  • Сложно отслеживать поддерживать правильные отступы во всех местах

Автоматизируй рутину

Забудь о неприятных задачах

Что изменится, если внедрить
компонентный подход?

  • photo

    Развитие
    и творчество

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

  • photo

    Удовольствие
    и скорость

    Получайте больше результата за тот же срок и наслаждайтесь проработкой деталей в освободившееся время. Зарабатывайте больше. Делайте круче. Наслаждайтесь результатом.

  • photo

    Уверенность
    и надежность

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

Какие задачи
решает тренинг?

  • photo

    Время
    и деньги

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

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

  • photo

    Дизайн
    и разработка

    Учит грамотно создавать компоненты, с точки зрения программирования, которые 100% можно реализовать в коде.

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

  • photo

    Процессы
    и стандарты

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

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

Какие проблемы
устраняет курс?

  • Злюсь, когда вношу одинаковые правки
    в разных местах

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

  • Не могу найти
    достойный UIKit

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

  • Не получается
    быстро работать

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

  • Приходится делать много скучной работы

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

  • Программисты долго делают то, что нарисовал

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

  • С интерфейсом возникают проблемы после реализации

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

  • Тяжело работать с компонентами

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

  • Очень долго внедрять улучшения в проект

    Тренинг дает эффективные процессы разработки и стандарты по организации работы нескольких дизайнеров над проектами любого размера.

  • Беспорядок в слоях и стилях, долго подписывать и придумывать имена

    Теперь в слоях порядок. Все элементы подписаны в соответствии с их отношением к объекту. Всем элементам назначены стили дизайн-токенов. Дизайнер присылает ссылку на файл, где можно сказать код дизайн-токенов в форматах CSS, SASS, JSON, XML (Android), Swift (iOS).

  • Забываю отрисовать все состояния компонентов и это отнимает много времени

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

  • Сложно продумать все нюансы работы интерфейса, после реализации всплывают проблемы

    Компоненты создаются с применением Auto Layout, проверятся на ключевых размерах экранов и адаптироваться под конкретные платформы, с адаптацией под нативные компонентов из библиотеки платформы.

  • Сложно отслеживать поддерживать правильные отступы во всех местах

    Благодаря созданию макетов исключительно на Auto Layout — все макеты теперь с точными отступами.

Чему ты научишься?

  • Навык грамотного компонентного и ООП-мышления

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

  • Непрерывное развитие
    и ускорение

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

  • Автоматизация
    и процессы

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

  • Автоматизация
    рутины

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

  • Анимация
    и прототипы

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

  • Процессы
    и стандарты

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

Что ты получишь?

  • photo

    Библиотеку

    Библиотеку компонентов на базе компонентного подхода стоимостью $3000, которая содержит в себе основные компоненты для Web, iOS и Android.

  • photo

    Сообщество

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

  • photo

    Обновления

    Видео-уроки и бесплатный доступ ко всем будущим обновлениям курса.

  • photo

    Систему

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

Программа курса

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

  • Темы

    • Как возник этот курс и какие проблемы он решает
    • Как устроены компоненты в коде
    • Как программисты работают с компонентами
    • Как разработчики применяют готовые компоненты
    • Возможности и ограничения Figma для создания компонентов

    Ценность

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

    • Компонент интерфейса
    • Мастер-компонент
    • Паттерн-компонент
    • Экземпляр компонента
    • Наследование
    • Свойства компонентов
    • Переопределение свойств компонента
    • Состояния компонентов
    • Варианты компонента
    • Порядок действий при конструировании компонента
    • Базовая структура компонента
    • Базовая структура компонента
    • Области компонента

    Ценность

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

    • Объектно-ориентированное мышление
    • Постфиксы для типов компонентов
    • Элементы приложения и их организация на экране
    • Глобальные компоненты
    • Проектные компоненты
    • Локальные компоненты
    • Контекстные компоненты
    • Организация элементов в файле Figma
    • Общая схема экранов приложения

    Ценность

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

    • Плюсы и минусы анимации в Figma
    • Возможности и ограничения прототипирования в Figma
    • Паттерны анимации и приемы анимирования в Figma
    • Практика анимированого интерактивного создания мобильного приложения

    Ценность

    • Вы научитесь создавать интерактивные прототипы и полноценную анимацию интерфейса в Figma.

Формат курса

  • Подробные
    видео-уроки

    Неограниченный во времени доступ к подробным видео-урокам.

  • Бесплатные
    обновления

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

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

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

  • Закрепление
    на практике

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

  • Учись
    бесплатно

    Количество мест ограничено.

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

  • Научим
    и заплатим

    Оплачиваемая стажировка.

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

rocket

Запишись
сейчас

Возьми свой шанс.

Отправь фразу «хочу учиться» автору курса в телеграм перейдя по кнопке ниже

Записаться бесплатно