figma刚刚启动了许多新功能，包括变量，更好的原型制作和所有新的开发模式，可以帮助设计师更快地将其工作转换为代码。
我们一直希望为我们的ghost.io博客创建可重复使用的营销片段，并决定最终使用Figma Dev Mode。
在本文中，我将介绍如何在无花果上创建摘要设计，将其翻译成HTML和CSS，并将其实施到我们的ghost.io博客中。
让我们跳入它！
设置设计
对于第一次迭代，我的目标是设计一个适合代码CI的简单营销组件，并且可以在任何博客文章中实施。
我开始在无花果上创建设计。这非常直截了当。为了确保设计将是响应迅速的，我为所有框架元素使用了FIGMAS自动布局，这些元素将在HTML中实现设计时会变成DIV。我还确保使用尽可能少的height和width属性，根据他们可用的空间使元素缩放。
i然后创建了第二帧并改编了移动屏幕的设计，本质上仅将主容器的自动布局方向从水平变为垂直。
在HTML中实施设计
要将设计实现到HTML中，我终于能够使用新的开发模式，该模式显示了每个元素的CSS属性。这使得只复制和粘贴值，简化了布局和造型HTML元素的过程。
不幸的是，开发模式尚未导出HTML结构，因此Wou将不得不自己编写，并利用Figma提供的值来创建您的样式表。
从我的角度来看，新的开发模式非常适合使您的设计脱离地面并接近所需的输出。但是，最终确定组件将需要您自己编写一些CSS和HTML。
这意味着您绝对应该知道围绕HTML和CSS完成设计的方法！
尽管如此，利用Figma提供的属性值，设置元素就非常快。您可以看一下here。
这是我最终得到的代码：
<style>
@import "https://rsms.me/inter/inter.css";
:root {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
:root {
font-family: 'Inter var', sans-serif;
}
}
.info__container{display:flex;padding:40px;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:19px;border:2px solid rgba(129,75,246,.4);background:linear-gradient(0deg,rgba(43,27,78,.4) 0%,rgba(43,27,78,.6) 100%),#080809}.content__wrap{display:flex;align-items:center;max-width:900px;flex-direction:row;gap:16px;justify-content:space-between}.blur-effect{width:728px;height:311px;position:absolute;left:-25px;bottom:-71px;fill:linear-gradient(140deg,rgba(175,44,187,.45) 0%,rgba(0,26,255,.45) 100%);opacity:.4000000059604645;filter:blur(52px)}.left __container{display:flex;position:relative;z-index:999;flex-basis:37%;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;align-self:stretch}.text__ container{display:flex;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch}.text __heading{display:flex;flex-direction:column;align-self:stretch;margin:0;color:#FFF;font-family:Inter;font-size:32px;font-style:normal;font-weight:700;line-height:96.023%}.text__ desc{display:flex;flex-direction:column;align-self:stretch;margin:0;color:#CCC;font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.btn{display:flex;padding:10px 40px;justify-content:center;align-items:center;gap:10px;border-radius:3px;background:#814BF6;color:#FFF!important;font-family:Inter;font-size:16px;font-style:normal;line-height:normal;text-decoration:none!important}.btn:hover{background-color:rgba(129,75,246,.75)}.right __container{display:flex;position:relative;z-index:999;flex-basis:63%;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:32px;align-self:stretch}.usp__ container{display:flex;align-items:center;justify-content:start;gap:26px;align-self:stretch}.usp __icon{display:flex;padding:8px;justify-content:center;align-items:center;border-radius:5px;border:1px solid #814BF6}.usp__ text span{color:#FFF;font-family:Inter;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.usp __text p{color:#CCC;font-family:Inter;font-size:16px;font-style:normal;margin:0}.usp__ svg{width:24px}.text__container p{padding:0 0 0 0!important;margin:0 0 0 0!important}@media screen and (max-width:600px){.content__wrap{flex-direction:column;gap:40px}}@media screen and (min-width:950px){.left__container{flex-basis:33%}}
</style>
<div class="info__container">
<svg xmlns="http://www.w3.org/2000/svg" class="blur-effect" viewBox="0 0 693 218" fill="none">
<path d="M-1.45455 174.421L-19.2727 12.2249L-25 -22L15.7273 -18.0319H131.545L211.727 6.27273L243.545 53.3939L368.273 62.8182L522.273 68.2743L703 150.612L624.727 289L216.818 140.196L-1.45455 174.421Z" fill="url(#paint0_linear_38_57)" fill-opacity="0.45"/>
<defs>
<filter id="filter0_f_38_57" x="-129" y="-126" width="936" height="519" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="52" result="effect1_foregroundBlur_38_57"/>
</filter>
<linearGradient id="paint0_linear_38_57" x1="103.545" y1="-9.59964" x2="469.427" y2="296.954" gradientUnits="userSpaceOnUse">
<stop stop-color="#AF2CBB"/>
<stop offset="1" stop-color="#001AFF"/>
</linearGradient>
</defs>
</svg>
<div class="content__wrap">
<div class="left__container">
<div class="text__container">
<p class="text__heading">Zero config cloud made for developers</p>
<p class="text__desc">From GitHub to deployment in under 5 seconds.</p>
</div>
<a class="btn" href="https://example.com" class="https://signup.codesphere.com/?utm_source=blogSnippet&utm_campaign=blog">Sign Up!</a>
</div>
<div class="right__container">
<div class="usp__container">
<div class="usp__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="usp__svg" viewBox="0 0 15 16" fill="none">
<path d="M4.03783 10.516C3.92061 10.3988 3.88276 10.2361 3.93283 10.0851C4.01973 9.8273 4.13563 9.49121 4.2747 9.10588L4.51642 8.43614H3.8044H0.704948C0.631302 8.43614 0.562855 8.3965 0.526438 8.33298C0.490608 8.27049 0.491168 8.19366 0.5283 8.13122L0.528559 8.13078L2.06649 5.53833C2.06652 5.53829 2.06654 5.53825 2.06656 5.53821C2.35762 5.048 2.88288 4.749 3.44992 4.749H5.86093H6.14402L6.28967 4.50625C6.354 4.39905 6.41919 4.29839 6.4868 4.19694C8.72808 0.89276 12.0526 0.771759 14.0874 1.14629L14.0888 1.14655C14.22 1.17031 14.3272 1.27405 14.3543 1.41447C14.7286 3.45236 14.604 6.77378 11.3016 9.01454L11.2995 9.01592C11.2076 9.07896 11.1053 9.14372 10.994 9.21046L10.7513 9.35611V9.63921V12.0502C10.7513 12.6183 10.4514 13.1452 9.96338 13.4327L9.96205 13.4335L7.36941 14.9714L7.36898 14.9717C7.30652 15.0088 7.22968 15.0094 7.16718 14.9736C7.10265 14.9366 7.06402 14.8705 7.06402 14.7951V11.6547V10.9516L6.39989 11.1824C5.99229 11.324 5.63625 11.4398 5.36493 11.5274C5.23272 11.5698 5.0836 11.5417 4.96858 11.4468L4.94306 11.4212L4.03783 10.516ZM11.2513 5.92078C11.6947 5.92078 12.1199 5.74465 12.4334 5.43113C12.7469 5.11761 12.9231 4.69239 12.9231 4.249C12.9231 3.80561 12.7469 3.38038 12.4334 3.06686C12.1199 2.75334 11.6947 2.57721 11.2513 2.57721C10.8079 2.57721 10.3827 2.75334 10.0691 3.06686C9.7556 3.38038 9.57946 3.80561 9.57946 4.249C9.57946 4.69239 9.7556 5.11761 10.0691 5.43113C10.3827 5.74465 10.8079 5.92078 11.2513 5.92078Z" stroke="white"/>
<path d="M4.28516 8.6008C4.61996 7.77497 5.43688 5.8153 6.02614 4.58325M11.0482 9.40431L6.89663 11.2122" stroke="white"/>
<path d="M3.91176 13.2941C3.91176 14.2363 3.14802 15 2.20589 15H2.20224H2.19857H2.19487H2.19116H2.18742H2.18366H2.17988H2.17608H2.17226H2.16841H2.16455H2.16066H2.15676H2.15283H2.14889H2.14492H2.14093H2.13692H2.13289H2.12885H2.12478H2.12069H2.11659H2.11246H2.10831H2.10415H2.09997H2.09576H2.09154H2.0873H2.08304H2.07876H2.07447H2.07015H2.06582H2.06147H2.0571H2.05272H2.04831H2.04389H2.03945H2.035H2.03052H2.02603H2.02152H2.017H2.01246H2.0079H2.00332H1.99873H1.99412H1.9895H1.98486H1.9802H1.97553H1.97084H1.96614H1.96142H1.95669H1.95194H1.94717H1.94239H1.93759H1.93278H1.92796H1.92312H1.91827H1.9134H1.90851H1.90362H1.89871H1.89378H1.88884H1.88389H1.87892H1.87394H1.86895H1.86394H1.85892H1.85389H1.84885H1.84379H1.83872H1.83363H1.82854H1.82343H1.81831H1.81317H1.80803H1.80287H1.7977H1.79252H1.78733H1.78213H1.77691H1.77168H1.76645H1.7612H1.75594H1.75067H1.74539H1.7401H1.7348H1.72948H1.72416H1.71883H1.71349H1.70814H1.70277H1.6974H1.69202H1.68663H1.68123H1.67582H1.6704H1.66498H1.65954H1.6541H1.64864H1.64318H1.63771H1.63223H1.62675H1.62125H1.61575H1.61024H1.60472H1.5992H1.59366H1.58812H1.58258H1.57702H1.57146H1.56589H1.56031H1.55473H1.54914H1.54355H1.53795H1.53234H1.52673H1.52111H1.51548H1.50985H1.50421H1.49857H1.49292H1.48727H1.48161H1.47595H1.47028H1.4646H1.45893H1.45324H1.44755H1.44186H1.43617H1.43047H1.42476H1.41905H1.41334H1.40763H1.40191H1.39618H1.39046H1.38473H1.379H1.37326H1.36752H1.36178H1.35604H1.35029H1.34454H1.33879H1.33304H1.32728H1.32152H1.31576H1.31H1.30424H1.29847H1.29271H1.28694H1.28117H1.2754H1.26963H1.26386H1.25809H1.25231H1.24654H1.24077H1.23499H1.22922H1.22344H1.21767H1.21189H1.20612H1.20035H1.19457H1.1888H1.18303H1.17726H1.17149H1.16572H1.15995H1.15418H1.14842H1.14266H1.13689H1.13113H1.12538H1.11962H1.11387H1.10811H1.10236H1.09662H1.09087H1.08513H1.07939H1.07365H1.06792H1.06219H1.05646H1.05074H1.04502H1.0393H1.03359H1.02788H1.02218H1.01648H1.01078H1.00509H0.999398H0.993714H0.988035H0.98236H0.97669H0.971026H0.965366H0.959711H0.954062H0.948418H0.94278H0.937147H0.93152H0.925899H0.920284H0.914675H0.909072H0.903476H0.897885H0.892302H0.886725H0.881155H0.875591H0.870035H0.864486H0.858944H0.853409H0.847882H0.842363H0.836851H0.831346H0.82585H0.820362H0.814882H0.80941H0.803946H0.798491H0.793045H0.787607H0.782178H0.776758H0.771348H0.765946H0.760553H0.75517H0.749797H0.744433H0.739078H0.733734H0.728399H0.723075H0.717761H0.712457H0.707163H0.70188H0.696608H0.691346H0.686096H0.680856H0.675627H0.67041H0.665204H0.660009H0.654826H0.649655H0.644495H0.639347H0.634211H0.629088H0.623976H0.618877H0.613791H0.608716H0.603655H0.598607H0.593571H0.588548H0.583539H0.578543H0.57356H0.568591H0.563635H0.558693H0.553765H0.54885H0.54395H0.539064H0.534193H0.529335H0.524492H0.519664H0.514851H0.510052H0.505269H0.5005H0.500005L0.500009 14.621L0.500017 13.2941C0.500017 12.352 1.26376 11.5883 2.20589 11.5883C3.14802 11.5883 3.91176 12.352 3.91176 13.2941Z" stroke="white"/>
</svg>
</div>
<div class="usp__text">
<p><span>Review Faster</span> by spawning fast Preview Environments for every Pull Request.</p>
</div>
</div>
<div class="usp__container">
<div class="usp__icon">
<svg class="usp__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" fill="none">
<rect x="6.16406" y="0.500122" width="9.83581" height="11.6665" rx="2.5" stroke="white" stroke-linejoin="round"/>
<rect x="1" y="3.83337" width="9.83581" height="11.6665" rx="2.5" stroke="white"/>
</svg>
</div>
<div class="usp__text">
<p><span>AB Test anything</span> from individual components to entire user experiences.</p>
</div>
</div>
<div class="usp__container">
<div class="usp__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="usp__svg" viewBox="0 0 17 16" fill="none">
<path d="M8.5 1.5C4.91031 1.5 2 4.41031 2 8C2 11.5897 4.91031 14.5 8.5 14.5C12.0897 14.5 15 11.5897 15 8C15 4.41031 12.0897 1.5 8.5 1.5Z" stroke="white" stroke-miterlimit="10"/>
<path d="M8.50043 1.5C6.68574 1.5 4.97949 4.41031 4.97949 8C4.97949 11.5897 6.68574 14.5 8.50043 14.5C10.3151 14.5 12.0214 11.5897 12.0214 8C12.0214 4.41031 10.3151 1.5 8.50043 1.5Z" stroke="white" stroke-miterlimit="10"/>
<path d="M4.16699 3.6665C5.36199 4.51494 6.86637 5.02088 8.50043 5.02088C10.1345 5.02088 11.6389 4.51494 12.8339 3.6665" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8339 12.3334C11.6389 11.4849 10.1345 10.979 8.50043 10.979C6.86637 10.979 5.36199 11.4849 4.16699 12.3334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 1.5V14.5" stroke="white" stroke-miterlimit="10"/>
<path d="M15 8H2" stroke="white" stroke-miterlimit="10"/>
</svg>
</div>
<div class="usp__text">
<p><span>Scale globally</span> as easy as you would with serverless but without all the limitations.</p>
</div>
</div>
</div>
</div>
</div>
在ghost.io中实现摘要
在ghost.io中实现摘要也非常容易。
您只需创建一个新的HTML摘要元素并将其粘贴到完成的代码中即可。然后，您只需悬停在片段上，单击看起来像帖子的按钮，该按钮使您可以创建可重复使用的HTML片段并定义名称。然后，当创建ghost.io中的新块时，您会在列表底部找到摘要。
现在，这给我们带来了这个美丽的可重复使用（响应迅速）的组件（不幸的是，在Dev.to上无法呈现）：
ghost.io中的样式问题
虽然要注意的一件事是实现样式。
通常，样式表被插入页面的头部。如果您仅在ghost.io博客页面上发布文章，则可以将代码插入您的全球博客网站或仅特定文章页面的头脑中。根据您要使用片段的方法和位置，为整个网站插入代码可以说是最方便的方法。然而，随着片段数量的增加，这将使客户为未使用的组件加载许多样式。在这种情况下
要能够将您的摘要转移到自托管的博客网站上，并避免了必须在全球加载所有样式的问题，或者必须为每篇文章手动插入它们，您可以将样式标签实现到您的HTML中片段。这不是最干净的方法，但它确实会使片段的使用更加惯用。
另外，我认为有时您只需要处理给出的标准，如果有效，它可以正常工作：）
结论
在本文中，我们研究了如何使用新的Figma Dev模式创建可以用作ghost.io中可重复使用的摘要的HTML元素。
我认为开发模式在造型方面已经是一个超级整洁且方便的功能。我敢肯定，Figma的团队将继续推动更新以改善体验。如果在某个时候他们决定使FIGMA元素转换为HTML，则可以使该过程从设计变得更加轻松。
我迫不及待想看看接下来会发生什么！