Дизайн-система в Figma. Часть 1: типографика, цвета и стили | by Татьяна Маслакова. Веб дизайн | Дизайн-кабак

Эта серия статей будет полезна новичкам, тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop, а также тем, что уже работает в Figma, но еще не освоил ее в достаточной степени, чтобы создать свою собственную дизайн-систему. Система конечно не претендует на глобальные системы для огромных проектов и порталов, но она может здорово упростить и ускорить работу начинающим дизайнерам.

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

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

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

Меняешь в одном месте, меняется везде. Такую основную мысль я преследовала при создании этой системы.

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

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

1. Стили заголовков до 5-го уровня.
2. Группу стилей для основного размера текста (просто текст, жирный текст, подчеркнутый текст для дизайна ссылок).
3. Аналогичную группу для мелкого текста.
4. Иногда необходимо также продумать набор стилей для супер-мелкого текста (какие-то подписи или мелкие детали интерфейса) и большого текста (выделения, цитаты и прочее).
5. Стиль для надписей на кнопках
6. Стиль для меню и прочей навигации в шапке сайта

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

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

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

Аналогичным образом создаются все необходимые стили для вашей дизайн системы.

Итак, мы задали необходимый минимальный набор стилей для текста — это те стили, которые по моему опыту, чаще всего требуются при дизайне среднестатистического сайта. Если впоследствии работы над проектом вам потребуются другие варианты оформления текста (к примеру, вы захотите вставить цитаты курсивом или огромные полупрозрачные фразы в дизайн), вы легко сможете вернуться к вашей дизайн-системе и добавить все необходимое.

Надеюсь, когда-нибудь фигма научится наследовать текстовые стили друг от друга, подобно тому, как это реализовано в ворде. Поменял в родительском стиле какие-либо настройки — они поменялись везде, где в наследовании этого не переопределено. Было бы круто и сэкономило бы очень много времени при копировании готовой системы в новые проекты.

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

Для примера, возьмем среднестатистический сайт на светлом фоне, с какими-то вставками из светло-серого фона. Нам нужно продумать, какого цвета будут наши кнопки, как поменяется цвет при наведении на них, будет ли дополнительный комплект кнопок для действий, которые надо выделить. Продумать дополнительные цвета для мелких акцентов, цвет текста и иконок, цвет обводок. Удобнее всего это сделать, создав прямоугольник, залив его цветом и определив для этого цвета стиль. Не бойтесь изначально не попасть в идеальный для вас цвет: мы создаем систему, которая будет легко меняться и настраиваться, поэтому вы всегда сможете отредактировать цвета и они изменятся во всем вашем проекте. Также не бойтесь чего-то забыть, добавить еще один цвет в систему будет очень легко — главное потом не забывать применять все эти стили, что мы сейчас определяем.

После того, как мы закончим с цветом и текстом, мы увидим внушительный список различных стилей в правой панели у Figma:

Думаю, пора уже нам познакомиться с компонентами.

Первым делом мы создадим компонент для плашки, настроим ее внешний вид, попутно создадим стиль для всех теней в проекте (теней для плашек в том числе).

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

Выделяем наш прямоугольник и создаем новый компонент. Не забудьте задать новое имя для компонента на панели слоев слева. Я назвала его surface.

Если прокликаться до нашего прямоугольника, то в левой панели во вкладке Constraints мы увидим, что по умолчанию привязки к краям заданы как Scale. Это значит, что объект будет пропорционально масштабироваться при изменении размеров компонента. Задайте значение как на картинке:

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

Далее выделяем наш компонент и в правой панели ищем вкладку Effects. Добавляем и настраиваем тень. Тень применится прямо к компоненту. Я предпочитаю мягкие, неяркие размытые тени, которые не слишком бросаются в глаза, но при этом мягко подчеркивают плашки.

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

Созданный стиль появится в нашем проекте под стилями цвета:

Итак. Базовый компонент плашки готов. Теперь я хочу расширить его функционал:

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

Но для этого предварительно нарисуем эту иконку при помощи инструмента Pen (горячая клавиша P). Не забудьте к линиям иконки применить цвет из палитры, что мы создали ранее.

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

Выделяем компонент иконки и дублируем его (Comand+D или Contrl+D). у нас создастся экземпляр компонента. При этом при любом изменении основного компонента иконки будут меняться все его экземпляры. Перетаскиваем этот экземпляр прямо в компонент с нашей плашкой и настраиваем constraints так, чтобы иконка всегда была привязана к правому верхнему углу компонента.

Теперь я хочу добавить в этот компонент небольшой треугольник того же цвета, что и плашка, чтобы наш компонент можно было применять для каких либо подсказок, диалогов и подобных элементов. Для этого создаем этот треугольник при помощи инструмента Pen. Необходимо поместить слой треугольника внутрь компонента, к нему также применится общая тень всего компонента. При помощи constrains и его положения можно настроить его отображение сверху и по центру плашки, можно разместить его слева, как вам удобнее. Можно создать несколько таких треугольников и скрывать лишние при необходимости.

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

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

Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, не жалейте ладошек и хлопайте, будет стимул писать дальше.

Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.

Если задать грамотные имена нашим стилям с использованием знака «/», то они сгруппируются в палитре слоев:

Примеры именования:

Также хорошим тоном считается использования описаний для стилей — это будет полезно многим:

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

Комментарий задается при редактировании стиля в поле description.

Цвета и эффекты также можно переименовать в соответствии с этими правилами, если в вашем проекте их будет слишком много и станет сложно в них ориентироваться.

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.

Instagram

Продолжение:

• Часть 2: Кнопки
• Часть 3: Поля ввода и выпадающие списки
• Часть 4: Поиск и умный поиск
• Часть 5: Списки и Auto Layout

типографика, цвета и стили — Дизайн на vc.ru

Статья будет полезна новичкам, кто еще сомневается, переходить ли в Figma, Sketch или XD из Photoshop, а также тем, кто уже работает в Figma, но еще не освоил эту программу в достаточной степени, чтобы создать свою собственную дизайн-библиотеку.

49 695
просмотров

Библиотека компонентов и стили в Figma Татьяна Маслакова 

Рассказываю, как автоматизировать свою работу в Figma, создать удобную и гибкую библиотеку компонентов, которую можно будет легко настраивать под новые проекты. Объясняю, как пользоваться стилями для текста, цвета, эффектов.

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

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

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

Меняешь в одном месте, меняется везде. Такую основную мысль я преследовала при создании этой системы.

Типографика. Готовим стили для текста

По опыту, базовый набор стилей для текста должен включать себя:

• Стили заголовков до 5-го уровня.
• Группу стилей для основного размера текста (просто текст, жирный текст, подчеркнутый текст для дизайна ссылок).
• Аналогичную группу для мелкого текста.
• Иногда необходимо также продумать набор стилей для супер-мелкого текста (какие-то подписи или мелкие детали интерфейса) и большого текста (выделения, цитаты и прочее).
• Стиль для надписей на кнопках, для меню и прочей навигации в шапке сайта.

Не переживайте, если вы забудете сделать какой-либо стиль — по мере работы над вашим проектом, вы всегда сможете его добавить в свою систему.

Итак, создаем текстовый слой, задаем ему шрифт, начертание, размер, отступы и другие параметры на панели слева. Затем нажимаем на иконку с четырьмя точками на этой панели и в появившемся окошке жмем +:

​Создание стиля для текста в Figma Татьяна Маслакова

Задаем имя стиля, далее он появится у вас на панели слева.

​Стиль текста в Figma Татьяна Маслакова

Таким же образом создаем все остальные стили для нашей дизайн-системы.

​Таблица текстовых стилей в дизайн-библиотеке в Figma Татьяна Маслакова

Если при работе над вашим проектом вам потребуются другие варианты оформления текста (крупные цитаты, сноски, подписи и так далее), вы спокойно сможете вернуться к дизайн-системе и добавить новые стили.

Цвета

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

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

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

​Создания стиля заливки в Figma Татьяна Маслакова

После определения всех стилей они отобразятся в правой панели в Figma:

​Стили заливки и текста в Figma Татьяна Маслакова

Создаем плашку, изучаем стили эффектов

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

Это будет вспомогательный компонент для плашки, который мы будем в дальнейшем применять в других компонентах библиотеки.

Настройки внешний вид плашек. Создаем прямоугольник. Задаем ему белую заливку из нашей палитры стилей. Задаем необходимые скрепления, цвет обводки (из палитры стилей). Тень мы создадим чуть позже.

Выделяем прямоугольник и запаковываем в компонент. Не забудьте задать имя для компонента слева в панели слоев.

​Создание компонента в Figma Татьяна Маслакова

Внутри компонента выделяем прямоугольник и настраиваем Constraints как на картинке:

​Constraints в Figma Татьяна Маслакова

Выделяем наш компонент, в правой панели ищем вкладку Effects. Здесь можно добавить и настроить тень.

Тень в Figma​ Татьяна Маслакова​

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

​Добавляем новый стиль для теней в Figma Татьяна Маслакова

Стиль заливки в Figma​ ТатьЯна Маслакова​

Расширим функциональность компонента плашки:

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

Предварительно нарисуем эту иконку при помощи инструмента Pen не забываем к обводам применить ранее созданный для них стиль. Если у вас нет такого стиля — создайте его так же, как было описано ранее.

​Применение стиля цвета к иконке в Figma Татяна Маслакова

Выделяем все слои нашей иконки и запаковываем в компонент.

Зарезервируйте в вашей библиотеке, куда вы будете складывать все будущие иконки.

Дублируем компонент иконки. При этом создастся экземпляр компонента. При любом изменении основного компонента меняются все его экземпляры.

Созданный экземпляр перетаскиваем в компонент с нашей плашкой и настраиваем constraints: top и right.

​Constraints в Figma Татяна Маслакова

Нарисуем при помощи pen небольшой треугольник, поместим его внутрь компонента плашки, к нему также применится общая тень всего компонента (обратите внимание, ранее тень была применена к самому компоненту, а не к слою прямоугольника внутри него).

Настроим constrains там, где вам удобнее его разместить. У меня он будет сверху-слева, соответственно constrains настроим аналогично. У плашки может быть несколько скрытых слоев треугольников в зависимости от того, как вы хотите впоследствии применять этот компонент (например, для создания плашки диалога, удобно расположить треугольник сбоку).

Скрывая или показывая нужные слои, мы будем кастомизировать компонент под нужные ситуации.

Скрываем все треугольники и крестики (изначально они будут спрятаны, а появляться будут уже в проекте при настройках компонента).

​Вариации одного компонента в Figma при помощи скрытых слоев Татьяна Маслакова

Наводим порядок

Есть удобный способ именования стилей в Figma. Стили можно удобно сгруппировать в палитре, задавая им имена с использованием знака «/». Например headers/h2 и так далее:

Правильное ​именование стилей в Figma Татьяна Маслакова

Таким же образом именуются стили заливок, стили эффектов и даже сами компоненты.

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

Читайте продолжение здесь.

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

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами. Новые статьи о дизайн-системе также публикуются здесь.

Styles and Team Library — Система дизайна в Figma

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

Мэн То

Я разрабатываю, программирую и пишу

Мэн То является автором книги «Дизайн+код». Мэн начал свою карьеру в качестве дизайнера-самоучки из Монреаля и, в конце концов, путешествовал по миру в течение 2 лет, поскольку ему было отказано в американской визе. Во время своих путешествий он написал книгу, которую сейчас читают 35 000 человек.

33 курса — 153 часа

Создание красивых приложений с помощью GPT-4 и Midjourney

Дизайн и разработка приложений с использованием GPT-4 и Midjourney с подсказками для SwiftUI, React, CSS, концепций приложений, значков и копирайтинга

3 часа

Создание приложений SwiftUI для iOS 16

Создание анимированных и интерактивных приложений с использованием новых методов iOS 16 с использованием SwiftUI 4 и Xcode 16 3D анимация без написания ни строчки кода

3 часа

Создание 3D-сайта с помощью Spline и React

Разработка и кодирование целевой страницы с интерактивным 3D-ресурсом с использованием Spline и CodeSandbox

1 час

Создание анимированного приложения с помощью Rive и SwiftUI

Дизайн и программирование Приложение iOS с анимированными активами Rive, анимацией значков, пользовательскими макетами и взаимодействиями

3 часа

Создание приложения SwiftUI для iOS 15, часть 3

Разработка и кодирование приложения SwiftUI 3 с пользовательскими макетами, анимацией и жестами с использованием Xcode 13, SF Символы 3, Canvas, Concurrency, Searchable и многое другое

4 часа

Создание приложения SwiftUI для iOS 15, часть 2

Разработка и кодирование приложения SwiftUI 3 с пользовательскими макетами, анимацией и жестами с использованием Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable и многого другого

3 часа

Создание приложения SwiftUI для iOS 15

Разработка и кодирование приложения SwiftUI 3 с пользовательскими макетами, анимацией и жестами с использованием Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable и многого другого

4 часа

React Livestreams

Узнайте, как мы можем использовать React Hooks для создания веб-приложений с использованием библиотек, инструментов, API и фреймворков

4 часа

Design Founder Livestreams

Путешествие по тому, как мы создавали DesignCode, включая дизайн продукта, управление, аналитику, доход и хорошую дозу обучения на наших успехах и неудачах

2 часа

SwiftUI Advanced Handbook

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

4 часа

Справочник по дизайну для iOS

Полное руководство по проектированию для iOS 14 с видео, примерами и файлами дизайна

2 часа

Справочник по SwiftUI

Полный набор руководств по Xcode, Swift Пользовательский интерфейс и весь макет и методы разработки

6 часов

Создание веб-приложения с помощью React Hooks

Узнайте, как мы создали новый сайт Design+Code с помощью React Hooks, используя Gatsby, Netlify и передовые методы CSS с помощью Styled Components.

4 часа

Справочник по дизайну пользовательского интерфейса

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

2 часа

Справочник по Figma

Полное руководство по лучшим советам и рекомендациям по Figma

4 часа

SwiftUI для iOS 14

Создайте мультиплатформенное приложение с нуля, используя новые методы в iOS 14. Мы будем использовать боковую панель и отложенные сетки, чтобы сделать макет адаптивным для iOS, iPadOS, macOS Big Sur, и мы изучим новый эффект согласованной геометрии, чтобы создавать красивые переходы между экранами без сложности. Этот курс подходит для начинающих и преподается шаг за шагом в формате видео.

3 часа

Прямые трансляции SwiftUI

Это подборка прямых трансляций SwiftUI, организованных Мэн. Там он рассказывает и учит, как использовать системы дизайна, типографику, навигацию, дизайн iOS 14, прототипирование, анимацию и передачу разработчика.

19 часов

Прямые трансляции дизайна пользовательского интерфейса

Это подборка прямых трансляций пользовательского интерфейса, организованных Мэн. Там он рассказывает и учит, как использовать системы дизайна, типографику, навигацию, дизайн iOS 14, прототипирование, анимацию и передачу разработчика.

23 часа

Дизайн пользовательского интерфейса для разработчиков

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

3 часа

Создание приложения с помощью SwiftUI, часть 3

Этот курс предназначен для дизайнеров и разработчиков, увлеченных дизайном и созданием реальных приложений для iOS, iPadOS, macOS, tvOS и watchOS. SwiftUI работает на всех этих платформах. Хотя код не является универсальным, используемые элементы управления и методы могут применяться на всех платформах. Он удобен для начинающих, но также содержит множество дизайнерских приемов и классных рабочих процессов для создания лучших пользовательских интерфейсов и взаимодействий.

4 часа

Создание приложения с помощью SwiftUI, часть 2

Этот курс предназначен для дизайнеров и разработчиков, увлеченных дизайном и созданием реальных приложений для iOS, iPadOS, macOS, tvOS и watchOS. SwiftUI работает на всех этих платформах. Хотя код не является универсальным, используемые элементы управления и методы могут применяться на всех платформах. Он удобен для начинающих, но также содержит множество дизайнерских приемов и классных рабочих процессов для создания лучших пользовательских интерфейсов и взаимодействий.

4 часа

Создайте полноценный сайт в Webflow

Webflow — это инструмент проектирования, с помощью которого можно создавать готовые к использованию приложения без написания кода. Вы можете реализовать адаптивные макеты на основе CSS, создавать сложные взаимодействия и развертывать все в одном инструменте. Webflow также поставляется со встроенной системой управления контентом (CMS) и электронной коммерцией для создания опыта покупки без необходимости использования сторонних инструментов.

3 часа

Расширенное прототипирование в ProtoPie

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

3 часа

Создание приложения с помощью SwiftUI, часть 1

Этот курс предназначен для дизайнеров и разработчиков, увлеченных дизайном и созданием реальных приложений для iOS, iPadOS, macOS, tvOS и watchOS. SwiftUI работает на всех этих платформах. Хотя код не является универсальным, используемые элементы управления и методы могут применяться на всех платформах. Он удобен для начинающих, но также содержит множество дизайнерских приемов и классных рабочих процессов для создания лучших пользовательских интерфейсов и взаимодействий.

4 часа

React Native для дизайнеров, часть 2

React Native — это популярная платформа Javascript, которая строится на основе React с использованием собственных компонентов для создания реального мобильного приложения, неотличимого от приложения, созданного с помощью Xcode или Android Studio. Основное отличие от нативной разработки заключается в том, что вы можете использовать CSS, горячую перезагрузку, Javascript и другие знакомые методы, которые Интернет развил за последние десятилетия. Самое главное, вы создаете для iOS и Android, используя одну и ту же кодовую базу.

3 часа

React Native для дизайнеров

React Native — это популярная среда Javascript, которая строится на основе React с использованием собственных компонентов для создания реального мобильного приложения, неотличимого от приложения, созданного с помощью Xcode или Android Studio. Основное отличие от нативной разработки заключается в том, что вы можете использовать CSS, горячую перезагрузку, Javascript и другие знакомые методы, которые Интернет развил за последние десятилетия. Самое главное, вы создаете для iOS и Android, используя одну и ту же кодовую базу.

5 часов

Система проектирования в Figma

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

3 часа

React для дизайнеров

Узнайте, как создать современный сайт с помощью React и наиболее эффективных библиотек для размещения вашего сайта/продукта в Интернете. Ознакомьтесь с Grid CSS, анимацией, взаимодействиями, динамическими данными с помощью Contentful и разверните свой сайт с помощью Netlify.

3 часа

Swift Advanced

Изучение Swift — надежный и интуитивно понятный язык программирования, созданный Apple для создания приложений для iOS, Mac, Apple TV и Apple Watch

9 часов

Изучение Swift — надежный и интуитивно понятный язык программирования, созданный Apple для создания приложений для iOS, Mac, Apple TV и Apple Watch. 0003

5 часов

Изучение дизайна iOS 11

Изучение цветов, типографики и макета для iOS 8

1 час

Создание нового стиля Figma Color

Отредактируйте и удалите цветовой стиль в Figma.

Смотреть видеоруководство

Создание цветового стиля

Чтобы создать новый цветовой стиль, начнем с создания новой фигуры и перейдем к разделу «Заливка » и изменим цвет фигуры на голубой.

• Затем нажмите значок с четырьмя точками в разделе Заливка , чтобы вызвать модальное окно стилей цвета.

• Нажмите значок + в правом углу модального окна Цветовые стили .

• Давайте дадим нашему стилю имя Color Style 1, затем нажмите кнопку Create style .

Вы можете создать столько стилей, сколько захотите.

Применение цветового стиля к слою

Чтобы применить цветовой стиль к фрейму или слою формы, выберите свой слой и перейдите к разделу Заливка на правой боковой панели.

• Нажмите значок с четырьмя точками в правом углу раздела «Заливка», чтобы вызвать модальное окно стилей, затем выберите Цветовые стили 1 , чтобы применить стиль к фрейму.

Доступ к цветовым стилям вашего файла

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

Редактировать

a Цветовой стиль

Чтобы отредактировать цветовой стиль, нажмите на серый фон файла, чтобы отобразить ваши стили. Щелкните правой кнопкой мыши цветовой стиль и выберите Редактировать стиль в контекстном меню.

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

Удалить

Цветовой стиль

Чтобы удалить цветовой стиль из файла Figma, щелкните серый фон файла, чтобы отобразить ваши стили. Щелкните правой кнопкой мыши на цветовом стиле и выберите Удалить стиль в контекстном меню.

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

Не стесняйтесь посетить наш веб-сайт Captain-Design.com , где мы щедро делимся готовыми к коммерческому использованию шаблонами Figma и HTML .

Вы найдете три вещи, которые помогут вам начать разработку вашего следующего проекта:

• Более 200 бесплатных шаблонов Figma.
• Бесплатные шаблоны Html + Bootstrap 5.
• Удивительные плагины Figma и наборы пользовательского интерфейса.

• Руководство по разработке слайдеров и каруселей для вашей дизайн-системы

  18 января 2023 г. –
  2 минуты чтения

• Руководство по разработке UI-карт для вашей дизайн-системы

  17 января 2023 г. –
  3 минуты чтения

• Руководство по навигации по дизайну для вашей дизайн-системы

  16 января 2023 г. –
  3 минуты чтения

В этом коротком посте мы увидим, как создавать, применять, редактировать и удалять текстовый стиль в Figma. Смотреть видеоруководство Создание стиля текстаЧтобы создать новый стиль текста,

• Рауф Белахдар

Рауф Белахдар
7 января 2022 г. • Чтение через 3 мин.

В этом кратком посте мы расскажем, как создать адаптивный макет с помощью функции изменения размера в Figma.