Figma 3.0! Стили, прототипирование++ и дизайн в масштабе

Десктопный дизайн может обходиться очень дорого. Команды проводят дни, управляя рабочим процессом подобно доктору Франкенштейну, сшивавшему своего монстра по кускам: к какому прототипу эти комментарии участников проекта? Обновлен ли стиль? Мы все работаем с правильной версией дизайна?

Мы считаем, что в Интернете есть лучший способ организации рабочего процесса. Сегодня мы рады представить Figma 3.0, с тремя новыми функциями, которые — вместе взятые — позволят компаниям всех размеров консолидировать набор используемых инструментов...

Читать далее Нет комментариев

Как мы использовали API от Figma, чтобы конвертировать дизайн в код React

С момента запуска Figma API, многие люди размышляли о возможности автоматического превращения документов Figma в компоненты React. Некоторые из вас создали рабочие прототипы, а Pagedraw даже создал целый продукт!

Нам понравился ваш энтузиазм, и мы поделимся с вами собственным вариантом конвертера React, обсудим тонкие дизайнерские и технические решения, принятые при его разработке, и изложим причины, мотивировавшие его создание. Мы открываем код на GitHub...

Читать далее Нет комментариев

Самый полный архив ресурсов по Sketch ?

Sketch. Вы слышали о нем? Это дизайн инструмент/приложение/программа, которая работает на Mac. Ей уже несколько лет. Если быть точным, то в этом сентябре исполнится 8 лет. Вот так-то!

Sketch был «вещью», которая заставила меня 4 года назад или около того уйти из мира Photoshop (никогда не был фанатом Fireworks).

Я не сразу принял Sketch. Да, назовите меня каким-то шарлатаном, но Photoshop настолько укоренился в моем рабочем процессе и дизайнерском сознании, что я посчитал Sketch, ну, слегка примитивным, вроде как скучным. Он был для меня слегка ванильным...

Читать далее Нет комментариев

Архитектура компонентов в Figma

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

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

Читать далее Нет комментариев

Инструментарий продакт-дизайнера

Когда есть несколько ответов на каждый вопрос, все становится запутанным.

Предисловие

Плотники используют свои любимые молотки. Разработчики используют свои любимые IDE. Врачи используют свои любимые… стетоскопы?

Что же используют продакт-дизайнеры?

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

Читать далее Нет комментариев

Как Dropbox использует Framer X и реальные данные для создания дизайна

Ранее в 2018 году я писал о прототипировании для десктопа и о том, как настройка играет важную роль при проектировании десктопных интерфейсов. Но Desktop Kit не хватало одного важного компонента — реальных данных.

С релизом Framer X наша команда решила перестроить Desktop Kit с нуля, используя реальные данные.

Добавление реальных данных во Framer X

Framer X похож на любой другой инструмент дизайна, но «открыв капот» вы обнаружите, что все построено на React...

Читать далее Нет комментариев

Теперь вы можете с легкостью рисовать в Sketch красивые спирали

Кратко о главном

  • 6Spiral — бесплатный плагин для Sketch, с легкостью рисующий спиральные фигуры.
  • Вы также можете рисовать спиральные фигуры под определенным углом в параллельной проекции, чтобы использовать их во все более популярных трехмерных изометрических иллюстрациях.
  • Вы можете скачать плагин здесь. Также есть отдельный Sketch-файл с руководством и примерами.
  • Сочетание клавиш для плагина — Control + Shift + 6...
Читать далее Нет комментариев

Представляем Figma Smart Selection

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

Большая часть этой работы связана с повторяющимися задачами, такими как «Что, если плотнее скомпоновать иконки?» или «Если передвинуть эти элементы, станет лучше?»

Эта утомительная работа может отнять огромное количество времени...

Читать далее Нет комментариев

Продвинутые текстовые маски в Sketch

Заполнение текста изображением — это самый быстрый и простой способ применить маску к тексту, но он не позволяет контролировать, какая часть изображения используется в маске.

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

Метод 1: Комбинированная фигура. Создает единую фигуру для маски, но...

Читать далее Нет комментариев

Анимируйте проекты Figma при помощи новой интеграции с Principle

Сегодня у нас особая новость, над которой мы работали месяцами… возможно, годами… Теперь Figma интегрируется с инструментом протопирования Principle, поэтому вы можете легко создавать продвинутые анимации в проектах Figma. Да, мы знаем, вы очень рады. Мы тоже. Мы восхищаемся Principle с момента его релиза в 2015 году. Ваши просьбы добавить интеграцию, как в комментариях, так и в постоянных твитах — не остались незамеченными.

С помощью этой интеграции импортируйте свои проекты ...

Читать далее Нет комментариев