Как взаимодействовать с фронтенд-разработчиками

Алексей Авдеев, Mish

Как взаимодействовать с фронтенд-разработчиками

Алексей Авдеев, Mish

Дистанция

Как стать ближе?

10
Познакомьтесь

Планы проекта

Сроки разработки

Гайдлайны

Этапы сдачи экранов и приоритетность

Progressive Enhancement

Технические возможности

Сделайте себе интересно

9
Покажите Figma

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

Can edit

Компоненты

Auto Layout

Flexbox

        .block {
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-end;
        }

Обучите разрабов Figma

8
Адаптив

Веб адаптивен по-умолчанию

Сколько брейкпойнтов?

Только то, что изменяется

Breakpoints Plugin

CSS Container Queries

Продумывайте адаптив

7
Платформа

Закон Якоба

Не проектируйте заново нативные элементы

6
Шрифты

@font-face

        @font-face {
          font-family: "Open Sans";
          src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
        }
         
        h1 {
          font-family: "Open Sans"
        }

Стек системных шрифтов

Sans-serif

        font-family: -apple-system, BlinkMacSystemFont, avenir next,
            avenir, segoe ui, helvetica neue, helvetica, Cantarell,
            Ubuntu, roboto, noto, arial, sans-serif;