@ArtemKonkin15 фев 2021 в 05:07

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

3 мин

24K

Веб-дизайн * Веб-разработка * Интерфейсы * HTML * Дизайн

Туториал

Комментарии 25

@ArtemKonkin 15 фев 2021 в 06:30

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

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

@gespo 15 фев 2021 в 10:23

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

@ArtemKonkin 15 фев 2021 в 10:25

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

@sourbarberry 16 фев 2021 в 04:37

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

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

@gespo 16 фев 2021 в 05:55

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

@ArtemKonkin 16 фев 2021 в 06:22

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

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

@tank666 20 фев 2021 в 03:42

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

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

@guglovich 18 фев 2021 в 05:31

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

@ArtemKonkin 18 фев 2021 в 05:32

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

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

@guglovich 18 фев 2021 в 22:35

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

@ArtemKonkin 19 фев 2021 в 03:09

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

@guglovich 20 фев 2021 в 14:10

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

@kale 15 фев 2021 в 08:25

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

@ArtemKonkin 15 фев 2021 в 09:00

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

@piratarusso 15 фев 2021 в 10:30

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

@ArtemKonkin 15 фев 2021 в 11:32

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

UPD
Готово

@piratarusso 15 фев 2021 в 12:28

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

@VanishMax 15 фев 2021 в 13:12

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

@art_nau_0o 16 фев 2021 в 04:32

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

@ArtemKonkin 16 фев 2021 в 04:34

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

@egorchumichev 9 мар 2021 в 07:30

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

@ArtemKonkin 9 мар 2021 в 07:32

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

@egorchumichev 9 мар 2021 в 14:15

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

@Spaceoddity 9 мар 2021 в 14:25

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

@ArtemKonkin 10 мар 2021 в 06:54

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий