Empty state illustration SVG #1544
-
|
Hello there, Can you please guide us on how can we export SVG for empty state illustration? Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 9 replies
-
|
Hi @ishah-twilio are you looking for an export of the actual empty state illustration, or a guide on how to export the SVG from Figma? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, @ishah-twilio showed me how to export the SVGs from Figma, but even when Figma allows you to do that, the end result is actually a PNG saved as an SVG. For example, this one is not a real SVG (Figma source): But this one is (Figma source): These are the ones I'm looking for:
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @ghostling Thanks for the clarification. We'll reach out to the brand team to see why some of those are just images and not SVG. Stay tuned. |
Beta Was this translation helpful? Give feedback.
-
|
Circling back here. Brand and dsys teams will be meeting to figure out the best path forward here. |
Beta Was this translation helpful? Give feedback.
-
|
I was trying to add the svgs and at the same time following the Empty State guideline in the Paste doc, most of the examples are in png, moving forward seems like svgs are better for scaling? Would the guidelines be updated to svg at some point? Would be nice to have one source of truth for the svgs illustrations, when I was implementing them and had corrupted svgs, wasn't sure where to go for them and seemed like I had to make some modifications to them too. Just a bit worried that it's gonna be misaligned across teams that are using the same illustrations for empty state |
Beta Was this translation helpful? Give feedback.
-
|
Hey @azhengtwilio We hear ya, it's kinda painful right now. After the sync with brand, who own the illustrations, we'll hopefully have a better solution.
Absolutely they will. We're just in the same position as you in reality. SVG are our preference, but we didn't have them at the time of publishing that page.
Yup, a single, central place where you don't need to do any modifications to the asset would be the ideal state we'd like to get to. 🤞🏼 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @SiTaggart. We greatly appreciate all that DSys is doing to improve the users/customers experience along. We were struggling as a team to understand what can we do to solve our immediate need. We added our comments here for documenting purposes. For now, we are using the SVG received from brand team. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @SiTaggart. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @ishah-twilio @ghostling @azhengtwilio - we just had a sync with brand to hammer out this process, and moving forward, the DSYS team is going to help prep SVGs for illustrations to be used in Product to ensure they aren't too large. They will then live in a central "Product" folder within Bynder. We'll also work on getting our docs site updated with these refined guidelines. What's your timeline for needing these SVGs? |
Beta Was this translation helpful? Give feedback.
-
|
We've already implemented some of the Empty state cards with some svgs we found through asking in the slack channel https://twilio.slack.com/archives/C027WETR3/p1623355276070600 and also some from modifying it ourselves. I think we'll just create another ticket to update the svgs when it's ready |
Beta Was this translation helpful? Give feedback.
-
|
Sounds good! We'll create tickets on our side to get these SVGs finalized and then followup with you when they're ready to go. |
Beta Was this translation helpful? Give feedback.
-
|
Here's the ticket to get these SVGs created for y'all. We'll followup when they are done! |
Beta Was this translation helpful? Give feedback.
-
|
@ishah-twilio @corinne-nagel @azhengtwilio |
Beta Was this translation helpful? Give feedback.
-
|
Hi @kelseycavitt, we've updated our code to use these illustrations in the Bynder collection, you can see the results here https://console-storybook.netlify.app/?path=/story/applications-iot-emptystatecard--diy. However, I had to explicitly define the sizes(width, height) of these svgs to make them appear smaller which I'd assume we would want them to have the same sizes for all implementations? If that's the case it would be better to set the height and width of the svgs directly to the standardize size |
Beta Was this translation helpful? Give feedback.
@ishah-twilio @corinne-nagel @azhengtwilio
I just joined the DSys team and was able to work on the illustrations you need. The SVGs have been added to a Bynder collection called Product Optimized Illustrations. They have also been updated in the Brand Illustrations Figma file. Let us know if you have any further questions! Thanks!