Is your feature request related to a problem? Please describe.
Creating a code text view is tricky in design tools. we often take screen shots of the code for this.

Describe the solution you'd like
Add util to inser / convert code as color-highlighted text to design tools.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Requesting this feature to be on devtools
C2C (Component to code) data provider requires the design and the component interface design to exactly match. this is not how the designs and variants are made in most cases. For example, when defining filled button with optional icon, on design side

variant button
 - size: 'small' | 'large' | 'medium' | 'default'
 - icon: true | false
 - variant : 'contained' | 'outlined' | 'text'
 - iconPosition: 'left' | 'right'

which can be represented in a whole other way on development side.

   <Button
        variant="contained"
        color="secondary"
        startIcon={<DeleteIcon />}
      >

taking a deep look, the icon and iconPosition property on design interface has mapped as startIcon or endIcon.

this kind of mapping can be done by bridged coli (computer language interface) editor.

To do this, we need to export design interface from variant definition via assistant first.

Describe the solution you'd like
Variant interface as-is exporter should be implemented and available under tools menu for earlystage developers

Additional context
The design of this dev tool will be provided by my self soon @softmarshmallow

pending url

Under review, will close this issue when review is complete.

support material icons via frame name containing token "mdi_"

Image loader from resources.bridged.cc - https://github.com/bridgedxyz/base

When under children:[] has single widget component, the flutter builder won't explicitly wrap this with array - []. causing dart compile error.

Supporting GA seems like a possible feature looking at a "Rename It" Plugin.

Approaches

• remote GA call
• enabling cookies with some tweaks
• other 3rd solution

References

• https://stackoverflow.com/questions/41067069/javascript-errors-localstorage-cookie-loading-sandboxed-iframe-within-chrome
• firebase/firebase-js-sdk#4372

Working branch

• https://github.com/bridgedxyz/assistant/tree/feature/analytics

i18n support for exporting strings, previewing designs, and so on... this will be implemented with dynamic

Add rule based textfield (input) cursor detection in desing.

Many design contains cursor on it's design, we need to explicitly detect it and ingore it, re-run textfield detection on to the target node.

for: textfield detection

links to help this solved.

• flutter/flutter#18711 (comment)
• https://stackoverflow.com/questions/54799003/singlechildscrollview-wont-work-placement

Hey, author of Figma to Code here. Congrats on your project! Looks really amazing. Only two things:

1. You mention that my project has MIT license. I'm not sure where you saw MIT, but the license in my project is GPL-3.0 (which means, do whatever you want as long as you publish your modifications, which you kind of already voluntarily did :P).

2. I'm happy to merge-back any changes that you've made or any suggestions that you have back into Figma to Code (like the formatted code) unless they are too complicated. I haven't taken a look into what your modifications were, but if you could brief me, I would be happy.

Describe the bug
Icon SVG loading from S3 is too slow

• [Myaby] CORS is not performing well as expected
• [Maybe] Default S3 Config is not ready to loadd bulk icon
• [Maybe] Having a HTTP TXT SVG Transport server might speed this up.

To Reproduce
Steps to reproduce the behavior:

Open icons loader, search for existing icons. Randomly the icons won't show it's visual data (pending on network view on chrome developer tools)

Expected behavior
Icons loader uses svg, which should be loaded blazing fast.

Screenshots

Desktop (please complete the following information):

• Platform: [Figma]
• OS: [Mac]
• Version [e.g. 202x.0.x.x]

origin design source: bridged assistant on figma

Is this bridged completely have the no code write feature means no need write code manually for alignments , color backgrounds & layout adjustment corrections ?? or we can modify code manually ??

For Ex : if the design screen have multiple functions it can be work as per the design when we convert using bridged
coz i had tried XD to Flutter also (actually we can do lot of manual work in XD to flutter ) is this same way to bridged??

Is your feature request related to a problem? Please describe.
Bridged's web support (via flutter, react, etc..) allows us to convert prototyping data such like hover and click. but the cursor type cannot be designated on design platforms such as figma / sketch / xd.

Describe the solution you'd like
Provide cursor type selection UI on actions tab on Bridged assistant.

Describe alternatives you've considered
None available

Additional context

• html default cursors - https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

support temporary 24H resource hosting for free plan users.
https://github.com/bridgedxyz/service

i think it's code it, should be

          Padding(
            padding: const EdgeInsets.only(left : 36, right: 36),
            child: Container(
              height: 103,
              decoration: BoxDecoration(
                color: Color(
                  0xffc4c4c4,
                ),
              ),
            ),
          )

when Left&Right, Target's padding value should be fixed and stretch it.

After design-sdk goes mature stage. We will start developing plugin for sketch.
Since all the codebase can be re-usable thanks to design-sdk, It wont take long. Our goal is to provide within end of 2020.

Figma introduced new feature called Variants today. It allows you to manage state of components in a new way. Until now, we had to make path-variants like star/on and star/of. This is usefull for non-state components but, when more than 2 things start to change in one components things get dirty. We will support figma variants as existing bridged's concept called Slots & Variables. State will be managed as enum.

readmore: https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-Variants

I made some mistake while cleaning up submodule packages, and the current assistant master branch won't execute on figma.

You can use https://github.com/bridgedxyz/assistant/tree/working-backup-starting-point branch for exploring the latest working version.

This will be fixed shortly with less than a week (til Apr 25)

The README file in this repo has some bad links - [404:NotFound]

The markup version of the readme that is displayed for the main page in this repo contains the following links:
Status code [404:NotFound] - Link: https://github.com/bridgedxyz/assistant/blob/master/flutter (figma/flutter)
Status code [404:NotFound] - Link: https://github.com/bridgedxyz/assistant/blob/master/packages/detection (@reflect.bridged.xyz)
Status code [404:NotFound] - Link: https://github.com/bridgedxyz/assistant/blob/master/plugin/README.md (plugin README)

(The link in the readme’s raw markdown may appear in a different format to the link above)

Theses bad links were found by a tool I very recently created as part of an new experimental hobby project: https://github.com/MrCull/GitHub-Repo-ReadMe-Dead-Link-Finder
I (a human) verified that this link is broken and have manually logged this Issue (i.e. this Issue has not been created by a bot).
If this has been in any way helpful then please consider giving the above Repo a Star.

If you have any feedback on the information provided here, or on the tool itself, then please feel free to share your thoughts and pass on the feedback.

1. build test with gitsubmodules.
2. write test scripts with mocked nodes or loaded design from figma via rest api

Links and descriptions to be included.

• homepage
• signup url
• contact
• bug report
• feature request
• share

designs are required @lemin00
developer : @GwonHeeJun

Is your feature request related to a problem? Please describe.
While building a Component / Variant, the most recommanded way (in bridged) is to make a base abstract component and use the instances as new component, then make it as a variant. But before going to variant, we need to override some value from abstract component, which is tricky inside figma or other design tools since we cannot know which values, layers are overrided per variants.

And if this tracking is avalable, we can automate making variants based on override layers/ value -- like selected=true changes color on rect 1's color, then other selected=true variants will be affected as so.

Additional context
overrided data is provided via the api, so won't be a hard work to accomplish.

• figma - figma storage api
• web - localstorage
• sketch - need research
• xd - need research

Is your feature request related to a problem? Please describe.
When designing a page, like below. we encounter some situations of having duplicated contents. which is not quite to be solved as a component since it's redundant. In the realworld programming we solve this with re-usable variables. Since figma or any other design tools does not support variables feature, we are going to provide one.

as you can see, By clicking “Continue with Github/Email” above, you acknowledge that you have read and understood, and agree to Bridged's Terms & Conditions and Privacy Policy. should be managed as variable

Describe the solution you'd like
A Variable that supports

• Text Asset Content
• Image (via url)
• Complex Formed data (json)

Describe alternatives you've considered
Managing it as a component is only way to represent variable-like objects in design tools

this issue will be resolved when official plugin api is updated, and related feature will go under development so then.

Is your feature request related to a problem? Please describe.
WebP is a Standard format for web development, Bridged internally uses webP as well. We found that Asset export & management can be much easier and fully managed. as start of webp exprt support we will make Assistant as a tool that you will only need to manage (import/export) you app assets.

Describe alternatives you've considered
Other plugins support WebP Export, but we decided to make it as our own feature so it can work with other features as a Assistant ecosystem.

Additional context

design available at figma

add emoji loader feature for existing icons-loader with codegen compatibility. emoji as string

emoji source here (reflect)

Describe the bug
The link in the README to compile locally, i.e, https://github.com/bridgedxyz/assistant/blob/master/plugin leads nowhere. It's a missing page

Expected behavior
Should lead to an updated page with clear instructions on how to build and use locally till Figma approves plugin

Is your feature request related to a problem? Please describe.
Once slice node is created, it's hard to trace and select (by mean select, literally selecting the slice from canvas)

Describe the solution you'd like
Add tools that list up slices and make navigate to them.

Describe alternatives you've considered
None. Searching through hierarchy.

Additional context

leaving this open for open discussion. please provide pro/cons for pdf vs png.

"$" should be explicitly converted to "$" with "\$" in the ts script.

text.replace("$", "\$")

I had recently tried this plugin every thing cool but i found that Quick Look & Copy Code Buttons are Not Visible to me firstly i thought its my laptop screen size issue then i had tried other laptop also and i faced same issue again . im attaching screenshot here please find that get me the solution why its happening to me

Describe the bug
When i select a group of elements the preview within the plugin works and it shows code. When i click "Quick Look" it opens the link, but its stuck with the "loading" screen.
When selecting another group i get the message "Failed to build, look in console" shown in Figma.

Compiling a full Page e.g. iPhone 11 Pro Max - 9 does not showing whats visible in figma:
https://console.bridged.xyz/quicklook?url=https://a.uguu.se/myhQCesJb3ps_%5BobjectObject%5D

To Reproduce

Steps to reproduce the behavior:

1. Duplicate this Template: https://www.figma.com/community/file/893381127703378146

2. Go to screen iPhone 11 Pro Max - 3

3. Select Group 4
   

4. Open Plugin and click Quick Look → This opens the link, but it will stuck in the loading-state

Go to iPhone 11 Pro Max - 7 and click on layer Group 49
→ This will get fail to build message in Figma

Expected behavior

Opens a working Quick Look link in the browser.

Screenshots

The generated code for the Group 4 layer:

Container(
  child: Stack(
    children: [
      Positioned.fill(
        child: Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Opacity(
                  opacity: 0.8999999761581421,
                  child: SizedBox(
                    child: Text(
                      "Veggie tomato mix",
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w600,
                        fontFamily: "SF Pro Rounded",
                      ),
                      textAlign: TextAlign.center,
                    ),
                    width: 125,
                    height: 52,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                SizedBox(
                  child: Text(
                    "N1,900",
                    style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.w700,
                      fontFamily: "SF Pro Rounded",
                    ),
                    textAlign: TextAlign.center,
                  ),
                  width: 172,
                  height: 19,
                ),
              ],
            ),
            width: 220,
            padding: EdgeInsets.only(
              top: 145,
              bottom: 39,
            ),
            decoration: BoxDecoration(
              color: Color(
                0xffffff,
              ),
              borderRadius: BorderRadius.circular(
                30,
              ),
              boxShadow: [
                BoxShadow(
                  color: Color(
                    0x19393939,
                  ),
                  offset: Offset(
                    0,
                    30,
                  ),
                  blurRadius: 60,
                ),
              ],
            ),
          ),
        ),
      ),
      Positioned.fill(
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            child: Stack(
              children: [
                Container(
                  width: 164.16,
                  height: 164.16,
                  decoration: BoxDecoration(
                    color: Color(
                      0xffffff,
                    ),
                    shape: BoxShape.circle,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      width: 276.14,
                      height: 183.14,
                    ),
                  ),
                ),
              ],
            ),
            width: 164.16,
            height: 164.16,
          ),
        ),
      ),
    ],
  ),
  width: 220,
);

Generated Code for Group 49:

Container(
  child: Stack(
    children: Container(
      child: Stack(
        children: [
          Positioned(
            left: 64,
            top: 43,
            child: Container(
              child: Opacity(
                opacity: 0.5,
                child: Container(
                  width: 16,
                  height: 12,
                  decoration: BoxDecoration(
                    color: Color(
                      0xffffff,
                    ),
                  ),
                ),
              ),
              padding: EdgeInsets.symmetric(
                vertical: 2,
              ),
            ),
          ),
          Positioned(
            left: 102,
            top: 27,
            child: Text(
              "Veggie tomato mix",
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w600,
                fontFamily: "SF Pro Rounded",
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            left: 103,
            top: 58,
            child: Text(
              "#1,900",
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.w600,
                fontFamily: "SF Pro Rounded",
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            left: 17,
            top: 16,
            child: Container(
              child: Stack(
                children: [
                  Container(
                    width: 69.21,
                    height: 69.21,
                    decoration: BoxDecoration(
                      color: Color(
                        0xffffff,
                      ),
                      shape: BoxShape.circle,
                    ),
                  ),
                  Positioned.fill(
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        width: 116.41,
                        height: 77.21,
                      ),
                    ),
                  ),
                ],
              ),
              width: 69.21,
              height: 69.21,
            ),
          ),
        ],
      ),
      width: 315,
      height: 102,
      decoration: BoxDecoration(
        color: Color(
          0xffffff,
        ),
        borderRadius: BorderRadius.circular(
          20,
        ),
        boxShadow: [
          BoxShadow(
            color: Color(
              0x7000000,
            ),
            offset: Offset(
              0,
              10,
            ),
            blurRadius: 40,
          ),
        ],
      ),
    ),
  ),
);

Desktop (please complete the following information):

• OS: macOS Catalina 10.15.7 (19H2)
• Browser: Chrome 86.0.4240.111 (but using the macOS App)
• Figma Release 90 Build 3

Support creating glass effect from figma -

original post here

2 children group node being converted as frame node

How to make this bug?

1. Drag & Drop Icons
2. See assistant ui
3. Can see not deleted tooltips

ScreenShot

Memo

There is no significant impact on UX, but there is a need to modify it.

Supporting animation export baed on design file is a necessary job. It takes bunch on time communicating with motion designers, and a painful job to convert non-lottie animations as value animation by interpreting the design, motion example.

Supporting animation code generation based on A/B frames, with setting keyframes and timing, motion graphs must be a great feature to have.

This will save developers a lot of time.

https://github.com/bridgedxyz/assistant/projects/3

When I'm trying "yarn install" on a W 10, x64 I'm getting the following error:

error \assistant\[email protected]\uiutils: Command failed.
Exit code: 1
Command: tsc
Arguments:
Directory: \assistant\[email protected]\uiutils
Output:
internal/modules/cjs/loader.js:883
throw err;

Error: assistant\node_modules\node_modules\typescript\bin\tsc'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {

Is your feature request related to a problem? Please describe.
Managing design, development task management is dirty. we need third party tools.
But design is all source of truth, all tasks should be linked to a design.

We are going to make a task management solution integrated inside a existing design ground each company has.

Describe the solution you'd like
General card that

1. describes what this design does.
2. who is responsible, lead designer of this piece of design (screen / components). a.k.a scene.
3. what is the status of current development linked to this scene
4. due date, scheduling, linked tasks
5. integrations with communication channel such as slack, jira.

Additional context

How this will work
Within assistant, you can create modify assign tasks. with integrated experience.

Describe the bug
README link to figma plugin throws 404.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'README'
2. Click on 'First link'

Expected behavior
The link goes somewhere.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome

When I'm trying "yarn install" on a Windows 10, I'm getting the following error:

error Couldn't find package "@bridged.xyz/[email protected]" required by "[email protected]" on the "npm" registry.

Assuming the design is fully linted, the layer aligned left & right should not have a size, instead inherit size from the parent, and be responsive with the given margin.

as in flutter, it will be represented as below.

// some layer with responsive settings
var responsiveChild = Container(
     margin: EdgeInsets.from(left: 24, right: 24)
);

// parent of avove layer.
Conainer(
     width: 200,
     child: responsiveChild
);

A keynote exporter or keynote mode with online, live sharing capabilities.

It also meets the roadmap of bridged (desktop app platform)'s expected feature

Describe the bug
"magical button detection" doesn't appear to be working as expected - have tried various figma constructs to help the AI out for example, creating layer rectangle both as a component and as a standalone layer - have named frame/component/layer "button", "Button", "FlatButton" etc. and also tried to provide verb based layer like "Submit" to help the detection however this is rendering as Positioned or Container widget only.

screenshot/video to replicate
https://www.loom.com/share/b4bf2d12b7f4449fa533ca661e98439d

Expectation
Had expected node layer name to work (if not visual or machine detection) for Flat or Raised buttons in flutter

Preview design instantly on web via flutter web.

Figma Interactive components is now on beta stage.

What's possible?

• Animation preview / making / export based on two(+) component set
• Component code generation with linked trigger events. (e.g. change color on hover)

Is your feature request related to a problem? Please describe.

Renaming is start point of clean documenting & coding. this no differs at design.
Inspired from "Rename It" Plugin form figma, or originally from sketch (i forgot the name), we are adding renaming feature on assistant.

The current solutions has below limitations

• No Component / Instance Linked rename feature
• No Variant properties rename feature
• No TextStyles rename feature (only the layer applied it would be applied by renaming action by other solutions)
• No Color styles rename feature
• Listing all managed styles, keeping it consistent

Describe the solution you'd like
To support above features + basic renaming features inspired from excel, such like naming by sequences (a1, a2, a3, ..)

References
https://renameit.design/
sketch: https://github.com/rodi01/RenameIt/
figma: https://github.com/rodi01/RenameIt-Figma/
xd: https://github.com/rodi01/RenameIt-XD/