问题标签 [sketch-3]

我正在尝试找到一种将 Sketch 形状点（json 格式）转换为 svg 路径的模式，因为我们知道草图文件只是 zip 文件，解压缩你会得到 json 文件。这是示例 json 代码

这给出了一个带有 svg 路径代码的三角形

因为我的理解getting 33(x value)是这样完成的，因为上面的框架原点是在0,0 (frame->x, frame->y)我认为得到它的实际位置是采取frame->width（因为宽度对应于x轴），即66 times first x point in points, which is 0.49999999999999944，导致（32.99999999 approx 33），并first y point采取frame->height(56.86153846153846 times the first y point in points which is 0)导致第一点是33 0

第二点相同，要得到 x 需要frame->width(66)时间，second x point in points which is 0.99999999结果66与它相同corresponding y (56.86153846153846 times 1) which is 56.86153846153846，导致第二点66 56.86153846153846与第三点相同。

如果 frame->x 和 frame->y 的数字大于 0，则开始混淆

考虑这个..

它对应的svg路径是

现在，如果我按上述方式进行数学运算，则不会得到points="33 22.3384615 51.7846154 54.8307692 14.2153846 54.8307692"上述 svg 代码所示的结果。这仅适用于三角形，如果是像 facebook 图标这样的自定义形状路径，它会混淆很多！样品素描标志，

其对应的Sketch json代码如下。

它的svg代码是

我理解<circle />来自第一层，我对此没有任何问题，问题是第二层，path即 f 字母，因为它的草图 json 点映射到<path d="M26.5497954,40 L26.5497954,26.5 L30.3751705,26.5 L31,20.5 L26.5497954,20.5 L26.5497954,17.578 C26.5497954,16.033 26.5866303,14.5 28.6016371,14.5 L30.6425648,14.5 L30.6425648,10.21 C30.6425648,10.1455 28.8894952,10 27.1159618,10 C23.4120055,10 21.0927694,12.4855 21.0927694,17.05 L21.0927694,20.5 L17,20.5 L17,26.5 L21.0927694,26.5 L21.0927694,40 L26.5497954,40 Z" id="facebook-[#176]" fill="#FFFFFF"></path>

这是我正在努力破解的东西..是否有一种模式可以将草图 json 指向 svg 路径，我该怎么做..

谢谢。

我假设这是一个出口问题。试图弄清楚如何重新创建问题 - 任何人都经历过这种情况？也欢迎解决方案。将尝试从 Illustrator 重新导出。

这里有一些麻烦的 SVG（素材图标）：

这是一个正确查看的 SVG（自定义）：

我们正在尝试使用 React react-sketchapp Sketch 开发一个工作流程，Sketch 中的设计师可以生成 React 组件，并且编码（至少对于 CSS）是自动生成和可配置的。似乎没有很多文档和/或支持。

我们了解在 React to Sketch 中开发组件的基础知识，但是有没有人想出一个相反的工作流程？任何其他可以提供帮助的想法或文档？

我们正在考虑放弃 react-sketchapp 并采用更有效的工作流程

我将 3/4 SVG 导入 next.js 页面，但显示不起作用。好像ID有冲突...

我试图从草图更改掩码 ID 和不同导出，它在 svgomg 查看器中有效，但在页面中无效。我还尝试了一些来自社区的组件但没有成功，并编辑了我的 babelrc/webpack 配置。

我的背景 ：

我的山：

我的组件导入：

一个矩形不应该出现，山应该是完整的，显示良好。我的 React 应用程序的许多 SVG 中都有这个问题。我不知道如何以最佳方式封装我的 SVG，我需要保留纵横比属性。

我的英语有点差。对不起。Sketch程序中有一个设计。我无法将径向渐变正确地溢出到 css 代码中。如何获得相同的径向渐变外观？

截图： https ://imgur.com/1XNWNtv - https://imgur.com/lTljQBr

径向渐变高度： 1000px

径向渐变颜色： #3F46AD（不透明度 10%）

注意： “复制 CSS 属性（草图）”功能没有正确导出；

HTML：

CSS：

我使用 Sketch 的材料设计插件来设计我的应用程序。现在我需要设置我的应用主题以完全满足我的原型。颜色没有问题。但是对于文本，我看到 TextTheme 类的字段不匹配并且由插件样式生成

材料排版：

文本主题字段：

这里匹配的正确字段是什么？

我在 iphone SE (sketch) 中得到了应用程序设计。但我正在 iphone 8 plus 中设计应用程序。我想要 iphone 8 plus 的确切尺寸和暗淡。但是当我更改模拟器时，我草绘它只会更改屏幕尺寸而不是所有元素。

我无法从导入的文件中看到我的设计，我只能看到设置页面的背景颜色

我尝试修改容器并在其中添加其他文件。正如您将看到的，有两组代码，第一组是菜单按钮，预期的设计应该是白线，第二组是设置页面

我们在 Sketch 中使用 Material Design 主题编辑器插件。这是一个很棒的工具，因为它使我们能够非常轻松地遵循 Material Design 指南并在我们的应用程序中保持视觉一致性。但我找不到为 Android、iOS、Flutter 或 Web 导出生成的主题的选项。

目前，我更关心为 Android 生成的主题。

那么，是否可以从 Material Plugin for Sketch 将生成的 Android 主题导出为 xml 文件？

有哪些选项可用于将 Sketch for Mac UX 设计导出到 ReactJS 组件以供编码团队使用。

从这些选项中，推荐的选项是什么，每个选项的优缺点是什么？

我们需要能够自动化 ReactJs 组件的编码工作、支持flex和提供对 Web 应用程序和react-native代码的支持的东西。

我们的场景是一个 SaaS 应用程序，我们在其中进行所有编码（html、css 和 js），我们希望使用 Sketch 更好地开发 UX，然后为我们的 UX 组件生成基本代码，供我们的编码团队使用。