Figma: обзор программы для веб-дизайна

Команды

Снизу слева располагаются команды. Здесь вы можете создавать новые проекты (это своего рода папки) а также редактировать ваши файлы совместно с другими людьми. В бесплатной версии программы можно работать вдвоем. Даже если вы работаете в одиночку, то создание новых команд поможет вам структурировать ваши файлы из вкладки «Drafts» и избавиться от хаоса.

Для примера создам новую команду и перемещу туда файл. Чтобы создать новую команду нажмите на надпись «Create new team».

Дайте название вашей команде. Для примера назову команду «Полезные файлы».

Если у вас бесплатный тариф, то вам предложат выбрать тариф. Можно выбрать бесплатный или платный.

После того как команда создана она будет отображаться слева снизу в интерфейсе Figma. Справа отображаются члены вашей команды. Чтобы пригласить нового человека нажмите на надпись «Invite members» или на плюсик напротив надписи «1. Editor left»

Чтобы добавить новый проект (папку) в вашу команду, нажмите на плюсик напротив надписи «2. Editor left».

Создам новую папку (project) и назову её «Иконки»

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

Вы можете перемещать туда файлы из других команд и проектов, а также из вкладке «Drafts».

Размещая файлы таким образом вы сможете структурировать хаос.

Uber

The on-demand ridesharing service boasts a design team spread across 4 different cities, working on a diverse array of products from Uber Eats to Uber Freight. Its new VP of Design wanted an easy way to browse these projects, so they’re creating internal tools for visibility with our web-based technology.

“Figma’s API has helped bring ideas we have dreamt about for ages to life,” said Erik Klimczak, Senior Design Manager for Uber’s Advanced Technology Group.

Uber is planning to broadcast in-progress designs on TVs around the office, surface them through a Dribbble-like website repository and load designs on a Chrome browser extension for employees. Designers will have the autonomy of deciding when to share — the API won’t pick up their work until they drag it into a particular frame in Figma.

Other companies have made similar products to facilitate the sharing of design work, but this is the first time we’ve seen anyone create a real-time feed based on an online source of truth instead of a messy export flow. We found the magnitude of Uber’s effort inspiring, and we hope to see more teams explore similar concepts.

PERSONAL INFORMATION WE COLLECT

What personal information we collect depends on how you interact with our Services.

Information You Provide to Us

Candidate Data.  We may post job openings and opportunities on the Services. If you reply to one of these postings, we will collect and process the information you provide to us to assess your suitability, aptitude, skills, and qualifications for employment.

Use of the Services.  We collect information you provide to the Services for the purpose of providing the Services to you, which may include personal information.

Customer Service, Training and Quality Assurance. If you call or otherwise interact with Figma’s sales, customer service or support personnel, we may collect the information you provide to our representatives. In addition, we may record telephone calls or video conferences between you and our representatives for training or quality assurance purposes.

Student Account. If you qualify for Educational Use, we may also collect information relating to your school and curriculum, such as your school name, school mailing address, school website and proof of registration. Note that, in accordance with our Terms of Service, Figma Education is only for users 13 and over.

Sweepstakes, Contests, Surveys and Events. We may run sweepstakes or contests, ask you to complete surveys, and host or attend events. In each case, you may provide information to us, or we may receive information about you. In such situations, we shall use the information for the purposes for which it was collected.

Information Collected Automatically

Automatic Data Collection. We may collect certain information automatically when you use the Services. This information may include your Internet protocol (IP) address, user settings, MAC address, cookie identifiers, mobile advertising and other unique identifiers, details about your browser, operating system or device, location information (inferred based off of your IP address), Internet service provider, pages that you visit before, during and after using the Services, information about the links you click, and information about how you interact with and use the Services.

We may use a visitor’s IP address to fight spam, malware and identity theft. With your permission, we may also collect information about your operating system’s installed fonts in connection with providing the Services to you. Combined with other system information, this information could be used to give your computer a unique fingerprint/signature and enable us to track your usage of our Services after you log out.

Cookies, Pixel Tags/Web Beacons, and Analytics Information. We, as well as third parties that may provide content, advertising, or other functionality on the Services, may use cookies, pixel tags, local storage, and other technologies (“Technologies”) to automatically collect information through the Services. Technologies are essentially small data files placed on your device that allow us and our partners to record certain pieces of information whenever you visit or interact with our Services.

• Cookies. Cookies are small text files placed in device browsers to store their preferences. Most browsers allow you to block and delete cookies. However, if you do that, the Services may not work properly.
• Pixel Tags/Web Beacons. A pixel tag (also known as a web beacon) is a piece of code embedded in the Services that collects information about engagement on the Services. The use of a pixel tag allows us to record, for example, that a user has visited a particular web page or clicked on a particular advertisement. We may also include web beacons in e-mails to understand whether messages have been opened, acted on, or forwarded.

Analytics. We may also use Google Analytics and other service providers to collect and process analytics information on our Services. For more information about how Google uses data, please visit www.google.com/policies/privacy/partners/. You can opt out of Google Analytics’ collection and processing of data generated by your use of our website by going to http://tools.google.com/dlpage/gaoptout.

Information from Other Sources

Figma Customers. If you use our Services on behalf of an organization (e.g., your employer), that organization may provide us with information about you so that we can provision your account.

Third Party Services and Organizations. We may obtain information about you from other sources, including from third party services and organizations. For example, if you access our Services through a third-party service, we may collect information about you from that third-party service that you have made available via your privacy settings.

Официальное сообщество Figma в России

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

Кому будет полезно:

• Молодым специалистам которые только начинают свою карьеру в дизайне;
• Разработчикам, которые хотят разговаривать на ТЫ с дизайнерами, или хотят упростить процесс коммуникации;
• Разработчикам которым интересно разрабатывать плагины для Фигмы;
• Владельцам продукта — которые хотят понимать дизайнеров в проекции интерфейсов и дизайна;Ссылки на социальные сети:https://t.me/fof_moscowhttps://www.instagram.com/fofmoscow

Moscow | Figma
Friends of Figma

Figma logo

HOW WE USE YOUR INFORMATION

We use your personal information for a variety of business purposes, including:

To Provide the Services or Information Requested, such as:

• Managing your information and account;
• Responding to questions, comments, and other requests;
• Processing payment card and/or other financial information to facilitate your use of the Services;
• Providing access to certain areas, functionalities, and features of our Services; and
• Answering requests for customer or technical support.

Administrative Purposes, such as:

• Pursuing legitimate interests, such as direct marketing, research and development (including marketing research), network and information security, and fraud prevention;
• Measuring interest and engagement in our Services;
• Developing new products and services or improving the Services;
• Ensuring internal quality control and safety;
• Protecting against malicious, deceptive, fraudulent or illegal activity, and prosecuting those responsible for that activity;
• Recruiting and hiring, including considering your candidacy for employment;
• Communicating with you about your account, activities on our Services and Privacy Policy changes;
• Short-term, transient use, such as contextual customization of ads;
• Enforcing our agreements; and
• Complying with our legal obligations.

Marketing Our Products and Services. We may use personal information to tailor and provide you with content and advertisements. We may provide you with these materials as permitted by applicable law

If you have any questions about our marketing practices or if you would like to opt out of the use of your personal information for marketing purposes, you may contact us as set forth below.

Consent. We may use personal information for other purposes that are clearly disclosed to you at the time you provide personal information or with your consent.

De-identified and Aggregated Information Use. We may use personal information and other data about you to create de-identified and/or aggregated information, such as de-identified demographic information, de-identified location information, information about the device from which you access our Services. De-identified and/or aggregated information is not personal information, and we may use and disclose such information in a number of ways, including research, industry analysis, analytics, and any other legally permissible purposes.

How We Use Automatic Collection Technologies. We, as well as third parties that may provide content, advertising, or other functionality on the Services, may use cookies, pixel tags, local storage, and other technologies to automatically collect information through the Services. Our uses of these Technologies fall into the following general categories:

• Operationally Necessary. This includes Technologies that allow you access to our Services, applications, and tools that are required to identify irregular site behavior, prevent fraudulent activity and improve security or that allow you to make use of our functionality;
• Performance Related. We may use Technologies to assess the performance of our Services, including as part of our analytic practices to help us understand how our visitors use the Services;
• Functionality Related. We may use Technologies that allow us to offer you enhanced functionality when accessing or using our Services. This may include identifying you when you sign into our Services or keeping track of your specified preferences, interests, or past items viewed;
• Advertising or Targeting Related. We may use first party or third-party Technologies to deliver content, including ads relevant to your interests, on our Services or on third party sites.

Please note that this Privacy Policy covers only our use of Technologies and does not govern the use of Technologies by any third parties.

Cross-Device Tracking. Your browsing activity may be tracked across different websites and different devices or apps. For example, we may attempt to match your browsing activity on your mobile device with your browsing activity on your laptop. To do this our technology partners may share data, such as your browsing patterns, geo-location and device identifiers, and we may match the information of the browser and devices that appear to be used by the same person.

A new world of integrations

In addition to helping companies like Uber and Github customize their own workflows, our API will make it easier for third parties to build — and maintain — public Figma integrations. Zeplin just issued an overhaul of their integration with our new API, and three other products have introduced Figma functionality for the first time:

1. Haiku — a tool for creating interactive, cross-platform UI components (available today)
2. Pagedraw — a production ready React UI code generator (available today)
3. Avocode — developer handoff tool (coming soon)

Integrations like these are more important than ever before for design. We live in a world with myriad workflows, where every team has different processes for getting things done. At Figma, it seems obvious to us that no single company is going to solve every problem, so tools need to work well together. By partnering with services like Haiku, Pagedraw, Avocode and Zeplin, we can unlock new use cases for our community and unblocks teams with other needs.

“Figma has long been one of our favorite design tools,” Zack Brown, the CEO of Haiku, said. “With this integration, we’re coupling the strength of Figma’s design collaboration platform with Haiku’s app production power.”

Основные инструменты Фигмы

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

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

1. Изображения. Их можно вставлять через специальную вкладку или просто перетаскивая с рабочего стола в нужное окно. В Фигме можно регуляровать насыщенность цвета, контраст и яркость отдельных фрагментов картинки. Также существует возможность применять векторные объекты, смешивать слои и использовать разнообразные эффекты.
2. Текст. Пользователям открывается доступ к библиотеке Google Fonts, куда при необходимости можно загружать дополнительные шрифты. Для этого нужно установить Font Installers или скачать десктопную версию программы.
3. Векторные формы можно отрисовывать с помощью инструмента Shape Tool. К его главным объектам относят звезду, треугольник, прямоугольник, линию, круг и стрелку. Фигуры можно увеличивать и сжимать, зажимая кнопку Alt.
4. Модульная сетка применяется для упорядочивания всех объектов дизайна во фрейме. Для осуществления настройки нужно зайти в раздел «Layout Grid».
5. Маски и эффекты позволяют выбирать цвет, варьировать его прозрачность и градиент. Чтобы сочетать несколько фигур между собой, можно объединить их градиентом. Для этого нужно использовать режим Layer.
6. Компоненты. Этот инструмент помогает сэкономить время при проектировании макетов. Он позволяет применить необходимые изменения не к одному элементу, а к целой группе. Чтобы группа объектов считалась одним компонентом, нужно нажать на кнопку «Create Component». Вместе с компонентами веб-дизайнеры могут создавать и стили. Они представляют собой целую коллекцию из эффектов, текста и цветовой палитры. Для создания дизайн-библиотеки, можно сохранить шаблон стилей и компонентов, чтобы с легкостью использовать его в дальнейшем.

Полезные приёмы

Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:

1. Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
2. В окне с кодом на панели сверху нажмите на иконку  и выберите нужную иконку на сайте.
3. В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.
4. Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.

Как установить плагин Remove BG:

1. Зайдите на страницу плагина и установите его, нажав Install.
2. Зарегистрируйтесь на сайте remove.bg.
3. На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
4. Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
5. Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.

Больше о Figma

• Как упростить работу в Figma
• Выравнивание в Figma: Auto Layout
• Что такое Figma Overlays и как его использовать при создании интерфейса

Как работать в Figma быстрее и продуктивнее

Супер полезные секреты, советы и лайфхаки от Бюро Горбунова.Быстро работать в Фигме позволяет в первую очередь грамотное использование компонентов и построение макетов

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

Это просто подсказки, которые помогут новичкам осваивать Фигму.

Как работать в Фигме быстрее
Как работать в Фигме быстрее

Бюро ГорбуноваСобрала Юля Кириллова · Типографика 3764

Как работать в Фигме быстрее. Часть 2
​

Бюро ГорбуноваСобрал Константин Мозговой · Интерфейс 2340

Как быстро выделять, перемещать, изменять размеры объектов в Фигме и работать с панелью слоёв. Сегодня рассмотрим, как ускорить работу с объектами и интерфейсом программы.
Как работать в Фигме быстрее. Часть 3
В прошлый раз мы рассмотрели, как ускорить работу с объектами и интерфейсом программы. Сегодня — заключительная часть совета про горячие клавиши и трюки, которые помогают работать в Фигме быстрее. Можно создать несколько компонентов одновременно. Для этого выберите объекты, которые хотите превратить…

Бюро ГорбуноваСобрал Роберт Блинов · Интерфейс 4067

Заключительная часть совета про горячие клавиши и трюки, которые помогают работать в Фигме быстрее.

Видеокурс по Figma

Бесплатный подробный видеокурс Figma online из 15 уроков от «Наука дизайна».

Обзор интерфейса

Вводный курс Figma. Изучение интерфейса приложения.

Figma бесплатный видеокурс: интерфейс

Интеграция и экспорт

Figma быстрый старт

Евгений Кузьмин (CEO & Art-director студии UPROCK, топ-26 в рейтинге  веб-дизайнеров по версии Tagline) делится своим опытом в вебинаре, рисует крутой дизайн, и разбирает типичные ошибки дизайнеров

Figma обучение быстрый сайт

Как создать стильный сайт в Figma

General

fileKey: string | undefined

The file key of the current file this plugin is running on. Only private plugins have access to this.
To enable this behavior, you need to specify in your .

command: string | undefined

The currently executing command from the file. It is the command string in the (more details in the manifest guide). If the plugin does not have any menu item, this property is undefined.

showUI(html: string, options?: ShowUIOptions): void

Enables you to render UI to interact with the user, or simply to access browser APIs. This function creates a modal dialog with an containing the HTML markup in the argument.

This property contains methods used to modify and communicate with the UI created via .

Read more in the UI section.

This property contains methods used to read, set, and modify the built in FigJam timer.

Read more in the timer section.

viewport: ViewportAPI

This property contains methods used to read and set the viewport, the user-visible area of the current page.

Read more in the viewport section.

clientStorage: ClientStorageAPI

This property contains methods to store persistent data on the user’s local machine.

Read more in the client storage section.

closePlugin(message?: string): void

Closes the plugin. You should always call this function once your plugin is done running. When called, any UI that’s open will be closed and any or timers will be cancelled.

on(type: «selectionchange» | «currentpagechange» | «close» | «run» | «timerstart» | «timerpause» | «timerstop» | «timerdone» | «timerresume» | «timeradjust», callback: (event?: RunEvent) => void): void

Registers an callback that will be called when an event happens in the editor. Current supported events are:

• The selection on the current page changed.
• The current page changed.
• The plugin closed.
• The plugin has started running.
• The timer has started running.
• The timer has paused.
• The timer has stopped.
• The timer is done.
• The timer has resumed.

once(type: «selectionchange» | «currentpagechange» | «close» | «run» | «timerstart» | «timerpause» | «timerstop» | «timerdone» | «timerresume» | «timeradjust», callback: (event?: RunEvent) => void): void

off(type: «selectionchange» | «currentpagechange» | «close» | «run» | «timerstart» | «timerpause» | «timerstop» | «timerdone» | «timerresume» | «timeradjust», callback: (event?: RunEvent) => void): void

YOUR CHOICES

General. You may have the right to opt out of certain uses of your personal information.

Mobile Devices. We may send you push notifications through our mobile application. You may at any time opt out from receiving these types of communications by changing the settings on your mobile device.

Cookies and Interest-Based Advertising. You may stop or restrict the placement of Technologies on your device or remove them by adjusting your preferences as your browser or device permits. Please note that cookie-based opt-outs are not effective on mobile applications. However, you may opt out of personalized advertisements on some mobile applications by following the instructions for Android and iOS.

The online advertising industry also provides websites from which you may opt out of receiving targeted ads from data partners and other advertising partners that participate in self-regulatory programs. You can access these websites and learn more about targeted advertising and consumer choice and privacy, at www.networkadvertising.org/managing/opt_out.asp, http://www.youronlinechoices.eu/, https://youradchoices.ca/choices/, and www.aboutads.info/choices/.

Please note you must separately opt out in each browser and on each device.

“Do Not Track”. Do Not Track (“DNT”) is a privacy preference that users can set in certain web browsers. Please note that we do not respond to DNT signals or similar mechanisms transmitted by web browsers.

Скачивание и установка Figma для работы на компьютере (Windows и Mac Os)

Чтобы скачать десктопную версию приложения Figma для Windows или Mac Os нажмите на меню «гамбургер» в левом верхнем углу и выберите надпись «Get Desctop App». В приложении работать удобнее, хотя можно работать через браузер. Приложение удобнее тем, что там можно создавать сразу несколько файлов. В браузере дела обстоят иначе.

Второй способ скачать программу figma на ваш компьютер — это перейти по адресу https://www.figma.com/downloads/ Там можно выбрать приложение для macOs либо для Windows.

После скачивания архива, его распаковки и открытия программы figma на вашем компьютере перед вами появиться надпись «Welcome to Figma». Вам предложат авторизоваться через браузер. Для этого вы должны быть авторизованы в вашем аккаунте. Нажмите на кнопку «Log in with browser».

Вас перенаправит в браузер. Там нажмите на кнопку «Open the Decktop App».

Поздравляю! Вы скачали программу Figma и установили её на ваш компьютер. Так будет выглядеть интерфейс программы после её установки. В следующем уроке мы кратко рассмотрим интерфейс этого приложения.

Остальные уроки по работе в Figma можете посмотреть по этой ссылке

Похожие записи:

Обязанности руководителя отдела продаж Илья варламов Как развить свою память Как сделать простое техническое задание и не потерять деньги и нервы Как сделать гугл форму: для регистрации, анкеты или опроса Как произвести разовую сдачу отчетности через интернет?