В своей практике я часто использую визуально похожие друг на друга компоненты с разной специализацией. Это помогает оптимизировать процесс верстки макетов и доступнее объяснить разработчикам, какие инструменты использовать. Ниже приведен пример с полем для выбора значений. Оно может иметь как один тип, так и множество. Множество помогает лучше передать специфику использования.
Рубрика «figma» - 4
Одинаковые компоненты — разная специализация
2022-01-29 в 17:11, admin, рубрики: figma, UI, UX, ux/ui, атомарный дизайн, веб-дизайн, вебдизайн, графический дизайн, дизайн, дизайн мобильных приложенийЭкспорт UI дизайн-интерфейсов из Figma в Xcode iOS-Android Studio, в виде .xib-xml
2022-01-16 в 14:40, admin, рубрики: android, converter, design patterns, export, figma, generator, iOS, swift, xib, XML, дизайн мобильных приложений, интерфейсы, Разработка под android, разработка под iOSFigmaConvertXib это инструмент для экспорта элементов дизайна из проекта Figma,
в среду разработки, с точностью 90%. В результате конвертации будут созданы файлы xib / xml, и уже с помощью интерфейс редактора Xcode/Android Studio, можно будет манипулировать всеми элементами у себя коде. Если дизайн вашего проекта разрабатывается в Figma, и вы не реализуете дизайн программно, то это для вас.
Для того чтобы не тратить огромное время на реализацию всех UI элементов.
https://github.com/mrustaa/FigmaConvertXib
Разбор UI-UX на примере прототипа в Figma и основные принципы
2020-06-24 в 11:32, admin, рубрики: figma, ui/ux, дизайн, дизайн интерфейсов, дизайн мобильных приложений, дизайн сайтов, новичкам, прототипирование, прототипирование интерфейсов, Управление продуктомКому адресована статья
В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.
В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.
Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Читать полностью »
The Ember Times — Выпуск 134
2020-02-15 в 0:12, admin, рубрики: ember, emberjs, figma, framework, javascript, storybook, the ember times, Программирование, Разработка веб-сайтов, фреймфорк
Привет, Эмберисты!
На этой неделе: Полифилы для пакетов ember-data для старых версий Ember, узнайте как Figma в связке со Storybook облегчает жизнь разработчика, QUnit DOM объявляет о выпуске v1.0, а также выход ember-changeset 3.0.0 !
От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем душевном телеграмм-канале
Модульные скетчи
2019-12-13 в 21:04, admin, рубрики: figma, UI, UX, дизайн, дизайн интерфейсов, интерфейсы
В статье описан способ, который упрощает работу над созданием скетчей. Он подойдет всем людям, работа которых — проектировать интерфейсы для пользователей.
Читать полностью »
FigmaGen: Автоматизация стилей в iOS-приложении
2019-12-04 в 13:37, admin, рубрики: codegeneration, Design Systems, figma, ios development, swift, Блог компании HeadHunter, разработка мобильных приложений, разработка под iOS
Сейчас многие команды систематизируют дизайн своих приложений. Мы решили пойти дальше и автоматизировать синхронизацию кода с нашей библиотекой компонентов.
Дело в том, что в hh для проектирования UI используется небезызвестный сервис Figma, который, кроме прочих своих плюсов, имеет открытый API. А это в свою очередь открывает широкие возможности для разработчиков, чем мы и решили воспользоваться.
Так родилась идея проекта FigmaGen - инструмента, который синхронизирует код с библиотекой компонентов в Figma. Сначала он выглядел, как эксперимент, специфичный только для нашего продукта, но получилось более универсальное решение, и в этой статье мы поделимся первыми плодами своей разработки.
Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™
2019-08-20 в 11:02, admin, рубрики: figma, usability, БЭМ, веб-дизайн, верстка сайтов, дизайн, дизайн-системы, интерфейсы, модульная сетка, процесс разработки, Разработка веб-сайтов
Привет. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
Читать полностью »
Figma — простое решение для дизайнера, сложное решение для верстальщика
2019-08-10 в 14:01, admin, рубрики: css, figma, web-разработка, workflow, анальная боль, веб-дизайн, веб-дизайн и верстка, верстка, графический дизайн, дизайн, интерфейсы, Разработка веб-сайтов
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Читать полностью »
Правила подготовки макетов в Figma
2019-08-09 в 7:14, admin, рубрики: figma, workflow, веб-дизайн, веб-дизайн и верстка, верстка, дизайн, интерфейсы, Разработка веб-сайтов
Боль с одним проектом привела нас к решению написать правила работы
Необходимость составить список правил появилась, когда мы прочувствовали, как больно бывает исправлять ошибки. Макет сайта из одной программы кочевал в другую, разработчиков это не устраивало, дизайнеров не устраивало, что разработчики постоянно вносят правки.
Результатом хождения по граблям между отделами дизайна и разработки стала идея сформулировать правила, высечь их в камне, поместить в pdf файл и раздать всем участникам процесса с директивой «следуй».
Читать полностью »
8 простых UI приёмов чтобы сделать дизайн-прототип динамичным, не прибегая к анимации
2019-07-14 в 16:32, admin, рубрики: dribbble, figma, ui design, usability, веб-дизайн, дизайн мобильных приложений, дизайн система, интерфейсы, прототипирование
Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.
Читать полностью »