ArtemKonkin Feb 15 2021 at 08:07

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

3 min

23K

Web design*Website development*Interfaces*HTML*Design

Tutorial

Comments 25

ArtemKonkin Feb 15 2021 at 09:30

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

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

gespo Feb 15 2021 at 13:23

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

ArtemKonkin Feb 15 2021 at 13:25

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

sourbarberry Feb 16 2021 at 07:37

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

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

gespo Feb 16 2021 at 08:55

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

ArtemKonkin Feb 16 2021 at 09:22

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

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

tank666 Feb 20 2021 at 06:42

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

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

guglovich Feb 18 2021 at 08:31

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

ArtemKonkin Feb 18 2021 at 08:32

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

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

guglovich Feb 19 2021 at 01:35

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

ArtemKonkin Feb 19 2021 at 06:09

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

guglovich Feb 20 2021 at 17:10

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

kale Feb 15 2021 at 11:25

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

ArtemKonkin Feb 15 2021 at 12:00

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

piratarusso Feb 15 2021 at 13:30

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

ArtemKonkin Feb 15 2021 at 14:32

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

UPD
Готово

piratarusso Feb 15 2021 at 15:28

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

VanishMax Feb 15 2021 at 16:12

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

art_nau_0o Feb 16 2021 at 07:32

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

ArtemKonkin Feb 16 2021 at 07:34

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

egorchumichev Mar 9 2021 at 10:30

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

ArtemKonkin Mar 9 2021 at 10:32

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

egorchumichev Mar 9 2021 at 17:15

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

Spaceoddity Mar 9 2021 at 17:25

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

ArtemKonkin Mar 10 2021 at 09:54

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