Figma импорты
Орналасуды автоматты түрде қалай импорттауға болады
Фигмадан нөлдік блокқа дейін
Figma to Tilda плагинін пайдаланып, сіз Figma-дан толық макеттер мен қабаттарды бір рет басу арқылы тікелей Zero Block-қа ауыстыра аласыз. Біз плагинді қалай пайдалану керектігі туралы егжей-тегжейлі нұсқаулар бердік.
Страница плагина Figma to Tilda в Figma Community и синяя кнопка «Open in Figma» слева.
Go
Go
Go
Нұсқауларға өту
Figma-ға Tilda плагинін қосу
Figma тіркелгіңізде төменгі құралдар тақтасындағы Әрекеттер түймесін басып, Плагиндер мен виджеттер тармағын таңдаңыз. Figma to Tilda плагинін іздеп, оны басыңыз немесе сілтемені пайдаланып плагинді қосыңыз .
В Figma: иконка «Plugins & widgets» на нижней панели инструментов, поисковая строка «Search» и плагин «Figma to Tilda».
Плагинді іске қосу үшін «Іске қосу» түймесін басыңыз.
В интерфейсе Figma: кнопка «Run» в правом нижнем углу карточки плагина «Figma to Tilda».
Дайын! Енді сіз қабаттар мен элементтерді Tilda-ға ауыстыра аласыз.
В интерфейсе Figma: окно плагина «Figma to Tilda» с неактивной кнопкой «Select layers to import». В рабочей области расположен макет блока TE1000.
Tilda-ға көшіру үшін Figma орналасуына ұсыныстар

  • Дұрыс тасымалдау үшін кадр өлшемі 1200 пиксель болуы керек.
  • Үлкен кадрды бірнеше бөлек кадрға бөліңіз.
  • Түймені дұрыс жылжыту үшін элементтер тобының атауын беріңіз.
Маңызды: Сіз кірістірілген топтардың 6 деңгейінен артық ауыстыра алмайсыз (егер көбірек кірістірілген деңгейлер болса, олар ауыстырылмайды).
Қабаттарды Figma-дан Zero Block-қа ауыстыру
Плагинді қосқаннан кейін, орналасудан қажетті қабатты таңдаңыз. Таңдалған қабат плагин терезесінде Таңдалған қабаттар өрісінде көрсетіледі.
В интерфейсе Figma: выбранный фрейм TE1000 на холсте и в панели «Layers», а также строка «Selected layers: TE1000» в окне плагина «Figma to Tilda».
Ескерту: Көшіру кезінде бір немесе бірнеше қабатты таңдауға болады. Бұл бүкіл негізгі жақтау немесе сурет, түйме немесе мәтін сияқты белгілі бір элемент болуы мүмкін.
Плагин терезесінде қабаттарды тасымалдауға дайындау үшін Көшіруге дайындау түймесін басыңыз.
В плагине Figma to Tilda: кнопка «Prepare to copy» во всплывающем окне плагина.
Кадр тасымалдауға дайын болғанда, «Алмасу буферіне көшіру» түймесін басыңыз.
В интерфейсе Figma в окне плагина «Figma to Tilda»: кнопка «Copy to clipboard».
Tilda → Zero Block тармағына өтіп, пернетақта тіркесімін басыңыз: Windows жүйесінде Ctrl+V немесе Mac жүйесінде Command+V.
Редактор Zero Block: результат импорта макета из Figma со сверстанными текстовыми и графическими элементами.
Нөлдік блокта қабаттарды импорттау ерекшеліктері
Сіз жақтауды импорттай аласыз бөлек топ ретінде немесе көркем тақтаға параметрлерді қолдану және барлық ағымдағы элементтерді ауыстыру арқылы.

Егер көркемсурет тақтасында элементтер болса, онда Рамканы топ ретінде де енгізуге болады, бірақ бұл жағдайда барлық элементтер көркемсурет тақтасынан жойылады.

«Параметрлерді көркем тақтаға қолдану» таңдалған кезде, Frame түбірлік қабатының параметрлері Zero Block-қа қолданылады: фон түсі немесе фон суреті, Auto Layout және Tilda қолдайтын басқа параметрлер өзгереді.
Zero Block: пункт «Добавить как новую группу» в окне «Как вы хотите импортировать фрейм из Figma?».
Бірнеше кадрды кірістірген кезде, импорттау опциялары бар қалқымалы терезе көрсетілмейді.
Элементтерді көркем тақтаға бөлек қабаттар ретінде немесе топ ішінде қоюға болады. Бірнеше элементті импорттаған кезде, олар арақашықтықтарын сақтайды.

Мысалы, егер Figma-дағы түйме мен мәтін арасындағы қашықтық 40 пиксель болса, олар бір-біріне қатысты бірдей шегініспен және позициямен Tilda-ға ауыстырылады.
В редакторе Zero Block: импортированная кнопка в рабочей области и кнопка «Импорт из Figma...» на панели инструментов снизу.
Бар топқа бір элементті кірістіріңіз.
API арқылы Figma-дан қабаттарды импорттау
Go
Go
Go
API Access жетонын алу
Негізгі Figma бетіне өтіп, профиль фотосуретіңіздің астындағы Профильді қарау → Параметрлер түймесін басыңыз.
В интерфейсе Figma: пункт "Settings" в выпадающем меню профиля в левом верхнем углу.
Содан кейін «Қауіпсіздік» қойындысына өтіп, «Жеке қол жеткізу белгілері» блогына өтіп, «Жаңа таңбалауыш жасау» түймесін басыңыз.
В настройках аккаунта Figma: вкладка «Security» и ссылка «Generate new token» в блоке «Personal access tokens».
Жаңа терезеде Tilda токенінің атауын енгізіп, оның жарамдылық мерзімін таңдаңыз. Мысалы, 1 күн, 7 күн, 30 күн немесе 90 күн.

«Ауқымдар» аймағында «Ағымдағы пайдаланушы», «Әзірлеуші ​​ресурстары», «Файл мазмұны», «Файл нұсқалары», «Кітапхана активтері», «Кітапхана мазмұны» және «Жобалар» жанындағы құсбелгілерді қойыңыз. Енді «Токен жасау» түймесін басыңыз.
В интерфейсе Figma в окне «Generate new token»: поле «Token name», выбор срока в «Expiration», параметры доступа в разделе «Scopes» и кнопка «Generate token».
Тілдадағы импорттау параметрлерінде көрсету үшін осы кілтті жасағаннан кейін көшіріңіз. Сіз кілтті қайта көре алмайсыз, тек жаңасын жасай аласыз.
В настройках Figma во вкладке «Security»: поле с созданным токеном в блоке «Personal access tokens».
Орналасуды Нөлдік блокқа импорттау
Нөлдік блок ішіндегі үш нүктелі мәзірді басып, Импорттау түймешігін басыңыз.
В редакторе Zero Block: кнопка «Импорт из Figma» в выпадающем меню с тремя точками в правом верхнем углу.
Фигмаға өтіңіз. Орналасуды ашып, қажетті жақтауды таңдап, мекенжай жолағындағы Жақтауға сілтемені көшіріңіз.
В интерфейсе Figma: пункт "Copy link to selection" в подменю "Copy/Paste as" контекстного меню фрейма.
Импорттың дұрыс орындалуы үшін Бір Frame-ді Figma-дан бір Нөлдік блокқа қосу керек
Ашылып жатқан терезеге Figma параметрлерінде алынған Frame және API жетонына сілтеме қосыңыз.
Окно «Импорт макета Figma» в Zero Block: поля «URL МАКЕТА» и «API ТОКЕН».
Орналасудың импортталуын күтіңіз.
Всплывающее окно «Импорт макета Figma» в Zero Block с процессом загрузки макета.
Егер дұрыс сілтемені қоссаңыз және Figma API жағында қателер болмаса, онда орналасу Нөлдік блокқа импортталады.
Редактор Zero Block: выделенная группа с изображением на рабочей области и панель «НАСТРОЙКИ ГРУППЫ» справа с кнопкой «Загрузить файл».
Әдепкі бойынша суреттер Figma серверлерінен кері жүктелгенін ескеріңіз, сондықтан оларды Tilda-ға кері жүктеу үшін суреттері бар элементтер параметрлеріне өтіп, Кері жүктеу түймешігін басыңыз.
Редактор Zero Block: кнопка «Загрузить в Tilda» в блоке настроек «Фоновое изображение» на панели справа.
Орналасу талаптары және импорттау мүмкіндіктері
Орналасуы
Макет ені 1200 px рамада жасалуы тиіс.

Бүкіл орналасуды бір блокқа қосудан гөрі, орналасуды блоктарда импорттаған дұрыс.
Элементтер топтары
Кез келген топты кескін ретінде импорттауға болады, ол үшін атаудағы кескінді көрсету қажет. Егер svg деп көрсетсеңіз, онда svg пішімі болады.

Топтар импорты бар, егер ішінде басқа топтар болса, онда барлық элементтер бірінші деңгейлі топта болады
Түймелер мен кескіндер
Түймені импорттау үшін кескін мен мәтінді топқа біріктіріп, атауға түймені қосу керек, мәтінді туралау ескеріледі, сондықтан мәтінді кескін ретінде кең етіп жасаған дұрыс.

Егер Нөлде ойнай алмайтын кескінге әсері болса, онда ол фонда әсер кескінімен импортталады.
Made on
Tilda