Figma — делаем дизайн компонентов, пригодный для экспорта в код

[ArtemKonkin]

Если что-то непонятно — то оставляйте свои комментарии, я доработаю туториал.

Если будут вопросы — то тоже буду рад ответить…

[gespo]

Здравствуйте! Подскажите как у вас получилось установить тёмную тему?

[ArtemKonkin]

Здравствуйте!
Это приложение Фигмы для Linux систем.
Там есть управление темами.
github.com/Figma-Linux/figma-linux

[sourbarberry]

А ещё есть приложение под Mac OS darkfigma.com

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

[gespo]

Большое спасибо! Жаль для окон ничего нет…

[ArtemKonkin]

Можно вот так…
Ссылка

Скрипт, если его выполнить в консоли разработчика фигмы заменит на тёмную тему пространство.

[tank666]

Для Windows я использую решение от Paper Tiger, ссылку уже скинули. Доработал под себя, и теперь интерфейс Figma чёрный. Минус в том, что при запуске приложения, перезагрузке вкладок нужно заново запускать код.

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

[guglovich]

Интересно, я с Лини, но не видел и не найду где изменить.

[ArtemKonkin]

Репозиторий фигмы
github.com/Figma-Linux/figma-linux

Надо последний релиз ставить, там есть темы.

[guglovich]

Да релиз то последний, Арч из AUR автоматом обновляет. Но не нашёл банально где меняется.

[ArtemKonkin]

Справа сверху, есть стрелка вниз, рядом с кнопками сворачивания и закрытия окна. Там в меню есть Settings — > themes. Ну или Theme Creator

[guglovich]

Благодарю. Я даже ниразу не замечал этой стрелки)

[kale]

Посмотреть по ссылке не получается:
Config Error
Line 1
Cannot find module 'tailwindcss/colors'

[ArtemKonkin]

Хм, проверил в Firefox и Edge — всё ок.
Какой у вас браузер?

[piratarusso]

Мне совершенно непонятно, что такое фигма и для чего именно вы её используете. Может быть пара предложений в начале статьи улучшат дело?
Отсылка на сайт фигмы только усложняет проблему. Там тоже не пойми что.

[ArtemKonkin]

Спасибо за отзыв. Добавлю )

UPD
Готово

[piratarusso]

Спасибо. Мне кажется стало понятнее.

[VanishMax]

Спасибо! Не знал ни о плагине, ни об Auto Layout. В итоге залип на разных туториалах, чтобы разобраться с новыми для себя знаниями :)

[art_nau_0o]

Проблема — отсутствие семантики, все на дивах, хотя конечно же, список должен быть ul>li. Править руками большой компонент очень затратно, может быть есть способ генерировать более семантичную разметку?

[ArtemKonkin]

Вы правы, плагин не понимает где там лист, а где баттон… к моему сожалению. И способов пока не придумали на сколько я знаю.

[lightonce]

Может быть, это хороший плагин для каких-либо простых элементов, но судя по скриншотам, семантика здесь довольно сильно страдает :-)
В первом примере правильнее использовать

[ArtemKonkin]

Согласен, HTML разметка на дивах — это не совсем подходящий вариант, но всё же — почти от всех проблем со стилями плагин позволяет избавиться.

[lightonce]

В любом случае, информация полезная. Недавно начал изучать Фигму более подробно. Не знал, что есть такой плагин. Спасибо за статью

[Spaceoddity]

А почему он вектор не умеет в код вставлять? Я уж молчу про кодировку в base64 и background в css.

[ArtemKonkin]

Я не знаю почему. Так сделали разработчики плагина.