Rose debug info
---------------

Блог Михаила Озорнина

Как бекапить фигму

Сегодня фигма написала, что из-за ***** она прекращает продажи в России (figma.com/blog/our-response-to-ukraine). Меня спрашивают и коллеги, и не только, что делать. Пишу, как забекапить файлы из фигмы.

Скачать в png

Если вы хотите скачать макеты в png, см. пост Автоматическое скачивание новых экранов из Цеплина и Фигмы

Скачать исходники

Формат фигмы проприетарный, исходники фигмы можно будет только загрузить в другую фигму (другую команды или личный аккаунт).

Если нужно скачать лишь несколько файлов, скачайте вручную, и не заморачивайтесь со скриптом:
File > Save local copy…

Если нужно скачать несколько файлов, то вручную можно задолбаться. Вот как сделать автоматически

  1. Выпускаете токен доступа (лучше завести пользователя только с read-only-правами). См. figma.com/developers/api#access-tokens
  1. Устанавливаете figma-backup из npm (github.com/mimshins/figma-backup). Пакет не наш, ответственности не несу.
npm install -g figma-backup
  1. Устанавливаете jq:
brew install jq
  1. Запускаете скрипт, заменив {{переменные}} на значения.
FIGMA_TOKEN={{token}}
TEAM_ID={{team-id}}

PROJECTS_ID=$(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/teams/$TEAM_ID/projects" | jq -j '.projects[] | .id, " "')
echo "$PROJECTS_ID"
echo "====="

npx figma-backup -e "{{email}}" -p "{{password}}" -t "$FIGMA_TOKEN" --projects-ids $PROJECTS_ID
  1. Вы получите папку, в которой будет лежать все файлы, с которым имеет доступ пользователь {{email}}.
  1. Если нужно запускать регулярно, добавьте в крон и/или в CI-пайплайн.

Готовьтесь, это все работает медленно. Наши 2,5 гигабайта файлов экспортируются 3 часа.

Наверное, как-то можно сделать параллельно, не смотрели. Точно можно сделать вариант «не качать файлы, если они не менялись», пока не заморачивались.

Подписаться на блог…

Верстка под телеграм

Есть два вида пишущих в телеграме

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

Как должно быть:

  • Понятное обращение и краткая суть
  • Текст, разбитый на абзацы
  • Ссылки отдельно с новых строк (чтобы они не рвали сообщение на части)

Например, можно как-то так:

Если человек не может нормально отформатировать сообщение в мессенджере, то может быть два варианта:

  • Ему не важно ваше удобство
  • У него беспорядок в голове
  • Он очень торопится Да даже когда торопится так не сделать.
Подписаться на блог…

Одна небольшая тупость в iOS

Джобса на вас нет

Если при включенном хотспоте попробовать включить вай-фай, айфон покажет вот такое сообщение:

Чтобы сфокусироваться на главном, применим дизайнерский хак:

iOS говорит нам:
— Пс, парень! Хочешь включить хотспот?

Что произойдет при нажатии «Включить»?
Хотспот отключится.

Как. Такое. Можно. Было. Сделать.

Подписаться на блог…

Спектакли за 2021

За четыре месяца (с сентября по декабрь 2021 года) я сходил на полтора десятка спектаклей. Мы не ходили в театр весь 2020 год, а деньги на статье семейного бюджета «театр» продолжали копиться. Нагнали пропущенное мы во второй половине года 2021.

Вот на что сходил:

Спектакль Театр Режиссер Понравилось ли
Ричард III (второй раз) Театр Вахтангова ★★★★★
Война и мир Театр Вахтангова Римас Туминас ★★★★★
Дядя Ваня Театр Вахтангова Римас Туминас ★★★★☆
Маскарад Театр Вахтангова Римас Туминас ★★★★☆
Царь Эдип Театр Вахтангова Римас Туминас ★★★★☆
Бег Театр Вахтангова Юрий Бутусов ★★★★★
Король Лир Театр Вахтангова Юрий Бутусов ★★★★☆
Сын РАМТ Юрий Бутусов ★★★☆☆
Все тут Театр современной пьесы Дмитрий Крымов ★★★★☆
Костик Театр им. Пушкина Дмитрий Крымов ★★★☆☆
Моцарт «Дон Жуан».
Генеральная репетиция
Театр П. Фоменко Дмитрий Крымов ★★★★★
Горбачев Театр наций ★★★★☆
Сказки Пушкина Театр наций ★★★★☆
Боюсь стать Колей МХТ Марина Брусникина ★★★★☆
Враки, или Завещание
барона Мюнхгаузена
МХТ ★★★★☆

★★★★★ — понравилось, я бы сходил и второй, и третий раз (или уже сходил не один раз)
★★★★☆ — понравилось, но идти второй раз пока планов нет

Как начать ходить в театр

Мне кажется, те, кто не ходит в театр, не ходят не потому, что не нравится, а потому, что не пробовали. Я бы посоветовал сходить два-три раза, ну не понравится, значит не понравится.

Чтобы начать, я бы посоветовал сходить на два спектакля:

  • Евгений Онегин, театр Вахтангова
  • Ричард III, театр Вахтангова
    Оба спектакля я смотрел дважды и готов сходить ещё пару раз.

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

Хорошие места на Евгения Онегина:
5-6-й ряд, места в середине поближе к проходу.
10-й ряд, места 11, 12, 13. Этот ряд сдвигается на полряда в сторону относительного 9-го, сиденья становятся в шахматном порядке и никто не мешает спереди своей головой.

Хорошие места на Ричарда:
Любые места в центре поближе к сцене.



Если хочется спросить про какой-то из спектаклей, напишите лично. Я специально ничего не писал про сами спектакли, чтобы случайно ничего не заспойлерить.

Подписаться на блог…

Разделять вопросы и предложения

Бывают фразы ни туда, ни сюда. Например, «можно увеличить тут отступ и кегль». Я после таких сижу и туплю. Делать что-то надо или нет. Рассказываю, что с этим делать.

Допустим, говорят «можно увеличить тут отступ и кегль» — ну ок, можно увеличить отступ, можно кегль. Увеличиваем отступ, или кегль, или и то, и другое? Есть ли другие решения, что в итоге делаем?

Или вот «файлы можно выкладывать в артифакторий», — еще можно в гит лфс, фтп-сервер, на файловую шару, в S3. Куда нужно? Куда лучше?

Примеры выше — неудачно сформулированные предложения. Такое бывает. Если сформулировать предложения эксплицитно, то станет лучше. Следите за руками:

Непонятно что Отлично
Можно увеличить тут отступ и кегль Чтобы решить проблему, предлагаю увеличить тут отступ до 16 пк, а кегль до title. Заголовок будет держать конструкцию ниже, а лид и заголовок не будут слипаться.
Что думаешь?
Файлы можно выкладывать в артифакторий Файлы бинарные, файлов пока не очень много (100...1000 ГБ), не требуется доступ непосредственно с клиентов. Так?
Давайте тогда выкладывать в артифакторий, это оптимальный вариант.
Файлы можно выкладывать в артифакторий Давай выкладывать файлы в артифакторий.

Ещё пример.

Мне однажды написали буквально следующее «Будут ли замечания из твоего письма оформлять как баги? У меня по письму вопросы есть».

Я опешил, перечитал несколько раз, но все равно остался опешившим. Вот что это такое было? Что от меня хотят? Как я могу ответить про действия неких неустановленных третьих лиц. Тогда все, что я смог — ответил на вопрос «не знаю, будут ли заводить баги». Не было проблемы — появилась проблема. Мне самому сейчас нужно убедиться, что мне эти какие-то вопросы зададут. Если я сейчас не проконтролирую, то фичу сделают не так, как я ожидаю.

Всегда ли нужно что-то предлагать? Нет, не всегда. Но и отсутствие предложения тоже надо сформулировать ясно. Пример ниже.

У нас есть три варианта:

  1. Сделать все своими руками. У нас мало свободных ребят, поэтому по времени — два месяца, по деньгам — K рублей.
  2. Своими силами сделать скелет макета, а для иллюстраций взять подрядчиков. По времени — месяц, по деньгам — N рублей.
  3. Все отдать на аутсорс. По времени — три недели, по деньгам — M рублей.

Как поступим?

И итоге вся схема рабочего общения выглядит примерно так:

См. также

Видео Артёма Горбунова общаться вопросами и предложениям

Все подобные посты — с тегом сделать удобно читателю

Подписаться на блог…

Игры для дизайнеров

Собрал разные дизайнерские игры потренировать насмотренность

Мастхевные

https://bezier.method.ac
Что делать: повторять форму фигуры кривой безье
Зачем: стать гуру вектора, рисовать крутые иконки и векторные иллюстрации
https://cantunsee.space
Что делать: находить мелочи и ошибки в картинках
Зачем: проводить авторский надзор 85 лвл, за секунду находить ошибки недочеты в реализации
Что делать: находить ошибки в инфодизайне
Зачем: натренироваться базовым важным вещам в инфодизайне

Если прошли игры выше

https://betterwebtype.com/triangle/
Что делать: играться с параметрами ширины блока текста, интерлиньяжа и кегля, чтобы собрать идеальный параграф
Зачем: потренировать чувство текстового блока
https://type.method.ac
Что делать: расставлять буквы в строке
Зачем: потренировать чувство букв, потренировать в кернинге, если делаете шрифт (ну да)
https://color.method.ac
Что делать: подбирать цвет по полному совпадению, искать противоположный и гармоничный к заданному
Зачем: потренировать глазомер цвета
https://boolean.method.ac
Что делать: пользуясь булевыми операциями сделать из запчастей иконку
Зачем: потренироваться, чтобы быстрее собирать иконки
https://shape.method.ac
Что делать: исправлять сломанную форму буквы усиками кривых безье
Зачем: потренировать чувство вектора и букв

Знаете ещё какие-нибудь?

Подписаться на блог…

Толщины шрифтов в CSS

Постоянно путаюсь Bold — сколько это в цифрах font-weight, сделал себе шпаргалку.

Вот толщины в названии шрифтов

Название font-weight
Thin / Hair 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi Bold 600
Bold 700
Extra Bold 800
Black / Heavy / Ultra 900

Это стандартные толщины по умолчанию. Если вдруг в шрифте есть более редкое, например, Book, то его толщину в цифрах тоже можно узнать:

  • Берете файл шрифта
  • Бросаете его в https://fontdrop.info/ (или другой просмотрщик шрифтов)
  • Открываете вкладку Data · OS/2 and Windows Metrics Table и ищете usWeightClass.

Например, как выглядит Fira Sans Book:

Чтобы использовать font-weight важно правильно настроить CSS-маппинг (замаппить название шрифта на толщине).

Вот правильный (code.cdn.mozilla.net/fonts/fira.css):

@font-face{
    font-family: 'Fira Sans';
    src: url('eot/FiraSans-Hair.eot');
    src: local('Fira Sans Hair'),
         url('eot/FiraSans-Hair.eot') format('embedded-opentype'),
         url('woff/FiraSans-Hair.woff') format('woff'),
         url('ttf/FiraSans-Hair.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
 Нет комментариев    3464   2021  
Подписаться на блог…

Как запросить доступ

Про один частный случай принципа «В письме уже есть всё нужное»

Напомню принцип:
Чтобы собеседнику было проще ответить, в вашем письме должно быть все необходимое. Даже если все материалы были в треде раньше, даже. Покажу на примере задачи «попросить доступ».

Как не надо просить доступы

Вот антипримеры:

  • — Привет! Дай мне доступ к макетам.
    Кому «мне» (надо глянуть адресата), к каким макетам (нужно будет спросить).
  • — Привет! Дай мне и Насте доступ к макетам.
    Кому «мне» (надо глянуть адресата), какой Насте (нужно будет спросить), к каким макетам (нужно будет спросить).

Почему так происходит

У вас просто разная картинка мира

Как у вас Как у того, кому вы пишете
У вас есть один проект, поэтому вам совершенно очевидно, к каким макетам вам нужен. Доступ нужен к макетам того единственного проекта, которым вы занимаетесь. У того же, кому вы пишете, доступ есть к макетам двадцати продуктов. К какому вам нужен доступ — неясно.
Вы знаете всю свою команду и вам достаточно сказать «Настя», и будет понятно, про какую Настю речь, даже если эта Настя недавно присоединилась. Так вышло, что у него 5 коллег-Насть, с которыми он общается.
Для вас доступ — это просто «посмотреть макеты», а как же ещё. Для человека есть больше вариантов доступа: смотреть, комментировать, менять. Доступ можно дать на файл, а можно на проект целиком.

Как надо

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

Маргарита!

Дай мне (Мише Озорнину) и Насте Ивановой доступ к макетам.

Проект: Secret Project Name
Доступ: смотреть и писать комментарии
Наши адреса:
mozornin@example.com
aivanova@example.com

Я настолько с прибабахом, что после «мне» пишу свои имя и фамилию, чтобы не надо было гадать кому «мне». Особенно часто всякие «мне» теряются при пересылке письма. В пересланном письма обычно видишь «мне», но не видишь от кого кому было письмо.

Подписаться на блог…

Не погружать собеседника в лишние подробности

Пишу еще про один заскок.

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

— Пойдем в бар?
— Мне доктор запретил пить алкоголь, пока я принимаю лекарства.

— Можем завтра созвониться в 12?
— Не могу, мне кота везти на операцию.

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

Зачем? Что мне с этим делать? Думать про доктора и потенциальный диагноз? Переживать за кота? Вспоминать как помочь (и нужно ли) при панической атаке?

Мне кажется, все перечисленные ниже причины нормальные, и вежливо не уговаривать, не уточнять подробности и тем более не брать на слабо.

  • Мне неудобно в это время
  • Я не пью алкоголь
  • Я временно не пью алкоголь
  • Мне это не интересно
  • Я не хочу на воздушный шар
  • Я бы очень рад, но я боюсь высоты

У меня есть варианты причин почему люди говорят так, но я же не психотерапевт, поэтому помолчу.

UPD. Получил комментарий, что:

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

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

И да, многие воспримут «Мне не интересно» в такой форме резковато. Но это вопрос формы, а не смысла. Например:

Мне это не интересно на пейнтбол.

Я буду рад всех увидеть, но вот конкретно на пейнтбол не хочу. Давайте что-нибудь другое, например: …

Или даже так:

Ребята, я так рад, что всех вас увижу после этого ковидного года. С нетерпением жду нашей встречи. Я огорчен, что пока из вариантов только те, которые мне ну совсем-совсем не интересны (ну вот такой я человек). Давайте что-нибудь другое, например: …

Или даже так:

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

А иначе получается так:

Я не хочу на воздушный шар, боюсь. Но пойду. Поэтому ты вы все мне уже должны, ежели я через себя переступил. А еще у меня будет паническая атака, а вы будете смотреть и чувствовать себя виноватыми. Так вам и надо.

Подписаться на блог…

Ссылка на новой строке

Заметил, что ставлю ссылку отдельно от текста.

Не так:
Посмотри, норм ли так http://mikeozornin.ru/blog/all/how-to-download-screens-from-zeplin-and-figma/ ?

А так:
Посмотри, норм ли так?
http://mikeozornin.ru/blog/all/how-to-download-screens-from-zeplin-and-figma/

Можно поставить знаки нормально, без пробела, но и без риска, что они прилипнут к ссылке. Никакой текст после ссылки не потеряется, особенно важно, если там вопрос.

Подписаться на блог…
Ранее Ctrl + ↓