This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
👍16🔥6
#такое дня
Если вам кажется, что прототипы в Figma зашли слишком далеко — вам не кажется.
Как вам прототип в виде имитации восьмибитной игры?
А вот держите: «Figland. Find the forbidden scroll».
Практического смысла не больше, чем у любого другого «игрового» портфолио. Впрочем, заглянуть в исходный файл чтобы посмотреть, как оно сделано и почерпнуть знаний — очень стоит.
Если же желаете знать моё мнение о прототипах: всё хорошо в меру. Показать заказчику — прекрасно. Дать же глубоко проработанный прототип разработчику — высока вероятность, что тот обязательно упустит какие-то состояния из виду, запутавшись в экранах.
Короче, карту компонентов и нормальное ТЗ прототип не заменит, но прекрасно дополнит.
А вот поработать с фокус-группой — это завсегда.
Ну как там, добрались до забытого свитка? :)
#figma #prototype
Если вам кажется, что прототипы в Figma зашли слишком далеко — вам не кажется.
Как вам прототип в виде имитации восьмибитной игры?
А вот держите: «Figland. Find the forbidden scroll».
Практического смысла не больше, чем у любого другого «игрового» портфолио. Впрочем, заглянуть в исходный файл чтобы посмотреть, как оно сделано и почерпнуть знаний — очень стоит.
Если же желаете знать моё мнение о прототипах: всё хорошо в меру. Показать заказчику — прекрасно. Дать же глубоко проработанный прототип разработчику — высока вероятность, что тот обязательно упустит какие-то состояния из виду, запутавшись в экранах.
Короче, карту компонентов и нормальное ТЗ прототип не заменит, но прекрасно дополнит.
А вот поработать с фокус-группой — это завсегда.
Ну как там, добрались до забытого свитка? :)
#figma #prototype
Figma
8-bit game
Created with Figma
👍5😁1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
🔥16👍2
#крутое дня
Не то чтоб я собирался всё же сходу показывать дизайн будущего пульта целиком, думал, буду сразу стили на Flutter набрасывать и выкладывать в песочницу, но пара подписчиков захотела это ещё и на HTML/CSS отверстать. Да, @mazya? :)
Не могу сказать, что я прям принимаю вызов, процесс у меня будет двигаться медленно. Но чо бы и нет, мне эти стили пригодятся 😊
В общем, смотрим, комментируем: https://www.figma.com/file/ZEOa8mgVHabB3pgiEuwCm4/mi-tv-remote-app-control-(Copy)
#flutter #figma #remote
Не то чтоб я собирался всё же сходу показывать дизайн будущего пульта целиком, думал, буду сразу стили на Flutter набрасывать и выкладывать в песочницу, но пара подписчиков захотела это ещё и на HTML/CSS отверстать. Да, @mazya? :)
Не могу сказать, что я прям принимаю вызов, процесс у меня будет двигаться медленно. Но чо бы и нет, мне эти стили пригодятся 😊
В общем, смотрим, комментируем: https://www.figma.com/file/ZEOa8mgVHabB3pgiEuwCm4/mi-tv-remote-app-control-(Copy)
#flutter #figma #remote
🔥12👍4❤2
#ссылка дня
Аж несколько. Fons Mans, нидерландский дизайнер, где-то с год назад прошёлся по кампаниям Spotify, Instagram, Apple и решил их повторить в Figma.
Если вам недоставало идей и хотелось чего-то странного поверстать и анимировать, то получилась отличная подборка:
1. Instagram Playback 2021: https://www.figma.com/community/file/1052708550618507395/Instagram-Playback-2021
2. Знаменитое Apple Hello Lettering: https://www.figma.com/community/file/1055218259890078705/Apple-Hello-Lettering
Прекрасно подойдет для тренировок SVG-анимаций.
3. Apple App Store Awards: https://www.figma.com/community/file/1049103690945561588/App-Store-Awards-2021
4. Spotify 2021 Wrapped: https://www.figma.com/community/file/1048300248758550250/Spotify-Wrapped-2021
Удачных тренировок 🙂
#design #figma
Аж несколько. Fons Mans, нидерландский дизайнер, где-то с год назад прошёлся по кампаниям Spotify, Instagram, Apple и решил их повторить в Figma.
Если вам недоставало идей и хотелось чего-то странного поверстать и анимировать, то получилась отличная подборка:
1. Instagram Playback 2021: https://www.figma.com/community/file/1052708550618507395/Instagram-Playback-2021
2. Знаменитое Apple Hello Lettering: https://www.figma.com/community/file/1055218259890078705/Apple-Hello-Lettering
Прекрасно подойдет для тренировок SVG-анимаций.
3. Apple App Store Awards: https://www.figma.com/community/file/1049103690945561588/App-Store-Awards-2021
4. Spotify 2021 Wrapped: https://www.figma.com/community/file/1048300248758550250/Spotify-Wrapped-2021
Удачных тренировок 🙂
#design #figma
🔥7👍1
#такое дня
Ну что, котаны. Это случилось. Figma стала просить денег за DevMode.
Если вы жили последние месяцев 8 под камнем, то Figma перенесла специфичные для разработчиков фишечки в отдельный режим. Теперь режимы редактирования, просмотра и экспорта в код разнесены практически насовсем.
Что такое DevMode и какие преимущества он давал? Ну и даёт, для тех, кто платит.
1. Автоматическое отображение отступов и применённого лейаута прямо на холсте
2. Инспекция боксовой модели контейнеров
3. Автогенерация кода (CSS, iOS Swift/SwiftUI, Android Java/Kotlin и через плагины ещё с десяток платформ, включая Flutter)
4. Автоматическая генерация дизайн-токенов для выбранной платформы.
5. Сравнение версий дизайна
6. Именование слоёв
7. Более удобный экспорт ассетов и контента.
Что меня бесит больше всего, что Figma буквально пробила свой путь в наши сердца отображая CSS и отступы на холсте по-умолчанию. А теперь сделала такую себе кодогенерацию и хочет денег. Если ты учишься, это малость неудобно. Если зарабатываешь на фигме деньги — ну окей, возможно, стоит и заплатить.
Впрочем, для базовой работы DevMode может оказаться и не нужен.
1. Отступы на холсте всё так же отображаются по зажатой клавише Option/Alt.
2. Настройки эффектов никто не скрывал, они легко считываются.
3. Для сложных случаев, как минимум, в вебе, всегда можно установить расширение. Например, Inspect Styles (на скрине). Оно вернёт на место как CSS-переменные (из токенов), так и все нужные правила.
Напоминаю, что бездумно копировать отступы и координаты из генератора кода в Figma не надо. Вёрстка не про это. А вот настройки шрифта, фона и эффектов — да, очень уютно.
Делитесь вашими любимыми плагинами в комментариях, котаны!
А вообще, не забывайте о Pixso и PenPot! PenPot ещё и опенсорсный, можно у себя развернуть.
#figma #design #greed #money
Ну что, котаны. Это случилось. Figma стала просить денег за DevMode.
Если вы жили последние месяцев 8 под камнем, то Figma перенесла специфичные для разработчиков фишечки в отдельный режим. Теперь режимы редактирования, просмотра и экспорта в код разнесены практически насовсем.
Что такое DevMode и какие преимущества он давал? Ну и даёт, для тех, кто платит.
1. Автоматическое отображение отступов и применённого лейаута прямо на холсте
2. Инспекция боксовой модели контейнеров
3. Автогенерация кода (CSS, iOS Swift/SwiftUI, Android Java/Kotlin и через плагины ещё с десяток платформ, включая Flutter)
4. Автоматическая генерация дизайн-токенов для выбранной платформы.
5. Сравнение версий дизайна
6. Именование слоёв
7. Более удобный экспорт ассетов и контента.
Что меня бесит больше всего, что Figma буквально пробила свой путь в наши сердца отображая CSS и отступы на холсте по-умолчанию. А теперь сделала такую себе кодогенерацию и хочет денег. Если ты учишься, это малость неудобно. Если зарабатываешь на фигме деньги — ну окей, возможно, стоит и заплатить.
Впрочем, для базовой работы DevMode может оказаться и не нужен.
1. Отступы на холсте всё так же отображаются по зажатой клавише Option/Alt.
2. Настройки эффектов никто не скрывал, они легко считываются.
3. Для сложных случаев, как минимум, в вебе, всегда можно установить расширение. Например, Inspect Styles (на скрине). Оно вернёт на место как CSS-переменные (из токенов), так и все нужные правила.
Напоминаю, что бездумно копировать отступы и координаты из генератора кода в Figma не надо. Вёрстка не про это. А вот настройки шрифта, фона и эффектов — да, очень уютно.
Делитесь вашими любимыми плагинами в комментариях, котаны!
А вообще, не забывайте о Pixso и PenPot! PenPot ещё и опенсорсный, можно у себя развернуть.
#figma #design #greed #money
👍20❤6🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#видео дня
Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.
Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.
Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.
Вот и я не знал.
Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo
Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427
Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync
Это, конечно, просто взрывает мозг. Но, с другой стороны, я прямо сейчас нахожусь в ситуации, когда слишком продвинутые прототипы сильно мешают работать.
Расширенные прототипы великолепно подходят для проведения юзер-сессий, но без адекватного каталога виджетов и состояний они не имеют смысла и делают жизнь разработчиков сложнее.
В любом случае, подобные синхронизаторы отлично подходят чтобы сразу протестировать дизайн без кода и, вообще, понять, работает ли он.
Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.
#figma #design #prototype
Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.
Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.
Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.
Вот и я не знал.
Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo
Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427
Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync
Это, конечно, просто взрывает мозг. Но, с другой стороны, я прямо сейчас нахожусь в ситуации, когда слишком продвинутые прототипы сильно мешают работать.
Расширенные прототипы великолепно подходят для проведения юзер-сессий, но без адекватного каталога виджетов и состояний они не имеют смысла и делают жизнь разработчиков сложнее.
В любом случае, подобные синхронизаторы отлично подходят чтобы сразу протестировать дизайн без кода и, вообще, понять, работает ли он.
Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.
#figma #design #prototype
👍8🤩4