huetone-guide

Методичка по Huetone

Что такое Huetone

https://huetone.ardov.me/ Это инструмент для создания и тестирований цветовых палитр с учетом требований доступности который разработал Алексей Ардов.

Возможности Huetone

  1. Поддержка цветовых моделей LCH и OkLCH
  2. Поддержка расширенных цветовых пространств (P3 and Rec2020)
  3. Расчеты для всей палитры
    1. Контраста (WCAG and APCA)
    2. Цветовой разницы (DeltaE)
  4. Экспорт и импорт палитры через JSON
  5. Возможность поделится с помощью URL

    Обзор интерфейса

    https://www.youtube.com/watch?v=31mJMMYoKvU

    Как производить расчеты и изменения?

    https://www.youtube.com/watch?v=31mJMMYoKvU

    Автоматизация импорта и экспорта через Json

    Важно отметить что Huetone поддерживает только палитры с одинаковым числом плотностей цвета. Поэтому убедитесь что число плотностей цвета совпадает. Как вариант добавить пустышки.

    Как автоматически работать с палитрой из Figma заданной в стилях?

    Выгрузка палитры из Figma

  6. В файле Figma запустить плагин Token Studio
  7. Нажать Styles&Variables - Import Styles
  8. Прокрутить и нажать Import all
  9. Переключить режим отображения на JSON {}
  10. Выделить весь JSON и скопировать
  11. Открыть https://colab.research.google.com/drive/1YwrnnrhHAOSRklr67Y3c6EbDn0y8WCrB?usp=sharing
  12. Вставить JSON в поле для него
  13. Ввести имя палитры
  14. Нажать на стрелочку рядом с блоком
  15. После завершения обработки перейти по созданной ссылке

    Загрузка палитры в Figma

  16. В Huetone в основной части нажать на кнопку “Copy tokens”
  17. В Figma открыть плагин Token Studio
  18. Переключить режим отображения на JSON {}
  19. Вставить json
  20. Нажать Save Json
  21. Нажать Styles&Variables - Export styles & variables to Figma - Подтвердить экспорт

    Как автоматически работать с палитрой из Figma заданной в переменных?

    Выгрузка палитры из Figma

  22. Запустить плагин Variables Import Export - Export Variables
  23. Нажать на Export Variables
  24. Выделить JSON нужной коллекции и скопировать
  25. Открыть https://colab.research.google.com/drive/1YwrnnrhHAOSRklr67Y3c6EbDn0y8WCrB?usp=sharing
  26. Вставить JSON в поле для него
  27. Ввести имя палитры
  28. Нажать на стрелочку рядом с блоком
  29. После завершения обработки перейти по созданной ссылке

    Загрузка палитры в Figma

  30. В Huetone в основной части нажать на кнопку “Copy tokens”
  31. В любом текстовом редакторе заменить type на $type, value на $value
  32. В Figma открыть плагин Variables Import Export - Import Variables
  33. Задать имя коллекции
  34. Вставить json
  35. Нажать Save Json
  36. Нажать Styles&Variables - Export styles & variables to Figma - Подтвердить экспорт
  37. Открыть плагин Variables Pro для того чтобы заменить текущую коллекцию на импортированную