В инструменте проектирования интерфейсов Figma появился Auto Layout. Выглядит интересно.

Подробности и примеры применения смотрите у них на сайте: https://tprg.ru/AbjV

#фронтенд #figma

​Если вы всё ещё не используете Figma или делаете это неуверенно? Тогда мы идём к вам!

Figma — мощный онлайн-сервис для разработки интерфейсов и других графических дизайнов. В Figma доступно множество инструментов, которые позволяют удобно создавать макеты сайтов.

А полноценно познакомиться со всей функциональностью сервиса и добавить его мощь в свой арсенал поможет курс на YouTube:

https://www.youtube.com/playlist?list=PLM2Q6lcZo4MexclJrYxA0Is42qWBBuHpB

#фронтенд #figma

​Как устроена Figma с точки зрения вёрстки

Ахмад Шадид покопался в вёрстке Figma и нашёл несколько интересных вариантов использования Flexbox и Grid. В этой статье он показал их и продемонстрировал насколько мощны сегодня эти способы расположения элементов.

Подробнее:

https://ishadeed.com/article/figma-css/

#css #figma

​Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS

В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке. 

В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:

https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/

#figma #css #nextjs #фронтенд

​Figma добавила Dev Mode для веб-разработчиков

Анонсирован режим Dev Mode, который позволяет получить код CSS из макетов в Figma. Функция бесплатна до 2024 года для всех пользователей.

Как использовать новые возможности описано здесь.

#css #figma

​ИИ для конвертации Figma в код

Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.

Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.

#react #figma

​​Figma закрыла Dev Mode: пути обхода и их краткий обзор

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим.

Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказали в статье: https://habr.com/ru/companies/selectel/articles/795621/

#дизайн #figma

​​Figma объявила о выпуске бета-версии Code Connect — функции, созданной для упрощённого внедрения дизайн-систем

Code Connect — это утилита, предоставляемая через npm для проектов JavaScript и TypeScript, а также как диспетчер пакетов Swift для проектов SwiftUI.

Это позволяет дизайнерам и разработчикам эффективно сотрудничать в рамках различных рабочих процессов, легко устанавливать и использовать в своих проектах независимо от платформы. В ближайшее время появится дополнительная поддержка платформ.

При этом разработчик при переходе в макет сразу видит эту документацию и код, в том числе одобренные и поддерживаемые образцы, опубликованные командой систем проектирования. Благодаря тому, что разработчикам не нужно переписывать компоненты, им требуется поддерживать меньше кода.

Инструмент будет полезным при масштабировании команд, так как облегчит им синхронизацию работы и соблюдение требований дизайн-систем.

В конце января Figma закрыла Dev Mode для пользователей бесплатного тарифа. Теперь он стоит $12 в месяц. Dev Mode — это режим разработки, который позволяет быстро переводить проекты в код. Там доступен код элементов разных платформ, можно создавать плагины под различные фреймворки, представлена интеграция с VSCode, позволяющая смотреть дизайн прямо в среде разработки.

#дизайн #figma

Дизайнеры всё

Парень поделился плагином для Figma, который копирует дизайн любого сайта буквально в пару кликов. Просто отдаёте ему ссылку и получаете готовый дизайн, с которым можно работать как вам захочется.

#инструменты #дизайн #figma

Верстка сайта по макету из Figma без Dev Mode в бесплатной версии

Как вы знаете, бесплатно сейчас работать в DEV-режиме фигмы уже нельзя. Но если денег на подписку у вас нет или просто жалко, а макет уже ждёт, то всё-таки кое-что можно сделать.

В этом видео вы узнаете, как правильно переносить элементы дизайна из бесплатной версии Figma на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете.

#видео #урок #figma #фронтенд

Figma во всю готовится к выходу iOS 26

Команда выпустила огромную библиотеку ассетов в стиле Liquid Glass. Там всё, что может вам потребоваться: кнопки, меню, обои и прочее.

А чтобы вы не запутались, ещё и гайд подробный опубликовали.

#дизайн #figma